@use "../../core/jkl";

@layer jokul.components {
    .jkl-autosuggest {
        --border-radius: var(--jkl-border-radius-s);
        --jkl-autosuggest-menu-padding: var(--jkl-unit-20) var(--jkl-unit-10) 0;
        --jkl-autosuggest-controller-button-width: auto;
        --jkl-autosuggest-controller-button-padding: 0 var(--jkl-unit-15);
        --jkl-autosuggest-controller-button-icon-size: #{jkl.rem(20px)};
        --jkl-autosuggest-option-padding: var(--jkl-unit-10) 0.75em;
        --jkl-autosuggest-option-height: #{jkl.rem(48px)};

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;

        &[aria-expanded="true"] .jkl-text-input-wrapper {
            border-radius: var(--border-radius) var(--border-radius) 0 0;
        }

        &__no-hits-message {
            padding: var(--jkl-autosuggest-option-padding);

            @include jkl.text-style("text-small");
            color: var(--jkl-color-text-subdued);
        }

        &__menu {
            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;
            position: absolute;
            inset: 100% jkl.rem(-1px) auto;
            margin: 0;
            padding: 0;
            max-height: 60vh;
            overflow-y: auto;
            width: calc(100% + jkl.rem(2px));
            z-index: jkl.$z-index--dropdown;
            -webkit-overflow-scrolling: touch;
        }

        &__item-list {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        &__item {
            @include jkl.text-style("text-small");
            color: unset;
            display: flex; // avoids wrapping long names "under" the focus arrow
            align-items: center;
            border: 0; // removes native styling
            background-color: var(--jkl-color-background-interactive);
            min-height: var(--jkl-autosuggest-option-height);
            text-align: left;

            @include jkl.motion;
            transition-property: color, background-color;
            position: relative;
            padding: var(--jkl-autosuggest-option-padding);
            cursor: pointer;

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