/* Input
   A labelled text field with optional hint and error text.
   Sizes are set with data-size on the input. Mark an invalid field with
   aria-invalid="true". All colour, radius and type come from tokens.css. */

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

.dp-label {
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-semibold);
  color: var(--dp-navy);
}

.dp-label[data-optional]::after {
  content: " (optional)";
  font-weight: var(--dp-weight-regular);
  color: var(--dp-text-subtle);
}

.dp-input {
  width: 100%;
  font-family: var(--dp-font-sans);
  font-size: var(--dp-text-base);
  color: var(--dp-navy);
  background: var(--dp-white);
  border: 1px solid var(--dp-border-neutral);
  border-radius: var(--dp-radius-xs);
  padding: var(--dp-space-2) var(--dp-space-3);
  height: 2.5rem;
  transition: border-color var(--dp-transition), box-shadow var(--dp-transition);
}

.dp-input::placeholder {
  color: var(--dp-text-subtle);
}

.dp-input:hover {
  border-color: var(--dp-blue-400);
}

.dp-input:focus {
  outline: none;
  border-color: var(--dp-primary-bg);
  box-shadow: var(--dp-shadow-focus);
}

.dp-input:disabled {
  background: var(--dp-neutral-200);
  color: var(--dp-text-subtle);
  cursor: not-allowed;
}

.dp-input[aria-invalid="true"] {
  border-color: var(--dp-danger);
}

.dp-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

/* ---- Sizes ----------------------------------------------------------- */
.dp-input[data-size="sm"] {
  height: 2.125rem;
  font-size: var(--dp-text-sm);
}

.dp-input[data-size="lg"] {
  height: 3rem;
  font-size: var(--dp-text-lg);
}

/* ---- Hint and error text -------------------------------------------- */
.dp-hint {
  font-size: var(--dp-text-sm);
  color: var(--dp-text-subtle);
}

.dp-error {
  font-size: var(--dp-text-sm);
  color: var(--dp-danger);
}

/* ---- Input with a leading icon (e.g. search) ------------------------ */
.dp-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.dp-input-group .dp-input-icon {
  position: absolute;
  left: var(--dp-space-3);
  width: 1.15rem;
  height: 1.15rem;
  color: var(--dp-text-subtle);
  pointer-events: none;
}

.dp-input-group .dp-input {
  padding-left: calc(var(--dp-space-3) * 2 + 1.15rem);
}