@layer components {
  .form {
    display: flex;
    flex-flow: column nowrap;

    & :not(button)[disabled],
    & :not(button).-disabled {
      pointer-events: none;
      background-color: var(--clr-neutral-50);
      color: var(--clr-neutral-400)
    }

    & .form-body {
      display: flex;
      flex-flow: column nowrap;
      gap: 1rem;

      &.-flexible {
        flex-flow: row wrap;

        & > .form-row {
          flex: 1 1 13rem;
        }
      }
    }

    & .form-field {
      --gap: 0.875rem;

      display: flex;
      flex-flow: column nowrap;
      gap: var(--gap);
    }

    & .form-row {
      --gap: 0.125rem;
      --min-inline-size: 13rem;
      --color: var(--clr-brand-600);

      flex: 1 1 auto;
      display: flex;
      flex-flow: column nowrap;
      gap: var(--gap);
      min-inline-size: var(--min-inline-size);
      color: var(--color);


      &:has(.form-choice-list) {
        gap: 0.25rem;
      }

      & > label {
        margin-inline-start: 0.375rem;
        font-size: 0.875rem;
        font-variation-settings: "wght" 450;
        line-height: 1.4375;

        & > small {
          opacity: 0.8;
        }
      }
    }

    & .form-widget {
      --inline-size: 100%;
      --block-size: 3rem;
      --padding: 0 0.875rem;
      --gap: 0.625rem;
      --background-color: var(--clr-neutral-200);
      --border-width: 0.125rem;
      --border-color: var(--clr-neutral-200);
      --border-color-on-focus: color-mix(in oklab, var(--clr-warning-600), transparent 55%);
      --border-radius: 0.5rem;
      --box-shadow: none;
      --color: var(--clr-text);
      --font-size: 0.9375rem;
      --icon-color: var(--clr-accent-300);
      --placeholder-color: var(--clr-accent-400);
      --placeholder-opacity: 1;

      display: flex;
      flex-flow: row nowrap;
      gap: var(--gap);
      align-items: center;
      inline-size: var(--inline-size);
      block-size: var(--block-size);
      padding: var(--padding);
      background-color: var(--background-color);
      border: var(--border-width) solid var(--border-color);
      border-radius: var(--border-radius);
      box-shadow: var(--box-shadow);
      color: var(--color);
      font-size: var(--font-size);
      transition: border-color 0.25s ease-in-out;

      & ::placeholder {

        color: var(--placeholder-color);
        opacity: var(--placeholder-opacity);
        font-size: 0.9375rem;
        font-variation-settings: "wght" 400;
      }

      &:is(:focus, :focus-within) {
        border-color: var(--border-color-on-focus);
      }

      & > i {
        color: var(--icon-color);
      }

      &:has(textarea) {
        block-size: auto;
      }
    }

    & .form-control {
      --padding: 0.4375rem 0;
      --font-weight: 462;

      inline-size: 100%;
      block-size: 100%;
      padding: var(--padding);
      background: transparent;
      border: none;
      box-shadow: none;
      /* Hack: https://noahliebman.net/2024/08/beating-important-user-agent-styles/ */
      transition: color calc(infinity * 1s) step-end, background-color calc(infinity * 1s) step-end;

      &:placeholder-shown {
        font-variation-settings: "wght" var(--font-weight);
      }
    }

    & .form-password-visibility {
      position: relative;

      & button {
        color: var(--clr-brand-500);
        font-size: 0.9375rem;
      }
    }

    & .form-error,
    & .form-help {
      display: inline-flex;
      flex-flow: row nowrap;
      gap: 0.375rem;
      padding-inline-start: 0.375rem;
      font-size: 0.8125rem;
      line-height: 2.625ex;
    }

    & .form-error {
      color: var(--clr-danger-500);
    }

    & .form-help {
      margin-block-start: 0.375rem;
      color: var(--clr-info-500);
    }

    & .form-aside,
    & .form-rest {
      display: none;
    }

    & .form-horizontal-rule {
      --background-color: var(--clr-brand-100);
      --margin-inline: auto;

      background-color: var(--background-color);
      margin-inline: var(--margin-inline);
    }

    & .form-footer {
      --justify-content: flex-start;
      --margin-block-start: 0.875rem;

      display: flex;
      flex-flow: row wrap;
      gap: 0.75rem;
      inline-size: 100%;
      justify-content: var(--justify-content);
      margin-block-start: var(--margin-block-start);

      &.-center {
        --justify-content: center;
      }
    }
  }
}