@charset "UTF-8";
@use "sass:color";
@use "sass:math";
@use "../../core/jkl/index" as jkl;
@use "../../core/jkl/colors";

.jkl-select--beta {
    --border-color: var(--jkl-color-border-input);
    --background-color: transparent;
    --color: var(--jkl-color-text-default);
    --box-shadow: 0 0 0 jkl.rem(1px) transparent;
    --border-width: #{jkl.rem(1px)};
    --button-padding: calc(var(--jkl-unit-15) - var(--border-width));
    --arrow-right: #{jkl.$unit-02};

    display: block;
    position: relative;

    @include jkl.reset-outline;

    & *:focus-visible {
        outline: none;
    }

    & .jkl-tooltip-question-button:focus {
        @include jkl.focus-outline($offset: 0);
    }

    &-wrapper {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    & select,
    & .jkl-icon {
        grid-row: 1;
    }

    & select {
        background-color: var(--background-color);
        color: var(--color);
        box-shadow: var(--box-shadow);
        padding: var(--button-padding);
        padding-inline-end: calc(var(--button-padding) + 1.3em);
        height: var(--input-height);
        grid-column: 1 / -1;
        appearance: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        border: var(--border-width) solid var(--border-color);
        border-radius: var(--jkl-border-radius-s);
        text-align: left;
        width: 100%;
        transition-property: color, border-color, box-shadow;

        &:has(option:checked[value=""]) {
            --color: var(--jkl-color-text-subdued);
        }

        &:hover {
            --border-color: var(--jkl-color-border-input-focus);
            --box-shadow: 0 0 0 jkl.rem(1px) var(--jkl-color-border-input-focus);
        }

        &:invalid {
            --background-color: var(--jkl-color-background-alert-error);
            --color: var(--jkl-color-text-on-alert-subdued);
        }

        &:focus-visible {
            outline: none;
        }

        @include jkl.motion;
        @include jkl.text-style("text-medium");

        @include jkl.keyboard-navigation {
            &:focus-visible,
            &:has(:focus-visible) {
                @include jkl.focus-outline;
            }

            &:has(:focus-visible) {
                select {
                    @include jkl.focus-outline;
                }
            }
        }
    }

    & .jkl-icon {
        pointer-events: none;
        grid-column: 2;
        padding-inline-end: var(--button-padding);
    }
}