@import "../variables/variables";
@import "../mixins/private/dropdown-mixins";
@import "../mixins/private/listbox-mixins";
@import "../mixins/private/token-mixins";
@import "../mixins/public/utility-mixins";

$height-textbox: 40px;

.combobox {
    box-sizing: border-box;
    line-height: normal;
    position: relative;
}

span.combobox {
    display: inline-block;
    vertical-align: bottom;
}

.combobox__value {
    @include truncate();

    flex: 1 0 auto;
}

.combobox__options--fix-width[role="listbox"] {
    width: 100%;
}

.combobox__listbox {
    @include dropdown-base(combobox-listbox);
}

.combobox__listbox--reverse {
    @include dropdown-reverse();
}

.combobox__control > svg.icon,
.combobox__control > button {
    margin-inline-start: 8px;
}

.combobox__option[role^="option"] {
    @include listbox-option-base();
    @include dropdown-item-border-radius(combobox-listbox);

    cursor: default; /* needed to override text cursor */
    position: relative; /* needed for icon to show properly */

    &:not(:last-child) {
        margin-bottom: 1px;
    }

    &:hover {
        background-color: var(--color-state-primary-hover);
    }

    svg.icon {
        @include listbox-option-status();
    }
}

.combobox__option--active[role^="option"] {
    background-color: var(--color-state-primary-active);

    svg.icon {
        opacity: 1;
    }
}

.combobox__control button.icon-btn {
    height: 38px;
    padding: 0;
    position: absolute;
    right: 1px;
    top: 1px;
    width: 38px;
}

.combobox__control button.icon-btn svg {
    left: 0;
    margin: 0;
    right: 0;
}

.combobox--expanded .combobox__listbox {
    display: block;
}

.combobox--expanded svg.icon--12 {
    transform: rotate(180deg);
}

.combobox__control > svg.icon--12 {
    @include color-token(combobox-textbox-icon-color, color-foreground-primary);

    pointer-events: none;
    position: absolute;
    right: 17px; /* +1 px for the border on the input box */
    top: calc(50% - 8px); /* 8px is half the height of dropdown icon size */
}

.combobox__control > input {
    appearance: none;
    border-radius: var(
        --combobox-textbox-border-radius,
        var(--border-radius-50)
    );
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    height: $height-textbox;
    margin-left: 0;
    margin-right: 0;
    padding: 0 32px 0 16px;
    @include background-color-token(
        combobox-textbox-background-color,
        color-background-secondary
    );
    @include border-color-token(
        combobox-textbox-border-color,
        color-stroke-default
    );
    @include color-token(
        combobox-textbox-foreground-color,
        color-foreground-on-secondary
    );

    &[readonly] {
        @include color-token(
            combobox-textbox-foreground-color,
            color-foreground-primary
        );
        /* fixes the cursor in firefox (1 of 2) */
        cursor: default;
        /* fixes the cursor in firefox (2 of 2) */
        text-shadow: 0 0 0 inherit;

        --webkit-user-select: none; /* Fix to get rid of unintended cursor in iOS mobile */

        &::-moz-selection,
        &::selection {
            @include background-color-token(
                combobox-textbox-readonly-selection-background,
                color-background-primary
            );
        }
    }

    &[disabled],
    &[aria-disabled="true"] {
        @include border-color-token(
            combobox-textbox-disabled-border-color,
            color-background-disabled
        );
        @include color-token(
            combobox-textbox-disabled-foreground-color,
            color-foreground-disabled
        );

        &[readonly] {
            text-shadow: 0 0 0 var(--color-foreground-disabled);
        }

        & + svg {
            opacity: 0.5;
        }
    }

    &[aria-invalid="true"] {
        @include border-color-token(
            combobox-textbox-invalid-foreground-color,
            color-stroke-attention
        );
    }

    &::-ms-clear {
        display: none;
    }
}

.combobox__control--borderless > input {
    background-color: transparent;
    border-color: transparent;
    padding-left: 0;
}

.combobox__control > input:focus {
    @include background-color-token(
        combobox-textbox-focus-background-color,
        color-background-primary
    );
    @include border-color-token(
        combobox-textbox-focus-border-color,
        color-foreground-primary
    );
}

.combobox__control--borderless > input:focus {
    border-color: transparent;
    outline: none;
}

.combobox--fluid {
    width: 100%;

    .combobox__control > input {
        width: 100%;
    }
}

.combobox--large .combobox__control > input {
    font-size: var(--font-size-medium);
    height: $height-textbox + 8px;
}

.combobox__control > input[disabled] {
    @include background-color-token(
        combobox-textbox-disabled-background-color,
        color-background-secondary
    );
}

.combobox__option--active[role="option"] {
    @include color-token(
        combobox-listbox-option-hover-foreground-color,
        color-foreground-primary
    );

    font-weight: bold;
}

@media all and (-ms-high-contrast: active), all and (-ms-high-contrast: none) {
    *::-ms-backdrop,
    .combobox__value {
        min-width: 100%;
    }
}

/* RTL */
[dir="rtl"] {
    .combobox__control > input {
        padding: 0 16px 0 32px;
    }

    .combobox__control > svg.icon,
    .combobox__control > button {
        right: unset;
    }

    .combobox__control > svg.icon {
        left: 16px;
        margin-top: 1.3px;
    }

    .combobox__control > button {
        left: 0;
    }

    .combobox__control button.icon-btn {
        left: 1px;
        right: inherit;
    }
}
