@use "sass:map";
@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$carousel-arrow-icon-spacer: 1.5rem !default;
$carousel-arrow-top: 50% !default;
$carousel-arrow-size: 1.5rem !default;
$carousel-arrow-color: h.useVar("primary") !default;
$carousel-arrow-border-width: 1px !default;
$carousel-arrow-border-style: solid !default;
$carousel-arrow-border-color: h.useVar("white") !default;
$carousel-arrow-border-radius: h.useVar("border-radius-rounded") !default;
$carousel-arrow-background-color: $carousel-arrow-border-color !default;
$carousel-arrow-transition: h.useVar("transition-duration")
    h.useVar("transition-timing") !default;

$carousel-autoplay-top: 1em !default;
$carousel-autoplay-left: $carousel-arrow-icon-spacer !default;
$carousel-autoplay-right: unset !default;
$carousel-autoplay-bottom: unset !default;

$carousel-indicators-background: rgba(h.useVar("white"), 0.5) !default;
$carousel-indicators-padding: 0.5rem !default;

$carousel-indicator-spacer: 0.5rem !default;
$carousel-indicator-size: 0.75em !default;
$carousel-indicator-lines-height: 5px !default;
$carousel-indicator-lines-width: 25px !default;
$carousel-indicator-color: h.useVar("primary") !default;
$carousel-indicator-border: 1px solid $carousel-indicator-color !default;
$carousel-indicator-background: h.useVar("white") !default;
$carousel-indicator-transition: h.useVar("transition-duration")
    h.useVar("transition-timing") !default;
$carousel-indicator-dots-radius: h.useVar("border-radius") !default;

$carousel-indicator-active-background: $carousel-indicator-color !default;
$carousel-indicator-active-border: 1px solid $carousel-indicator-color !default;

$carousel-items-transition: all h.useVar("transition-duration")
    h.useVar("transition-timing") 0s !default;
$carousel-item-border: 2px solid transparent !default;

$carousel-overlay-background-color: h.useVar(
    "overlay-background-color"
) !default;
$carousel-overlay-zindex: map.get(vars.$zindex, "overlay") !default;
/* @docs */

