.usa-combo-box {
max-width: units($theme-input-max-width); position: relative;
}
.usa-combo-box–pristine {
.usa-combo-box__input { padding-right: calc(5em + 4px); &::-ms-clear { display: none; } } .usa-combo-box__clear-input { display: block; }
}
.usa-combo-box__input {
@extend %block-input-general; @extend %block-input-styles; appearance: none; margin-bottom: 0; max-width: none; padding-right: calc(2.5em + 3px);
}
button.usa-combo-box__toggle-list, button.usa-combo-box__clear-input {
&:focus { outline-offset: -4px; }
}
.usa-combo-box__toggle-list__wrapper:focus, .usa-combo-box__clear-input__wrapper:focus {
outline: 0;
}
.usa-combo-box__toggle-list, .usa-combo-box__clear-input {
background-color: transparent; background-position: center; background-size: auto units(3); border: 0; bottom: 1px; cursor: pointer; margin-bottom: 0; opacity: 0.6; padding-right: units(4); position: absolute; top: 1px; z-index: z-index(100);
} .usa-combo-box__clear-input {
@include add-background-svg("usa-icons/close"); display: none; right: calc(2.5em + 3px);
}
.usa-combo-box__toggle-list {
@include add-background-svg("usa-icons/expand_more"); background-size: auto units(4); right: 1px;
}
.usa-combo-box__input-button-separator {
background-color: color("gray-cool-20"); position: absolute; top: 1px; margin-bottom: 8px; margin-top: 8px; width: 1px; right: calc(2.5em + 2px); box-sizing: border-box; z-index: z-index(200);
}
.usa-combo-box__list {
@extend %block-input-general; @include u-border(1px, "base-dark"); background-color: color("white"); border-radius: 0; border-top: 0; margin: 0; max-height: 12.1em; overflow-x: hidden; overflow-y: scroll; padding: 0; position: absolute; width: 100%; z-index: z-index(300); &:focus { outline: 0; }
}
.usa-combo-box__list-option {
border-bottom: units(1px) solid color("base-lighter"); cursor: pointer; display: block; padding: units(1); &--focused { @include focus-outline($width: 2px, $offset: -2px, $color: "blue-warm-80v"); position: relative; z-index: z-index(100); &:focus { outline-offset: -4px; } } &--selected { background-color: color("primary"); border-color: color("primary"); color: color("white"); }
}
.usa-combo-box__list-option–no-results {
cursor: not-allowed; display: block; padding: units(1);
}