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

@layer jokul.components {
    .jkl-select {
        --jkl-select-arrow-right: var(--jkl-unit-05);
        --border-width: #{jkl.rem(1px)};
        --border-radius: var(--jkl-border-radius-s);
        --min-option-height: min(var(--jkl-unit-60), 3rem);

        /* Vi må trekke fra bredden til rammen for å få riktig høyde */
        --button-padding: calc(var(--jkl-unit-15) - var(--border-width))
            calc(0.75em - var(--border-width));
        --option-padding: var(--jkl-unit-05) 0.75em;

        display: block;
        position: relative;

        @include jkl.reset-outline;

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

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

        & select {
            appearance: none;

        &:-moz-focusring {
            color: transparent;
            text-shadow: 0 0 0 var(--jkl-color-text-subdued);
        }

            & option {
                font-weight: normal;
                font-family: sans-serif;
                color: var(--jkl-color-text-subdued);
                background-color: var(--jkl-color-background-container-high);
            }
        }

        &__outer-wrapper {
            position: relative;
            width: 15rem;
            min-width: 7rem;
            max-width: 100%;
        }

        &__search-input {
            box-sizing: border-box;
            color: var(--jkl-color-text-subdued);
        }

        &__search-input,
        &__button {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background-color: transparent;
            color: var(--jkl-color-text-subdued);
            cursor: pointer;

            height: var(--jkl-select-input-height);
            border-radius: var(--border-radius);
            border: var(--border-width) solid var(--jkl-color-border-input);
            box-shadow: 0 0 0 jkl.rem(1px) transparent;
            text-align: left;
            width: 100%;

            padding: var(--button-padding);

            /* Øk padding for å gi plass til ikonet */
            padding-inline-end: calc(0.75em + 1.3em);

            transition-property: color, border-color, box-shadow;

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

            &--active-value {
                color: var(--jkl-color-text-default);
            }

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

                & ~ .jkl-select__arrow {
                    transform: translateY(calc(-50% + #{jkl.rem(3px)}));
                }
            }

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

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

            &:has(:focus-visible) {
                .jkl-select__button,
                .jkl-select__search-input {
                    @include jkl.focus-outline;
                }
            }
        }

        &__arrow {
            pointer-events: none;
            position: absolute;
            right: 0.75em;
            top: 50%;
            color: var(--jkl-color-text-default);

            transform: translateY(-50%);
            transition-property: transform, color;

            @include jkl.motion;
            @include jkl.forced-colors-svg-fallback(
                $stroke: CanvasText,
                $fill: CanvasText
            );

            .jkl-select:has([aria-invalid="true"]) & {
                color: var(--jkl-color-text-on-alert);
            }
        }

        &__options-menu {
            position: absolute;
            left: jkl.rem(-1px);
            right: jkl.rem(-1px);
            top: 100%;
            z-index: jkl.$z-index--dropdown;

            background-color: var(--jkl-color-background-container-high);
            border: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
            border-top: none;
            border-radius: 0 0 var(--border-radius) var(--border-radius);
            box-sizing: border-box;

            overflow-y: auto;
            // Sett makshøyde på listen til høyden av (maxShownOptions + 0.5) ganger høyden på ett enlinjes valg
            max-height: calc(
                calc(var(--jkl-select-max-shown-options, 5) + 0.5) *
                    var(--min-option-height)
            );

            transition-property: height;

            @include jkl.motion;
        }

        &__option-wrapper {
            margin: 0;
            padding: 0;

            list-style-type: none;
            -webkit-overflow-scrolling: touch;
        }

        &__option {
            color: unset;
            border: 0; // removes native styling
            width: 100%;
            background-color: inherit;
            min-height: var(--min-option-height);
            text-align: left;
            transition-property: color, background-color;
            position: relative;
            padding: var(--option-padding);
            cursor: pointer;

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

            /* For å unngå "dobbel" markering skrur vi av markering på hover i React-
        komponenten med data-focus="controlled". Uten dette satt vil valgene
        markeres ved hover som normalt. */
            &:focus,
            :not([data-focus="controlled"]) > &:hover {
                color: var(--jkl-color-text-default);
                background-color: var(--jkl-color-background-interactive-hover);
            }

            &-description {
                color: var(--jkl-color-text-subdued);
                display: block;
                width: 100%;

                @include jkl.text-style("text-small");
            }
        }

        /* --------
       VARIANTS
       -------- */

        &--inline {
            display: inline-block;
            vertical-align: top;
        }

        &--open {
            .jkl-select__search-input,
            .jkl-select__button {
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
                border-color: var(--jkl-color-border-input-focus);
                background-color: var(--jkl-color-background-container-high);
                box-shadow: 0 0 0 jkl.rem(1px)
                    var(--jkl-color-border-input-focus);

                &:hover ~ .jkl-select__arrow {
                    transform: translateY(calc(-50% + #{jkl.rem(-3px)}));
                }
            }
        }

        &--invalid {
            .jkl-select__search-input,
            .jkl-select__button {
                background-color: var(--jkl-color-background-alert-error);
                color: var(--jkl-color-text-on-alert-subdued);

                &--active-value {
                    color: revert;
                }
            }
        }

        @include jkl.forced-colors-mode {
            // Vi er en button (hvis ikke native) og får ButtonText, men vi later som vi er en select, og den har CanvasText
            & .jkl-select__button,
            & .jkl-select__search-input {
                color: CanvasText;
                border: 2px solid ButtonText;
                background-color: Canvas;
                outline: revert;

                &:hover {
                    border-color: Highlight;
                }
            }

            & .jkl-select__option {
                color: CanvasText;

                border-top: 1px solid Canvas;
                border-bottom: 1px solid Canvas;

                &:hover,
                &:focus {
                    border-top: 1px solid SelectedItem;
                    border-bottom: 1px solid SelectedItem;

                    @include jkl.no-grow-bold;
                }
            }
        }
    }
}