@charset "UTF-8";
@use "../../jkl";

@layer jokul.components {
    .jkl-select {
        --border-color: var(--jkl-color-border-default);
        --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));

        anchor-scope: --select-button;

        &__button {
            display: grid;
            gap: var(--jkl-spacing-8);
            grid-template-columns: 1fr auto;
            align-items: center;
            padding: var(--button-padding);
            border: var(--border-width) solid var(--border-color);
            border-radius: var(--jkl-border-radius-s);
            background-color: var(--background-color);
            color: var(--color);
            anchor-name: --select-button;
            box-shadow: var(--box-shadow);
            field-sizing: content;

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

            min-width: var(--width, 20ch);
            max-width: 100%;
            text-align: left;

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

            &:focus-visible {
                @include jkl.focus-outline;
            }

            &[aria-invalid] {
                --color: var(--jkl-color-error-text-default);
                --border-color: var(--jkl-color-error-border-default);
                --box-shadow: 0 0 0 #{jkl.rem(1px)} var(--border-color);
            }
        }

        &__popover {
            /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
            --shadow-color: rgb(49 48 48 / 20%);
            --shadow-color: light-dark(rgb(49 48 48 / 20%), rgb(0 0 0 / 50%));

            z-index: var(--jkl-floating-z-index, #{jkl.$z-index--modal});
            margin-block: var(--jkl-spacing-xs);
            min-inline-size: anchor-size(width);
            box-sizing: border-box;
            padding: var(--jkl-spacing-24);
            border: none;
            background-color: var(--jkl-color-background-container);
            position: fixed;

            // Hindrer display: flex fra Flex-komponenten å overstyre oppførselen til popover
            &:not(:popover-open) {
                display: none;
            }

            [role="listbox"] {
                display: grid;
                grid-template-columns: auto 1fr auto;
                grid-auto-rows: min-content;
                gap: var(--jkl-spacing-8);
            }

            @include jkl.screen-to(499px) {
                margin: 0;
                inset: 0;
                width: 100%;
                height: 100%;
                padding-bottom: calc(env(safe-area-inset-bottom) + var(--jkl-spacing-24));

                & [role="listbox"] {
                    flex-grow: 999;
                    overflow-y: auto;
                }

                & header,
                & .jkl-button--primary {
                    flex-shrink: 0;
                }
            }

            @include jkl.screen-from(500px) {
                position-anchor: --select-button;
                position-area: bottom span-right;
                position-try: normal flip-block;
                box-shadow: 0 4px 20px 0 var(--shadow-color);
                border-radius: var(--jkl-border-radius-s);
                z-index: var(--jkl-floating-z-index, #{jkl.$z-index--floating});
                padding: var(--jkl-spacing-8);
                inset: auto;
                margin-inline: 0;
                max-height: 45dvh;
                overscroll-behavior: none;

                @supports (max-height: round(up, 45dvh, 24px)) {
                    // Forsøk å alltid vise litt av neste valg hvis det ikke er plass
                    // til å vise alle valgene i popover-en
                    max-height: round(up, 45dvh, 24px);
                }

                & header,
                & .jkl-button--primary {
                    display: none;
                }
            }
        }

        select {
            display: none;
        }
    }
}