/* Shared presentation for single-select and multi-select dropdowns. */
.gs-dropdown {
    position: relative;
    min-width: 0;
}

.gs-dropdown--open {
    z-index: var(--gs-z-dropdown);
}

.gs-dropdown__label {
    color: var(--gs-text-color);
    font-weight: var(--gs-font-weight-bold);
    text-transform: uppercase;
}

.gs-dropdown__trigger {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gs-space-3);
    width: 100%;
    border-color: var(--gs-border-color);
    text-align: start;
    cursor: pointer;
}

.gs-dropdown__summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-dropdown__arrow {
    flex-shrink: 0;
    width: var(--gs-icon-size-small);
    height: var(--gs-icon-size-small);
    fill: var(--gs-muted-text-color);
}

.gs-dropdown__dismiss {
    position: fixed;
    inset: 0;
    z-index: -1;
}

.gs-dropdown__panel {
    position: absolute;
    top: calc(100% + var(--gs-space-1));
    inset-inline: 0;
    max-height: var(--gs-dropdown-max-height);
    padding-block: var(--gs-space-2);
    overflow-y: auto;
    border: var(--gs-border-width) solid var(--gs-focus-ring-color);
    border-radius: var(--gs-card-radius);
    background: var(--gs-page-bg);
    box-shadow: var(--gs-field-focus-shadow);
}

.gs-dropdown__option {
    display: flex;
    align-items: center;
    gap: var(--gs-space-2);
    min-height: var(--gs-touch-target);
    padding: var(--gs-space-3) var(--gs-space-5);
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.gs-dropdown__option:hover,
.gs-dropdown__option:focus-within,
.gs-dropdown__option--selected {
    background: var(--gs-dropdown-option-hover-bg);
}

.gs-dropdown__option--disabled,
.gs-dropdown__option:disabled {
    color: var(--gs-muted-text-color);
    cursor: not-allowed;
}

.gs-dropdown__empty {
    margin: 0;
    padding: var(--gs-space-3) var(--gs-space-5);
    color: var(--gs-muted-text-color);
}