form, .form-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--length-gap-group);
  max-width: var(--length-form-width);

  h1 { margin-block-end: var(--length-gap-group); }
  p { text-align: center; }

  label {
    display: block;
    margin-block-end: var(--length-gap-element);
  }

  input {
    display: block;
    min-width: var(--length-element-width);
    padding: var(--length-gap-element);
    outline: none;
    background-color: var(--theme-color-neutral);
    color: var(--theme-color-neutral-content);
    border-radius: var(--length-radius-element);
    border: var(--length-edge-element) solid var(--theme-color-neutral-outline);

    &::placeholder { color: var(--theme-color-neutral-content-hint); }
    &:focus { border-color: var(--theme-color-neutral-highlight-outline); }

    &:user-invalid, .input-field:has(.errors li) & {
      background-color: var(--theme-color-neutral-error);
      color: var(--theme-color-neutral-error-content);
      border-color: var(--theme-color-neutral-error-outline);

      &:focus {
        background-color: var(--theme-color-neutral-error-highlight);
        color: var(--theme-color-neutral-error-highlight-content);
        border-color: var(--theme-color-neutral-error-highlight-outline);
      }
    }

    &[disabled], &[readonly] {
      background-color: var(--theme-color-neutral-disabled);
      color: var(--theme-color-neutral-disabled-content);
      border-color: var(--theme-color-neutral-disabled-outline);
    }
  }

  input, button, .button { width: 100%; }

  ::file-selector-button { margin-inline-end: var(--length-gap-subelement); }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: var(--length-text-indent);
  }

  .errors {
    display: block;
    text-align: start;
    margin-block-start: var(--length-gap-subelement);
    color: var(--theme-color-danger);
    &:not(:has(li)) { display: none; }

    &.nonfield {
      margin-block-end: var(--length-gap-group);
      text-align: center;
    }
  }

  .password-input {
    position: relative;

    input { padding-inline-end: calc(var(--length-button-icon) + 2 * var(--length-gap-group)); }

    .icon {
      position: absolute;
      top: 50%;
      right: var(--length-gap-element);
      transform: translateY(-50%);
    }
  }

  .input-field .helptext {
    margin-block-start: var(--length-gap-subelement);
    a { padding-block: var(--length-gap-element); }
  }

  .actions {
    display: flex;
    flex-direction: column;
    gap: var(--length-gap-element);
    margin-block-start: var(--length-gap-group);
    p + & { margin-block-start: 0; }
  }
}