.o-carousel {
    @include h.defineVar(
        "carousel-arrow-icon-spacer",
        $carousel-arrow-icon-spacer
    );
    @include h.defineVar("carousel-arrow-color", $carousel-arrow-color);
    @include h.defineVar(
        "carousel-arrow-border-width",
        $carousel-arrow-border-width
    );
    @include h.defineVar(
        "carousel-arrow-border-style",
        $carousel-arrow-border-style
    );
    @include h.defineVar(
        "carousel-arrow-border-color",
        $carousel-arrow-border-color
    );
    @include h.defineVar(
        "carousel-arrow-border-radius",
        $carousel-arrow-border-radius
    );
    @include h.defineVar(
        "carousel-arrow-background-color",
        $carousel-arrow-background-color
    );
    @include h.defineVar("carousel-arrow-top", $carousel-arrow-top);
    @include h.defineVar("carousel-arrow-size", $carousel-arrow-size);
    @include h.defineVar(
        "carousel-arrow-transition",
        $carousel-arrow-transition
    );
    @include h.defineVar("carousel-autoplay-top", $carousel-autoplay-top);
    @include h.defineVar("carousel-autoplay-left", $carousel-autoplay-left);
    @include h.defineVar("carousel-autoplay-right", $carousel-autoplay-right);
    @include h.defineVar("carousel-autoplay-bottom", $carousel-autoplay-bottom);
    @include h.defineVar(
        "carousel-indicators-padding",
        $carousel-indicators-padding
    );
    @include h.defineVar(
        "carousel-indicator-spacer",
        $carousel-indicator-spacer
    );
    @include h.defineVar("carousel-indicator-color", $carousel-indicator-color);
    @include h.defineVar(
        "carousel-indicator-background",
        $carousel-indicator-background
    );
    @include h.defineVar(
        "carousel-indicator-border",
        $carousel-indicator-border
    );
    @include h.defineVar(
        "carousel-indicator-active-background",
        $carousel-indicator-active-background
    );
    @include h.defineVar(
        "carousel-indicator-active-border",
        $carousel-indicator-active-border
    );
    @include h.defineVar(
        "carousel-indicator-transition",
        $carousel-indicator-transition
    );
    @include h.defineVar("carousel-indicator-size", $carousel-indicator-size);
    @include h.defineVar(
        "carousel-indicator-dots-radius",
        $carousel-indicator-dots-radius
    );
    @include h.defineVar(
        "carousel-indicator-lines-height",
        $carousel-indicator-lines-height
    );
    @include h.defineVar(
        "carousel-indicator-lines-width",
        $carousel-indicator-lines-width
    );
    @include h.defineVar(
        "carousel-items-transition",
        $carousel-items-transition
    );
    @include h.defineVar("carousel-item-border", $carousel-item-border);
    @include h.defineVar(
        "carousel-overlay-background-color",
        $carousel-overlay-background-color
    );
    @include h.defineVar("carousel-overlay-zindex", $carousel-overlay-zindex);

    position: relative;
    overflow: hidden;
    width: 100%;

    &__overlay {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        display: flex;
        max-height: 100vh;
        background-color: h.useVar("carousel-overlay-background-color");
        z-index: h.useVar("carousel-overlay-zindex");
    }

    &__wrapper {
        position: relative;
        width: 100%;
    }

    &__items {
        display: flex;
        width: 100%;

        &:not(&--dragging) {
            transition: h.useVar("carousel-items-transition");
        }
    }

    &__item {
        border: h.useVar("carousel-item-border");
        flex-shrink: 0;

        &--clickable {
            @include h.clickable;
        }
    }

    &__indicators {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        padding: h.useVar("carousel-indicators-padding");
        background: h.useVar("carousel-indicators-background");

        &--inside {
            position: absolute;
        }

        &--bottom {
            bottom: 0;
        }

        &--top {
            top: 0;
        }
    }

    &__indicator {
        &:not(:last-child) {
            margin-right: h.useVar("carousel-indicator-spacer");
        }

        &__item {
            display: block;
            cursor: pointer;
            border: h.useVar("carousel-indicator-border");
            background: h.useVar("carousel-indicator-background");
            transition: h.useVar("carousel-indicator-transition");

            &--active,
            :hover {
                background: h.useVar("carousel-indicator-active-background");
                border: h.useVar("carousel-indicator-active-border");
            }

            &--boxes {
                width: h.useVar("carousel-indicator-size");
                height: h.useVar("carousel-indicator-size");
            }

            &--dots {
                border-radius: h.useVar("carousel-indicator-dots-radius");
                width: h.useVar("carousel-indicator-size");
                height: h.useVar("carousel-indicator-size");
            }

            &--lines {
                width: h.useVar("carousel-indicator-lines-width");
                height: h.useVar("carousel-indicator-lines-height");
            }
        }
    }

    &__icon {
        // add clickable cursor
        @include h.clickable;

        color: h.useVar("carousel-arrow-color");
        width: h.useVar("carousel-arrow-size");
        height: h.useVar("carousel-arrow-size");
        border-width: h.useVar("carousel-arrow-border-width");
        border-style: h.useVar("carousel-arrow-border-style");
        border-color: h.useVar("carousel-arrow-border-color");
        border-radius: h.useVar("carousel-arrow-border-radius");
        background: h.useVar("carousel-arrow-background-color");
        transition: h.useVar("carousel-arrow-transition");
        z-index: 1;
    }

    &__icon-autoplay {
        position: absolute;
        top: h.useVar("carousel-autoplay-top");
        left: h.useVar("carousel-autoplay-left");
        right: h.useVar("carousel-autoplay-right");
        bottom: h.useVar("carousel-autoplay-bottom");
    }

    &__icon-prev,
    &__icon-next {
        position: absolute;
        top: h.useVar("carousel-arrow-top");
        transform: translateY(calc(-1 * h.useVar("carousel-arrow-top")));
    }

    &__icon-prev {
        left: h.useVar("carousel-arrow-icon-spacer");
    }

    &__icon-next {
        right: h.useVar("carousel-arrow-icon-spacer");
    }
}