/* Field: a label, its control, and the words around it.

   <div class="field">
     <label class="field__label" for="…">Name <span class="field__required">*</span></label>
     <input class="control" id="…">
     <p class="field__hint">…</p>
   </div>

   .control styles inputs, selects and textareas alike. Its text stays at
   --step-0 (16px or more): any smaller and iOS Safari zooms in on focus. */
.field {
  display: grid;
  gap: var(--space-2xs);
}

.field__label {
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
}

.field__required {
  color: var(--color-red);
}

.field__hint {
  color: var(--color-muted);
  font-size: var(--step--1);
}

.field__error {
  color: var(--color-red);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
}

.control {
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-surface-3);
  border-radius: var(--radius-s);
  color: var(--color-text);
  font: inherit;
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  padding: var(--space-2xs) var(--space-xs);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
  width: 100%;

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

  &:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    outline: none;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &[aria-invalid="true"] {
    border-color: var(--color-red);
  }
}

select.control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'%3E%3C/path%3E%3C/svg%3E");
  background-position: right var(--space-xs) center;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-inline-end: var(--space-xl);
}

/* A control for a short value: a quantity, a postal code */
.control[data-width="short"] {
  inline-size: 7rem;
}

textarea.control {
  min-block-size: 6rem;
  resize: vertical;
}

/* Switch: a checkbox drawn as a toggle, its label beside it */
.switch {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: var(--step--1);
  gap: var(--space-xs);

  input[type="checkbox"] {
    appearance: none;
    background: var(--color-surface-3);
    block-size: 1.375rem;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    flex-shrink: 0;
    inline-size: 2.5rem;
    position: relative;
    transition: background-color var(--duration-base) var(--ease-out);

    &::after {
      background: var(--color-muted);
      block-size: 1rem;
      border-radius: 50%;
      content: "";
      inline-size: 1rem;
      inset-block-start: 0.1875rem;
      inset-inline-start: 0.1875rem;
      position: absolute;
      transition:
        translate var(--duration-base) var(--ease-spring),
        background-color var(--duration-base) var(--ease-out);
    }

    &:checked {
      background: var(--color-accent-fill);
    }

    &:checked::after {
      background: var(--color-on-accent);
      translate: 1.125rem 0;
    }
  }
}