@use '../utils' as *;

/*----------------------------------------*/
/*  2.11 Carousel
/*----------------------------------------*/

.bd-category-navigation {
    button {
        position: absolute;
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        top: 50%;
        left: -40px;
        transform: translateY(-50%);
        z-index: 5;
        border-radius: 100%;
        color: var(--bd-white);
        background-color: var(--bd-primary);
        transition: all 0.3s linear;
        @media #{$xl,$lg,$md,$sm} {
            left: 0;
        }
        @media #{$xs} {
            left: -10px;
        }
        &:hover {
            background-color: var(--bd-secondary);
        }
    }
    .category-nav-next {
        left: auto !important;
        right: -40px;
        @media #{$xl,$lg,$md,$sm} {
            right: 0;
        }
        @media #{$xs} {
            right: -10px;
        }
    }
}
.bd-book-navigation {
    button {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        border-radius: 8px;
        color: var(--bd-theme-black);
        border: 1px solid var(--bd-border-primary);
        transition: all 0.3s ease-in-out;

        &:hover {
            background-color: var(--bd-primary);
            border-color: var(--bd-primary);
            color: var(--bd-white);
        }
        &.swiper-button-disabled {
            background: #efefef;
            color: #C9C9C9;
            pointer-events: none;
        }
    }
}