/*
 * Corza select atom. Reuses .c-input visuals and adds a caret.
 *
 * The native <select> is wrapped in `.c-select` (a relatively-positioned
 * span) so we can absolutely-position the caret SVG over it. The select
 * itself gets `.c-input` for the border/padding/state-matrix and
 * `appearance: none` to hide the native UA caret.
 */

.c-select {
  position: relative;
  display: block;
}

.c-select .c-input {
  /* Room for the caret on the right. */
  padding-right: 32px;
  cursor: pointer;
}

.c-select .c-input:disabled {
  cursor: not-allowed;
}

.c-select__caret {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  transform: translateY(-50%);
  color: var(--corza-mid);
}

.c-select .c-input:focus + .c-select__caret {
  color: var(--corza-teal-soft);
}

.c-select .c-input:disabled + .c-select__caret {
  color: var(--corza-border);
}

.c-select .c-input--error + .c-select__caret {
  color: var(--corza-error);
}

/* Bare variant — caret aligns to the underline. */
.c-select .c-input--bare {
  padding-right: 24px;
}

.c-select .c-input--bare + .c-select__caret {
  right: 0;
}