@use "sass:color";
@use "../../core/jkl";

$_slider-rounded: jkl.rem(100px);

.jkl-toggle-slider {
    --jkl-slider-bg: var(--jkl-color-background-container-low);
    --jkl-slider-pill: var(--jkl-color-background-container-high);
    --jkl-slider-text: var(--jkl-color-text-default);
    --jkl-slider-text--active: var(--jkl-color-text-default);
    --jkl-slider-focus-color: var(--jkl-color-border-action);
    --jkl-slider-hover-color: var(--jkl-color-border-action);

    @include jkl.use-font-variables("jkl-slider");

    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    width: 100%;
    flex-direction: column;
    user-select: none;

    html:not([data-mousenavigation]):not([data-touchnavigation]) &:focus-within {
        .jkl-toggle-slider__pill {
            box-shadow: inset 0 0 0 jkl.rem(2px) var(--jkl-slider-focus-color);
        }
    }

    &__legend {
        margin-bottom: jkl.$spacing-8;

        @include jkl.use-font-variables("jkl-slider-legend");

        &--sr-only {
            @include jkl.screenreader-only;
        }
    }

    &__inputs {
        $_slider-offset: 2px;
        display: flex;
        position: relative;
        overflow: hidden;
        background-color: var(--jkl-slider-bg);
        border-radius: $_slider-rounded;
        border: $_slider-offset solid var(--jkl-slider-bg);
    }

    &__input {
        position: absolute;
        opacity: 0;
    }

    &__label {
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        cursor: pointer;
        padding: var(--jkl-unit-02) var(--jkl-unit-20);
        color: var(--jkl-slider-pill-text);
        -webkit-tap-highlight-color: transparent;

        /* Prevent really short labels to look like circles */
        min-width: 30px;

        &:hover {
            color: var(--jkl-slider-hover-color);
        }

        &--selected {
            @include jkl.no-grow-bold;
            color: var(--jkl-slider-pill-text--active);
        }
    }

    &__pill {
        height: 100%;
        background-color: var(--jkl-slider-pill);
        position: absolute;
        transition-property: width, transform;
        border-radius: $_slider-rounded;

        @include jkl.motion(standard, expressive);
    }

    @include jkl.from-medium-device {
        flex-direction: row;
        align-items: center;

        &__legend {
            margin-bottom: 0;
            margin-right: 1.2em;
        }
    }

    @include jkl.forced-colors-mode {
        & .jkl-toggle-slider__inputs {
            background-color: Canvas;
        }

        & .jkl-toggle-slider__pill {
            background-color: ButtonFace;
        }
    }
}