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

$option-margin-checked: nx-spacer(m);

:host {
    display: block;
}

:host:focus {
    outline: none;
}

:host(.nx-hidden) {
    display: none;
}

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

nx-checkbox {
    margin-bottom: 0;
}

.nx-dropdown-results__option {
    @include dropdown-overlay__option;
}

.nx-dropdown-results__option-label {
    @include dropdown-overlay__option-label;
    white-space: pre-line;
}

:host(.nx-multiselect) {
    .nx-dropdown-results__option {
        display: block;
        padding-left: nx-spacer(2m);

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

:host:not(.nx-dropdown-item--disabled):hover .nx-dropdown-results__option-label,
:host(.nx-selected):not(.nx-dropdown-item--disabled):hover .nx-dropdown-results__option-label,
:host(.nx-selected):not(.nx-dropdown-item--disabled):hover .nx-dropdown-results__option-checkicon {
    color: v(dropdown-item-hover-color);
}

:host(.nx-selected) .nx-dropdown-results__option-checkicon {
    opacity: 1;
}

:host(.nx-selected) .nx-dropdown-results__option-label {
    color: v(dropdown-item-selected-color);
}

.nx-dropdown-results__option-checkicon {
    opacity: 0;
    margin-right: nx-spacer(2xs);
    height: v(dropdown-item-line-height);
    color: v(dropdown-item-checkmark-color);

    nx-icon {
        line-height: v(dropdown-item-line-height);
        font-size: nx-font-size(xs);

        ::ng-deep .nx-dropdown__panel--in-outline-field & {
            font-size: nx-font-size(3xs) !important;
        }

        &:has(svg) {
            height: v(dropdown-item-line-height);
        }
    }

    :host-context([dir='rtl']) & {
        margin-right: initial;
        margin-left: nx-spacer(2xs);
    }
}

// focus style
/* clean-css ignore:start */

:host-context(.keyboard-focused) :host(.nx-dropdown-item--active) {
    .nx-dropdown-results__option .nx-dropdown-results__option-label {
        border-radius: nx-border-radius(s);
        @include focus-style;
    }
}

/* clean-css ignore:end */

// focus style - multiselect dropdown item
/* clean-css ignore:start */
:host(.nx-multiselect.nx-dropdown-item--active) {
    .nx-dropdown-results__option .nx-dropdown-results__option-label {
        box-shadow: none;

        @media screen and (forced-colors: active) {
            box-shadow: none;
        }
    }

    ::ng-deep .nx-checkbox__label {
        border-radius: nx-border-radius(s);
        @include focus-style;
    }
}
/* clean-css ignore:end */

:host(.nx-selected.nx-dropdown-item--active) .nx-dropdown-results__option-label {
    padding-left: $option-margin-checked;
    margin-left: -$option-margin-checked;

    [dir='rtl'] & {
        padding-left: initial;
        margin-left: initial;
        padding-right: $option-margin-checked;
        margin-right: -$option-margin-checked;
    }
}

:host ::ng-deep .nx-checkbox__label {
    padding: 0 nx-spacer(3xs);
    margin: 0 -#{nx-spacer(3xs)};
}

:host(.nx-dropdown-item--disabled) {
    .nx-dropdown-results__option {
        cursor: not-allowed;
    }

    .nx-dropdown-results__option-label {
        color: v(dropdown-item-text-color-disabled);
    }
}

@media screen and (forced-colors: active) {
    :host:hover:not(.nx-dropdown-item--disabled),
    :host(.nx-dropdown-item--active):not(.nx-multiselect) {
        .nx-dropdown-results__option-label {
            color: highlightText;
            background-color: highlight;
            forced-color-adjust: none;
        }
    }

    :host(.nx-dropdown-item--active):not(.nx-multiselect) {
        .nx-dropdown-results__option-checkicon {
            forced-color-adjust: none;
            color: highlightText;
            background: highlight;
            z-index: 1;
        }
    }

    :host(.nx-dropdown-item--disabled) {
        .nx-dropdown-results__option-label {
            color: GrayText;
        }
    }
}
