/**
 * Slider Builder Styles
 *
 * @package CB_Plugin
 */

.c-slider-builder {
    position: relative;
}

.swiper-overflow-visible {
    overflow: visible !important;
}

.c-slider-builder ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Pagination */
.c-slider-builder__pagination {
    --swiper-theme-color: var(--sb-pagination-color, #fff);
}

.c-slider-builder__pagination[data-position="bottom"][data-wide="true"] {
    max-width: var(--sb-pagination-bottom-width, 50%);
}

.c-slider-builder__pagination[data-position="bottom"][data-wide="false"] {
    bottom: var(--sb-pagination-bottom, -30px);
    max-width: var(--sb-pagination-bottom-width, 50%);
    top: auto;
}

.c-slider-builder__pagination[data-position="bottom"][data-wide="false"]:not(.swiper-pagination-bullets-dynamic) {
    transform: var(--sb-pagination-bottom-transform, translateX(50%));
}

.c-slider-builder__pagination[data-position="top"][data-wide="true"] {
    max-width: var(--sb-pagination-top-width, 50%);
}

.c-slider-builder__pagination[data-position="top"][data-wide="false"] {
    bottom: auto;
    max-width: var(--sb-pagination-top-width, 50%);
    top: var(--sb-pagination-top, -30px);
}

.c-slider-builder__pagination[data-position="top"][data-wide="false"]:not(.swiper-pagination-bullets-dynamic) {
    transform: var(--sb-pagination-top-transform, translateX(50%));
}

/* Navigation */
.c-slider-builder__navigation {
    display: flex;
    gap: var(--sb-navigation-gap, 16px);
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.c-slider-builder__navigation[data-alignment="wide"] .c-slider-builder__pagination[data-type="bullets"] {
    --swiper-pagination-bottom: auto;
}

.c-slider-builder__navigation[data-alignment="wide"] .c-slider-builder__pagination:not(.swiper-pagination-bullets-dynamic) {
    bottom: auto;
    position: relative;
}

/* Navigation Position: Default (Sides) */
.c-slider-builder__navigation[data-position="default"] {
    justify-content: space-between;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.c-slider-builder__navigation[data-position="default"] .c-slider-builder__button--prev {
    left: var(--sb-navigation-button-left, -10px);

    @media screen and (min-width: 1200px) {
        transform: var(--sb-navigation-button-left-transform, translateX(-100%));
    }
}

.c-slider-builder__navigation[data-position="default"] .c-slider-builder__button--next {
    right: var(--sb-navigation-button-right, -10px);

    @media screen and (min-width: 1200px) {
        transform: var(--sb-navigation-button-right-transform, translateX(100%));
    }
}

/* Navigation Position: Top */
.c-slider-builder__navigation[data-position="top"] {
    padding: var(--sb-navigation-top-padding, 20px 0 0);
    top: var(--sb-navigation-top, -50px);
    transform: var(--sb-navigation-top-transform, translateY(-100%));
}

/* Navigation Position: Top Center */
.c-slider-builder__navigation[data-position="top"][data-alignment="center"] {
    justify-content: center;
    left: 0;
    right: 0;
}

/* Navigation Position: Top Left */
.c-slider-builder__navigation[data-position="top"][data-alignment="left"] {
    justify-content: flex-start;
    left: 0;
}

/* Navigation Position: Top Right */
.c-slider-builder__navigation[data-position="top"][data-alignment="right"] {
    justify-content: flex-end;
    right: 0;
}

/* Navigation Position: Top Wide */
.c-slider-builder__navigation[data-position="top"][data-alignment="wide"] {
    align-items: center;
    justify-content: space-between;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--sb-navigation-top-wide-width, 50%);
    right: 0;
    width: 100%;
}

/* Navigation Position: Bottom */
.c-slider-builder__navigation[data-position="bottom"] {
    bottom: var(--sb-navigation-bottom, -50px);
    padding: var(--sb-navigation-bottom-padding, 0 0 20px);
    transform: var(--sb-navigation-bottom-transform, translateY(100%));
}

/* Navigation Position: Bottom Center */
.c-slider-builder__navigation[data-position="bottom"][data-alignment="center"] {
    justify-content: center;
    left: 0;
    right: 0;
}

/* Navigation Position: Bottom Left */
.c-slider-builder__navigation[data-position="bottom"][data-alignment="left"] {
    justify-content: flex-start;
    left: 0;
}

/* Navigation Position: Bottom Right */
.c-slider-builder__navigation[data-position="bottom"][data-alignment="right"] {
    justify-content: flex-end;
    right: 0;
}

/* Navigation Position: Bottom Wide */
.c-slider-builder__navigation[data-position="bottom"][data-alignment="wide"] {
    align-items: center;
    justify-content: space-between;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--sb-navigation-bottom-wide-width, 50%);
    right: 0;
    width: 100%;
}

.c-slider-builder__button {
    background: var(--sb-navigation-button-background, var(--sb-navigation-color, #412458));
    border-radius: var(--sb-navigation-button-radius, 50%);
    color: var(--sb-navigation-button-color, #ffffff);
    cursor: pointer;
    padding: var(--sb-navigation-button-padding, 10px);
    pointer-events: auto;
    position: relative;
    transition: var(--sb-navigation-button-transition, background 0.3s ease-in-out, color 0.3s ease-in-out);

    &:is(:hover, :focus) {
        opacity: var(--sb-navigation-button-hover-opacity, 0.9);
    }

    &.swiper-button-disabled {
        opacity: var(--sb-navigation-button-disabled-opacity, 0.5);
        pointer-events: none;
    }

    svg {
        display: block;
        height: var(--sb-navigation-button-icon-height, 24px);
        width: var(--sb-navigation-button-icon-width, 24px);
    }
}