@import '../../style/variables.scss';

.custom-pgntion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: $white;
    padding: 16px 0;
    border-top: 1px solid $mainBorder;
    @media only screen and (min-width: 1441px) {
        padding: 20px 0;
    }
    & > p {
        font-size: 14px;
        line-height: 1.36; 
        font-weight: 400;  
        margin: 0;
        font-family: 'Avenir Next';
        color: #929292;
        @media only screen and (min-width: 1441px) {
            font-size: 16px;
        }
    }
    .pagination-wrap {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
        @media only screen and (min-width: 379px) {
            gap: 8px;
        }
        @media only screen and (min-width: 1441px) {
            gap: 15px;
        }
        li {
            a {
                font-size: 14px;
                line-height: 1;
                font-weight: 400;
                font-family: 'Avenir Next';
                padding: 0 5px;
                min-width: 30px;
                height: 30px;
                border: 1px solid $primary;
                color: $primary;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                border-radius: 0;
                cursor: pointer;
                transition: 0.3s all ease-in-out;
                &.notPointer {
                    cursor: initial;
                    pointer-events: none;
                }
                @media only screen and (min-width: 1441px) {
                    font-size: 16px;
                    min-width: 40px;
                    height: 40px;
                }
            }
            &.previous,&.next{
                display: flex;
                a{
                    color: $primary;
                    // width: 67px;
                    // text-decoration: underline;
                }
            }
            &.next{
                a{
                    transform: rotate(180deg);
                }
            }
            &.selected,
            &:hover {
                a {
                    background-color: $primary;
                    border-color: $primary;
                    color: $white;
                }
            }
            &.disable {
                display: none;
                a {
                    cursor: initial;
                    border: 1px solid $mainBorder;
                    &:hover{
                        background: transparent;
                        border: 1px solid $mainBorder;
                        color: $primary;
                    }
                }
            }
        }
    }
}