@use "sass:color";
@use "sass:math";
@use "../../core/jkl";
@use "../../core/jkl/colors";
@use "../../shared/input/shared-input-styles" as shared;

@layer jokul.components {
    .jkl-combobox {
        --jkl-combobox-button-padding: var(--jkl-unit-10);
        --jkl-combobox-button-active-value-padding: var(--jkl-unit-10)
            var(--jkl-unit-05) var(--jkl-unit-5) var(--jkl-unit-10);
        --jkl-combobox-input-height: #{jkl.rem(48px)};
        --jkl-combobox-actions-right: var(--jkl-unit-10);
        --jkl-combobox-actions-top: var(--jkl-unit-05);
        --jkl-combobox-chips-gap: var(--jkl-unit-05);
        --jkl-combobox-search-input-padding: var(--jkl-combobox-button-padding);
        --jkl-combobox-native-padding: 0 var(--jkl-unit-50) 0 var(--jkl-unit-10);
        --jkl-combobox-option-padding: var(--jkl-unit-10) var(--jkl-unit-15);
        --jkl-combobox-option-line-height: 2rem;
        --jkl-combobox-search-input-height: #{jkl.rem(28px)};

        @include jkl.small-device {
            --jkl-combobox-input-height: #{jkl.rem(44px)};
        }

        position: relative;

        @include jkl.reset-outline;

        & .jkl-combobox__option:focus {
            outline: none;
        }

        &__wrapper {
            position: relative;
            max-width: 100%;
            display: flex;
            gap: 1ch;
            cursor: pointer;

            @include shared.wrapper_styles;

            /* Juster padding når det vises chips for valgte elementer */
            &--active-value .jkl-combobox__chips {
                padding: jkl.rem(7.5px);
            }

            @include jkl.keyboard-navigation {
                &:has(:focus-visible) {
                    @include jkl.focus-outline;
                    background-color: var(--jkl-color-background-input-focus);
                }
            }

            &:has(.jkl-icon-button:focus-visible) {
                outline: none;
            }

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

        &__search-input {
            border: none;
            outline: none;
            padding: 0;
            flex: 1 1 1ch;
            min-width: 0;
            max-height: var(--jkl-combobox-search-input-height);

            @include shared.input-styles;
        }

        &__arrow {
            pointer-events: none;
            transform: translateY(-50%);

            @include jkl.motion;
            transition-property: transform, color;

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

        &__menu {
            @include jkl.motion;
            transition-property: height;
            top: calc(100% - 1px);
            overflow-y: auto;
            position: absolute;
            z-index: jkl.$z-index--dropdown;
            left: jkl.rem(-1px);
            right: jkl.rem(-1px);
            background-color: var(--jkl-color-background-container-high);
            border: jkl.rem(2px) solid var(--jkl-color-border-input-focus);
            border-radius: 0 0 jkl.rem(3px) jkl.rem(3px);
            box-sizing: border-box;
            max-height: calc(
                calc(var(--jkl-combobox-max-shown-options, 5) + 0.5) *
                    var(--jkl-combobox-input-height)
            );
        }

        &__option {
            @include jkl.text-style("text-small");
            @include jkl.motion;
            display: flex;
            align-items: center;
            border: 0;
            color: var(--jkl-color-text-default);
            background-color: var(--jkl-color-background-interactive);
            transition-property: color, background-color;
            cursor: pointer;
            padding: var(--jkl-combobox-option-padding);
            width: 100%;
            text-align: left;
            line-height: var(--jkl-combobox-option-line-height);

            &:focus,
            &:hover {
                background-color: var(--jkl-color-background-interactive-hover);
            }

            &-description {
                @include jkl.text-style("text-small");
                color: var(--jkl-color-text-subdued);
                display: block;
                width: 100%;
            }
        }

        &__option--selected {
            justify-content: space-between;
        }

        &__no-option {
            padding: var(--jkl-combobox-option-padding);
        }

        &__chips {
            display: flex;
            flex: 1 1 auto;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--jkl-combobox-chips-gap);
            min-width: 0;
            box-sizing: border-box;
            padding: var(--jkl-text-input-padding);

            .jkl-chip {
                white-space: break-spaces;

                .jkl-tooltip-trigger {
                    font-weight: 700;
                }
            }
        }

        &--invalid {
            .jkl-combobox__search-input,
            .jkl-combobox__wrapper {
                background-color: var(--jkl-color-background-alert-error);
            }

            .jkl-combobox__search-input,
            .jkl-combobox__button,
            .jkl-combobox__wrapper {
                color: var(--jkl-color-text-on-alert);
            }
        }

        &--menu-closed {
            .jkl-combobox__search-input {
                position: absolute;
                background-color: transparent;
                width: 94%;
                padding-right: 0;
            }
        }

        &--menu-open {
            .jkl-combobox__wrapper {
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }

            .jkl-combobox__wrapper:hover .jkl-combobox__actions {
                transform: translateY(#{jkl.rem(-3px)});
            }

            .jkl-combobox__search-input {
                cursor: text;
            }
        }
    }
}