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

/* @docs */
$steps-disabled-opacity: h.useVar("control-disabled-opacity") !default;
$steps-vertical-padding: calc(2 * h.useVar("control-spacer")) 0 !default;

$steps-step-color: h.useVar("font-color") !default;
$steps-step-font-size: h.useVar("font-size") !default;
$steps-step-font-weight: 500 !default;
$steps-step-line-height: h.useVar("line-height") !default;

$steps-step-border-color: h.useVar(
    "control-background-color"
) !default; // color scheme is inverted for steps
$steps-step-background-color: h.useVar(
    "control-border-color"
) !default; // color scheme is inverted for steps
$steps-step-active-border-color: h.useVar("primary") !default;
$steps-step-active-background-color: h.useVar("primary-invert") !default;
$steps-step-previous-border-color: $steps-step-active-background-color !default; // previus is the inverted active color scheme
$steps-step-previous-background-color: $steps-step-active-border-color !default; // previus is the inverted active color scheme

$steps-step-border-radius: h.useVar("border-radius") !default;
$steps-step-border-radius-rounded: h.useVar("border-radius-rounded") !default;

$steps-step-divider-height: 0.2em !default;

$steps-step-label-padding: 0.2em !default;
$steps-step-label-background-color: h.useVar("white") !default;

$steps-content-padding: calc(2 * h.useVar("control-spacer")) !default;
/* @docs */

