@use '../../root' as *;
@use '../../utilities' as *;


/* Style the pagination container */
.pagination {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 60px;
    @include breakpoint (max-xl){
        padding-top: 30px;
    }
    @include breakpoint (max-sm){
        padding-top: 72px;
    }
}
.slider-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; 
    padding-bottom: 5px;
    width: 25% !important;
    @include breakpoint (max-xxl){
        width: 30% !important;
    }
    @include breakpoint (max-xl){
        width: 37% !important;
    }
    @include breakpoint (max-lg){
        width: 45% !important;
    }
    @include breakpoint (max-sm){
        width: 60% !important;
    }
}

.swiper-pagination-bullet {
    width: 80px;
    height: 4px;
    border-radius: 30px;
    background: $title-color;
    @include breakpoint (max-md){
        width: 50px;
    }
    @include breakpoint (max-xxsmall){
        width: 40px;
    }
}

.swiper-pagination-bullet-active {
    background-color: $theme-color;
    border-radius: 30px;
    width: 80px;
    height: 4px;
    flex-shrink: 0;
    @include breakpoint (max-md){
        width: 50px;
    }
    @include breakpoint (max-xxsmall){
        width: 40px;
    }
}

// Slider md button 
.slider-button-prev,
.slider-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    z-index: 10;

    &:hover {
        background: $theme-color;
        @include transition;
        i {
            color: $white;
            @include transition;
        }
    }
}


// Custom Pagination

.pagination2 {
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 60px;
    @include breakpoint (max-xl){
        padding-top: 30px;
    }
    @include breakpoint (max-sm){
        padding-top: 72px;
    }

    .slider-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px; 
        padding-bottom: 5px;
        width: 32% !important;
        @include breakpoint (max-xxl){
            width: 36% !important;
        }
        @include breakpoint (max-xl){
            width: 43% !important;
        }
        @include breakpoint (max-lg){
            width: 57% !important;
        }
        @include breakpoint (max-sm){
            width: 75% !important;
        }
    }

    .swiper-pagination-bullet {
        width: 80px;
        height: 4px;
        border-radius: 30px;
        background: $title-color;
        @include breakpoint (max-md){
            width: 50px;
        }
        @include breakpoint (max-xxsmall){
            width: 40px;
        }
    }

    .swiper-pagination-bullet-active {
        background-color: $theme-color;
        border-radius: 30px;
        width: 80px;
        height: 4px;
        flex-shrink: 0;
        @include breakpoint (max-md){
            width: 50px;
        }
        @include breakpoint (max-xxsmall){
            width: 40px;
        }
    }
}

.pagination3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}

// Pagination with Number
.page-nav-wrap {
    ul {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        li {
            .page-numbers {
                &.current {
                    background: $theme-color;
                    color: $white;  
                }
                
                display: flex;
                width: 56px;
                height: 56px;
                justify-content: center;
                align-items: center;
                color: $title-color4;
                font-family: $body-font;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 26px; /* 162.5% */ 
                border-radius: 10px;
                background: $smoke2;

                @media (max-width: 767px) {
                    margin-top: 10px;
                    width: 50px;
                    height: 50px;
                    font-size: 14px;
                }
  
                i {
                    color: $theme-color;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 28px; /* 175% */
                }
  
                &:hover {
                    background: $theme-color;
                    color: $white;
                    i {
                        color: $white;
                    }
                }
            }
        }
    }
}