@import "carousel-gallery";

.splide {
    // Carousel config
    --rocket-ui-splide-pagination-item-background: var(--rocket-color-primary-300);
    --rocket-ui-splide-arrow-icon-color: var(--rocket-color-secondary-100);
    --rocket-ui-splide-arrow-button-background: var(--rocket-color-white-base);

    $this: &;

    padding: 0;

    &__pagination {
        margin-top: 50px;
        column-gap: 6px;

        li {
            display: flex;
            overflow: hidden;
        }

        &__page {
            @include size(16px);
            @include transition;

            padding: 0;
            background: var(--rocket-ui-splide-pagination-item-background);
            box-shadow: inset 0 0 0 3px var(--rocket-color-secondary-100);
            border: 0;
            border-radius: 50%;

            &.is-active {
                background: var(--rocket-color-secondary-100);
            }
        }
    }

    &__arrows {
        @include absolute(50%, null, null, 0);

        column-gap: 0.4rem;
        display: none;
        justify-content: space-between;
        margin-bottom: 0.4rem;
        pointer-events: none;
        transform: translate(0%, -50%);
        width: 100%;

        @include breakpoint(md) {
            display: flex;
        }
    }

    &__arrow {
        @include transition;
        @include size(90px);

        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        background: var(--rocket-ui-splide-arrow-button-background);
        border: 1px solid var(--rocket-ui-splide-arrow-button-border-color);
        color: var(--rocket-ui-splide-arrow-icon-color);
        border-radius: 50%;
        box-shadow: 4px 3px 5px rgba(0, 0, 0, 0.17);
        pointer-events: auto;

        &[disabled] {
            --rocket-ui-splide-arrow-icon-color: var(--rocket-color-grey-500);
            --rocket-ui-splide-arrow-button-background: var(--rocket-color-grey-100);

            user-select: none;
            pointer-events: none;
        }

         svg {
             @include size(auto);
             @include max-size(100%);

             fill: currentColor;
             color: inherit;
         }

        @include breakpoint(lg) {
            &:hover {
                opacity: 0.6;
            }
        }
    }

    &__arrow--prev {
        svg {
            transform: rotate(180deg);
        }
    }
}