.o-steps {
    @include h.defineVar("steps-disabled-opacity", $steps-disabled-opacity);
    @include h.defineVar("steps-vertical-padding", $steps-vertical-padding);

    @include h.defineVar("steps-step-color", $steps-step-color);
    @include h.defineVar("steps-step-font-size", $steps-step-font-size);
    @include h.defineVar("steps-step-font-weight", $steps-step-font-weight);
    @include h.defineVar("steps-step-line-height", $steps-step-line-height);

    @include h.defineVar("steps-step-border-color", $steps-step-border-color);
    @include h.defineVar(
        "steps-step-background-color",
        $steps-step-background-color
    );
    @include h.defineVar(
        "steps-step-active-border-color",
        $steps-step-active-border-color
    );
    @include h.defineVar(
        "steps-step-active-background-color",
        $steps-step-active-background-color
    );
    @include h.defineVar(
        "steps-step-previous-border-color",
        $steps-step-previous-border-color
    );
    @include h.defineVar(
        "steps-step-previous-background-color",
        $steps-step-previous-background-color
    );

    @include h.defineVar("steps-step-border-radius", $steps-step-border-radius);
    @include h.defineVar(
        "steps-step-border-radius-rounded",
        $steps-step-border-radius-rounded
    );

    @include h.defineVar(
        "steps-step-divider-height",
        $steps-step-divider-height
    );

    @include h.defineVar("steps-step-label-padding", $steps-step-label-padding);
    @include h.defineVar(
        "steps-step-label-background-color",
        $steps-step-label-background-color
    );

    @include h.defineVar("steps-content-padding", $steps-content-padding);

    // size variants
    @each $name, $value in vars.$sizes {
        &--#{$name} {
            @include h.defineVar(
                "steps-step-font-size",
                h.useVar("size-#{$name}")
            );
        }
    }

    &__list {
        display: flex;
        flex-wrap: wrap;
        flex-grow: 1;
        flex-shrink: 0;

        margin: 0;
        padding: 0;

        transition: background h.useVar("transition-duration")
            h.useVar("transition-timing");
    }

    &__step {
        position: relative;

        display: flex;
        flex-grow: 1;
        flex-basis: 1em;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        margin: 0;
        padding: 0;

        color: h.useVar("steps-step-color");
        font-size: h.useVar("steps-step-font-size");
        font-weight: h.useVar("steps-step-font-weight");
        line-height: h.useVar("steps-step-line-height");

        background: transparent;
        border: transparent;

        &--right {
            flex-direction: row;
        }

        &--left {
            flex-direction: row-reverse;
        }

        &--clickable {
            // add clickable cursor
            @include h.clickable;
        }

        &--disabled {
            @include h.disabled(h.useVar("steps-disabled-opacity"));
        }

        &--active {
            @include h.defineVar(
                "steps-step-border-color",
                h.useVar("steps-step-active-border-color")
            );
            @include h.defineVar(
                "steps-step-background-color",
                h.useVar("steps-step-active-background-color")
            );
        }

        &--previous {
            @include h.defineVar(
                "steps-step-border-color",
                h.useVar("steps-step-previous-border-color")
            );
            @include h.defineVar(
                "steps-step-background-color",
                h.useVar("steps-step-previous-background-color")
            );
        }

        &--previous,
        &--active {
            .o-steps__divider {
                background-position: left bottom;
            }
        }

        // color variants
        @each $name, $pair in vars.$colors {
            &--#{$name} {
                @include h.defineVar(
                    "steps-step-active-border-color",
                    h.useVar($name)
                );
                @include h.defineVar(
                    "steps-step-active-background-color",
                    h.useVar("#{$name}-invert")
                );
                @include h.defineVar(
                    "steps-step-previous-border-color",
                    h.useVar("#{$name}-invert")
                );
                @include h.defineVar(
                    "steps-step-previous-background-color",
                    h.useVar($name)
                );
            }
        }
    }

    &__divider {
        // This will contain the divider
        content: " ";
        display: block;
        position: absolute;
        bottom: 0;
        left: -50%;
        width: 100%;
        top: h.useVar("steps-step-font-size");
        height: h.useVar("steps-step-divider-height");

        background: linear-gradient(
            to left,
            h.useVar("steps-step-background-color") 50%,
            h.useVar("steps-step-border-color") 50%
        );
        background-size: 200% 100%;
        background-position: right bottom;
    }

    // marker inside the step
    &__marker {
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;

        height: calc(h.useVar("steps-step-font-size") * 2);
        width: calc(h.useVar("steps-step-font-size") * 2);

        color: h.useVar("steps-step-border-color");

        border-width: h.useVar("steps-step-divider-height");
        border-style: solid;
        border-color: h.useVar("steps-step-border-color");
        border-radius: h.useVar("steps-step-border-radius");

        background-color: h.useVar("steps-step-background-color");

        &--rounded {
            @include h.defineVar(
                "steps-step-border-radius",
                h.useVar("steps-step-border-radius-rounded")
            );
        }
    }

    // label inside the step
    &__step-label {
        z-index: 1;
        text-align: center;

        font-size: calc(h.useVar("steps-step-font-size") * 1.2);

        padding: h.useVar("steps-step-label-padding");

        background-color: h.useVar("steps-step-label-background-color");
    }

    &__content {
        position: relative;
        overflow: visible;

        display: flex;
        flex-direction: column;

        &-transitioning {
            overflow: hidden;
        }

        &:not(:has(.o-steps__panel:empty)) {
            padding: h.useVar("steps-content-padding");
        }
    }

    &:not(:last-child) {
        margin-bottom: h.useVar("tabs-content-padding");
    }

    // content item
    &__item {
        flex-shrink: 0;
        flex-basis: auto;
    }

    &--vertical {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;

        .o-steps {
            &__list {
                height: 100%;
                flex-direction: column;
            }

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

                padding: h.useVar("steps-vertical-padding");
            }

            &__divider {
                height: 100%;
                width: h.useVar("steps-step-divider-height");
                top: -50%;
                left: calc(50% - h.useVar("steps-step-divider-height") * 0.5);
            }

            &__content {
                flex-grow: 1;
                flex-basis: 70%;
            }

            &__navigation {
                flex-basis: 100%;
            }
        }

        &.o-steps--position-right {
            flex-direction: row-reverse;
        }
    }

    &--mobile {
        @extend .o-steps--vertical;

        .o-steps__step-label {
            display: none;
            padding: 0;
        }
    }
}