// POSTS NAVIGATION
.navigation.pagination {
    .nav-links {
        .page-numbers {
            display: inline-block;
            padding: 1rem 1.5rem;
            margin: .2rem;
            height: inherit;
            transition: all .1s;                
            background-color: $color-gray-100;
            border-radius: 0;
            border: none;
            font-size: 1.2rem;
            color: $color-black-700;

            &:hover {
                color: $color-white;
                background-color: $primary-color;
            }
        }

        .current {
            @extend .page-numbers;
            color: $color-white;
            background-color: $primary-color;
        }

        .dots {
            @extend .page-numbers;

            &:hover {
                color: $color-black-700;
                background-color: $color-gray-100;
            }
        }
    }
}

// PAGE LINKS
.page-links {
    margin: 3rem 0;
    padding: 1rem 0;
    border-top: 1px solid $color-gray-300;
    border-bottom: 1px solid $color-gray-300;

    .post-page-numbers {
        display: inline-block;
        padding: 1rem 1.5rem;
        margin: .2rem;
        height: inherit;
        transition: all .1s;                
        background-color: $color-gray-100;
        border-radius: 0;
        border: none;
        font-size: 1.2rem;
        color: $color-black-700;

        &:hover {
            color: $color-white;
            background-color: $primary-color;
        }        
    }
 
    .current {
        @extend .page-numbers;
        color: $color-white;
        background-color: $primary-color;
    }    
}