@layer components {
  /* Base
  /* -------------------------------------------------------------------------- */

  .form {
    max-inline-size: var(--form-width, 32rem);
  }

  /* Elements
  /* -------------------------------------------------------------------------- */

  .form__field {
    margin-block-end: var(--block-space);
  }

  .form__row {
    display: grid;
    gap: var(--inline-space-double);

    @media (min-width: 640px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .form__label {
    color: var(--color-ink);
    display: block;
    font-size: var(--text-small);
    font-weight: 500;
    margin-block-end: var(--block-space-half);
  }

  .form__error {
    color: var(--color-negative);
    font-size: var(--text-small);
    margin-block-start: var(--block-space-half);
  }

  .form__actions {
    display: flex;
    gap: var(--inline-space);
    margin-block-start: var(--block-space-double);
  }

  /* Variants
  /* -------------------------------------------------------------------------- */

  .form--wide {
    --form-width: 44rem;
  }

  .form__field--error {
    .input { --input-border-color: var(--color-negative); }
  }

  .form__field--checkbox {
    align-items: center;
    display: flex;
    gap: var(--inline-space-half);

    .form__label { margin-block-end: 0; }
  }
}