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

div.listbox {
    margin: var(--spacing-200) 0; /* margin collapse sensible default */
}

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

div.listbox__options[role="listbox"] {
    @include background-color-token(
        listbox-background-color,
        color-background-primary
    );

    cursor: default; /* needed to override text cursor */
}

span.listbox__options[role="listbox"] {
    display: inline-block;
}

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

div.listbox__options--reverse[role="listbox"] {
    right: 0;
}

.listbox__description {
    @include color-token(
        listbox-button-subtitle-color,
        color-foreground-secondary
    );

    font-size: var(--font-size-small);
    font-weight: normal;
    grid-column: 1 2;
    grid-row: 2;
}

div.listbox__option[role="option"] {
    @include listbox-option-base();

    &:disabled .listbox__description,
    &[aria-disabled="true"] .listbox__description {
        @include listbox-disabled();
    }
}

span.listbox__value {
    flex: 1;
    white-space: nowrap;
}

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

    margin-inline-start: var(--spacing-100);
}

div.listbox__options[role="listbox"]:focus
    .listbox__option--active[role="option"] {
    background-color: var(--color-state-primary-hover);
}

div.listbox__option[aria-selected="true"] svg.icon {
    opacity: 1;
}

/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
.listbox__options:focus:not(:focus-visible) {
    outline: none;
}
