.cx-select-field {
    position: relative;
}

.cx-select {
    position: relative;
    min-width: 0;
}

.cx-select__native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.cx-select__button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cx-space-3);
    text-align: start;
    cursor: pointer;
}

.cx-select__button:disabled {
    cursor: not-allowed;
}

.cx-select__value--placeholder {
    color: var(--cx-color-text-muted);
}

.cx-select__chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-inline-end: 2px;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 120ms ease;
}

.cx-select[aria-expanded="true"] .cx-select__chevron {
    transform: translateY(2px) rotate(225deg);
}

.cx-select__listbox {
    position: absolute;
    z-index: var(--cx-z-dropdown);
    inset-block-start: calc(100% + var(--cx-space-1));
    inset-inline: 0;
    max-height: min(40vh, 20rem);
    padding: var(--cx-space-1);
    overflow-y: auto;
    color: var(--cx-color-text);
    background: var(--cx-color-surface);
    border: 1px solid var(--cx-color-border-strong);
    border-radius: var(--cx-radius-md);
    box-shadow: var(--cx-shadow-md);
}

.cx-select__listbox[hidden] {
    display: none;
}

.cx-select__option {
    display: block;
    width: 100%;
    padding: var(--cx-space-2) var(--cx-space-3);
    color: var(--cx-color-text);
    background: transparent;
    border: 0;
    border-radius: var(--cx-radius-sm);
    font: inherit;
    font-size: var(--cx-font-size-sm);
    text-align: start;
    cursor: pointer;
}

.cx-select__option:hover,
.cx-select__option:focus-visible,
.cx-select__option--active {
    outline: none;
    background: var(--cx-color-surface-muted);
}

.cx-select__option--selected {
    color: var(--cx-color-primary);
    background: var(--cx-color-primary-soft);
    font-weight: var(--cx-font-weight-medium);
}

.cx-field--invalid .cx-select__button {
    border-color: var(--cx-color-danger);
}