.pagination {
    margin-bottom: 20px;

    .page-item {

        &.page-indicator .page-link {
            padding: .65rem .8rem;
            font-size: 14px;
            border-radius: 0;
        }

        &.page-indicator:hover{
            .page-link{
                color: $dark;
            }
        }

        .page-link {
            // height: 3.125rem;
            border-radius: 0;
            text-align: center;
            padding: 0.55rem 1rem;
            font-size: 1rem;
            background: rgba(255, 255, 255, 0.15);
            color: $dark;
            // line-height: 2.375rem;
            border: 1px solid $border;

            &:hover i,span{
                color: $white;
            }

            &:focus{
                outline: 0;
                box-shadow: none;
            }

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

        &.active .page-link {
            background-color: $primary;
            border-color: $primary;
            color: $white;
        }

        .page-link {
            // width: 4.0625rem;
            color: $dark;
        }

        &:last-child .page-link{
            margin-right: 0;
        }

        &:first-child .page-link{

            @at-root [direction="rtl"] #{&} {
                margin-right: 0;
            }
        }
    }

    &-gutter{

        .page-item{
            margin-right: 7px;
            
            .page-link{
                border-radius: 3px !important;
            }
        }
    }

    &-circle{
        .page-item{
            margin-right: 7px;
            
            .page-link, &.page-indicator .page-link{
                width: 40px;
                height: 40px;
                padding: 0;
                line-height: 40px;
                border-radius: 50% !important;
                padding: 0;
            }
        }
    }

    &.pagination-md{

        .page-item{

            .page-link{
                width: 30px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
            }
        }
    }

    &.pagination-sm{

        .page-item{

            &.page-indicator .page-link {
                font-size: 12px;
            }

            .page-link{
                padding: 0;
                width: 30px;
                height: 30px;
                line-height: 30px;
                font-size: 14px;
            }
        }
    }

    &.pagination-xs{

        .page-item{

            &.page-indicator .page-link {
                font-size: 10px;
            }

            .page-link{
                padding: 0;
                width: 25px;
                height: 25px;
                line-height: 25px;
                font-size: 12px;
            }
        }
    }

    
}