.mwi-pagination-wrap { 
    overflow: hidden;
    margin: 20px 0 30px;
    padding: 4px;
    border: 1px solid $border-color;
    border-radius: 5px;
    display: block;
    
    * {
        box-sizing: border-box;
    }
}

    .mwi-pagination-item {
        background: none;
        display: block;
        width: auto;
        min-width: 30px;
        padding: 0;
        height: 28px;
        line-height: 26px;
        border-radius: 3px;
        -webkit-font-smoothing: antialiased;
        font-size: 14px;
        border: none;
        text-align: center;
        color: #333;
        border: 1px solid $border-color;
        box-shadow: none;
        text-shadow: none;
        
        &--active,
        &:hover,
        &:active,
        &:focus {
            border: 1px solid darken( $border-color, 10% );
            outline: none;
            box-shadow: none;
            text-shadow: none;
        }
    }
    
    .mwi-pagination-text {
        padding: 0 10px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        float: left;
        display: inline;
        width: auto;
        display: block;
    }
    
    .mwi-prod-count {
        float: left;
        margin-right: 3px;
        
        [data-eq-state="small"] &,
        [data-eq-state="medium"] & {
            display: none;
        }
    }
    
    .entry-content .mwi-pagination,
    .mwi-pagination { 
        float: left;
        display: inline;
        width: auto;
        margin: 0 !important;
        padding: 0 !important;
        
        [data-eq-state="small"] &,
        [data-eq-state="medium"] & {
            text-align: center;
            width: 100%;
        }
        
        li {
            list-style: none none outside;
            margin: 0 3px 0 0;
            padding: 0;
            float: left;
            display: inline-block;
            width: auto;
            vertical-align: middle;
            
            [data-eq-state="small"] &,
            [data-eq-state="medium"] & {
                float: none;
                display: inline-block;
                margin: 0 0 4px;
            }
            
            &.active {
                @extend .mwi-pagination-item;
                background: $border-color;
                border-color: darken( $border-color, 10% );
                
                [data-eq-state="small"] &,
                [data-eq-state="medium"] & {
                    float: none;
                    display: inline-block;
                }
            }
            
            a {
                @extend .mwi-pagination-item;
                text-decoration: none;
                
                &:hover {
                    border-color: darken( $border-color, 10% );
                    background: none;
                    text-decoration: none;
                }
            }
        }
    }
        
        .mwi-chevron {
            font-size: 22px;
            top: -2px;
            position: relative;
        }
    
    .mwi-sort-by-form {
        float: right;
        display: inline-block;
        width: auto;
        height: 28px;
        
        [data-eq-state="small"] &,
        [data-eq-state="medium"] & {
            display: block;
            float: left;
            width: 100%;
            clear: both;
            border-top: 1px solid $border-color;
            margin: 0;
            padding: 4px 0 0;
            height: auto;
            text-align: center;
        }
    }
        
        .mwi-sort-by-wrapper {
            [data-eq-state="small"] &,
            [data-eq-state="medium"] & {
                float: none;
            }
        }
        
        .mwi-order {
            float: right;
            display: inline-block;
            margin: 0 0 0 3px;
            
            [data-eq-state="small"] &,
            [data-eq-state="medium"] & {
                float: none;
                margin: 0;
            }
        }
        
        .mwi-order-label {
            [data-eq-state="medium"] & {
                float: none;
                display: inline-block;
                padding-left: 0;
            }
            
            [data-eq-state="small"] & {
                display: none;
            }
        }
        
// colors

.mwi-pagination-wrap--blue {
    @include pagination-color($blue);
}

.mwi-pagination-wrap--turquoise {
    @include pagination-color($turquoise);
}

.mwi-pagination-wrap--green {
    @include pagination-color($green);
}

.mwi-pagination-wrap--purple {
    @include pagination-color($purple);
}

.mwi-pagination-wrap--yellow {
    @include pagination-color($yellow);
}

.mwi-pagination-wrap--orange {
    @include pagination-color($orange);
}

.mwi-pagination-wrap--red {
    @include pagination-color($red);
}

.mwi-pagination-wrap--grey {
    @include pagination-color($grey);
}

.mwi-pagination-wrap--light-grey {
    @include pagination-color($light-grey, #333);
}

.mwi-pagination-wrap--dark-grey {
    @include pagination-color($dark-grey);
}