.ui-select {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ui-select__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-default);
}

.ui-select__required {
  color: var(--state-error);
}

.ui-select__control {
  width: 100%;
  min-height: var(--control-height-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface-panel);
  color: var(--text-strong);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.ui-select__control:hover:not(:disabled) {
  border-color: var(--border-strong);
}

.ui-select__control:focus {
  outline: none;
}

.ui-select__control:focus-visible {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}

.ui-select__control:disabled {
  background-color: var(--surface-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.ui-select--error .ui-select__control {
  border-color: var(--state-error);
}

.ui-select--valid .ui-select__control {
  border-color: var(--state-ok);
}

.ui-select__help,
.ui-select__error {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.ui-select__help {
  color: var(--text-muted);
}

.ui-select__error {
  color: var(--state-error);
}

.ui-select--sm .ui-select__control {
  min-height: var(--control-height-sm);
}

.ui-select--lg .ui-select__control {
  min-height: var(--control-height-lg);
}

.ui-select--block {
  width: 100%;
}