@import '../shared-styles/index';

:host:focus {
    outline: none;
}

:host:first-child .nx-autocomplete-option {
    padding-top: nx-spacer(s);
}

:host:last-child .nx-autocomplete-option {
    padding-bottom: nx-spacer(s);
}

:host .nx-autocomplete-option {
    @include dropdown-overlay__option;
    padding-left: nx-spacer(2m);

    // keyboard focus styling
    &.nx-active {
        .nx-autocomplete-option__label {
            border-radius: nx-border-radius(s);
            @include focus-style;
        }
    }

    :host-context([dir='rtl']) & {
        padding-right: nx-spacer(2m);
    }
}

:host .nx-autocomplete-option__label {
    @include dropdown-overlay__option-label;
}

:host:not(.nx-disabled) .nx-autocomplete-option {
    &:hover,
    &.nx-active {
        .nx-autocomplete-option__label {
            // the autocomplete should have the same look as the dropdown, so using the dropdown token here
            color: v(dropdown-item-hover-color);
        }

        @media screen and (forced-colors: active) {
            .nx-autocomplete-option__label {
                color: highlightText;
                background-color: highlight;
                border-radius: nx-border-radius(s);
                forced-color-adjust: none;
            }
        }
    }
}

@media screen and (forced-colors: active) {
    :host(.nx-disabled) {
        .nx-autocomplete-option__label {
            color: GrayText;
        }
    }
}

:host(.nx-disabled) {
    .nx-autocomplete-option {
        cursor: not-allowed;
    }

    .nx-autocomplete-option__label {
        color: v(dropdown-item-text-color-disabled);
    }
}
