// =============================================================================
// FORM FIELD — reusable labelled input / select / textarea
// Extracted from _drawer.scss for standalone reuse in drawers, modals, pages.
// =============================================================================

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field__label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: var(--lh-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 2px;
}

.form-field__required {
  color: var(--color-brand);
}

.form-field__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  box-shadow: 0 1px 1px rgba(10, 13, 18, 0.05);
  appearance: none;
  text-transform: uppercase;

  &::placeholder {
    color: var(--color-text-muted);
    text-transform: uppercase;
  }

  &:focus {
    outline: none;
    border-color: var(--color-gold);
  }
}

.form-field__select-wrap {
  position: relative;
}

.form-field__chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  width: 16px;
  height: 16px;
}

.form-field__input--select {
  color: var(--color-text-tertiary);
  padding-right: 40px;
}

.form-field__input--textarea {
  height: 180px;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  text-transform: none;
  resize: vertical;

  &::placeholder {
    text-transform: uppercase;
  }
}