/* Searchable dropdown - see wwwroot/js/app-combobox.js and
   TagHelpers/AppFieldTagHelper.cs (<app-combobox>).

   Every colour is a Bootstrap CSS variable, never a literal - same rule as
   app-multiselect.css. The app defaults to dark and the toggle flips
   data-bs-theme at runtime, so a hard-coded colour survives the flip. */

/* Nothing below applies until the script has run and added the wrapper; a
   blocked or broken script leaves a plain <input list> with the browser's own
   popup, which is a working field. */
.app-combobox-control {
    position: relative;
}

/* Room for the caret on the right of the box. */
.app-combobox-control > .form-control {
    padding-right: 2.25rem;
}

.app-combobox-caret {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.25rem;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.app-combobox-open .app-combobox-caret .bi {
    transform: rotate(180deg);
}

/* ABSOLUTE, so opening the panel does not reflow the form under it - the
   same reason as .app-multiselect-panel. In the modal the fields below would
   otherwise jump by the height of the list. */
.app-combobox-panel {
    position: absolute;
    z-index: 1060;
    left: 0;
    right: 0;
    top: calc(100% + 0.25rem);
    margin: 0;
    max-height: 16rem;
    overflow-y: auto;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--bs-box-shadow);
}

.app-combobox-option,
.app-combobox-none {
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    word-break: break-all;
}

.app-combobox-none {
    cursor: default;
    font-size: 0.875rem;
}

.app-combobox-option:hover,
.app-combobox-option.active {
    background: var(--bs-primary);
    color: var(--bs-white);
}