/* Form inputs and inline error display. */

@layer components {
  .input {
    inline-size: 100%;
    min-block-size: var(--component-base);
    padding: var(--input-padding-block) var(--inline-space);
    background: var(--color-canvas);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-normal);

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

    /* The border swap replaces the ring for pointer focus, but keyboard focus
       keeps the global ring (base.css) the outline: none above would suppress. */
    &:focus-visible {
      outline: 0.125rem solid var(--focus-ring-color);
    }

    &.input--error {
      border-color: var(--color-down);

      &:focus {
        border-color: var(--color-down);
      }
    }

    &.input--code {
      text-transform: uppercase;
      letter-spacing: 0.3em;
      text-align: center;
      font-family: var(--font-mono);
    }
  }

  /* Textareas grow with their content where supported; the `rows` attribute is
     the baseline for browsers without field-sizing (autoresize.css covers them). */
  textarea.input {
    @supports (field-sizing: content) {
      field-sizing: content;
      min-block-size: calc(3lh + 2 * var(--input-padding-block));
      max-block-size: calc(12lh + 2 * var(--input-padding-block));
    }
  }

  /* Replace the inconsistent native select arrow with a single chevron. */
  select.input {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 3ch;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345484d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.875rem;
  }

  .form-errors {
    padding: 0.75rem var(--inline-space);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    background: var(--color-mist);
    font-size: var(--text-small);
    color: var(--color-primary-press);

    & ul {
      margin-block-start: 0.375rem;
      padding-inline-start: 1.5ch;
      list-style: disc;
    }
  }

  .form-error {
    font-size: var(--text-x-small);
    color: var(--color-primary-press);
  }
}