@layer defaults {
  .form {
    .form-group {
      display: grid;
      gap: var(--form-group-gap, 0.5lh);
    }

    .label, label, legend {
      text-transform: uppercase;
      font-size: 1rem;
      font-family: var(--font-header);
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }

    fieldset {
      width: 100%;
    }
  }

  label:has(input[type="checkbox"]) {
    cursor: pointer;
  }

  select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1em;
    padding-right: calc(calc(0.5rem * 2) + 1em);
  }

  input.valid,
  textarea.valid,
  select.valid {
    border-color: var(--color-positive);
  }

  input.invalid,
  textarea.invalid,
  select.invalid {
    border-color: var(--color-negative);
  }

  .form input,
  .ui-input,
  .faux-input {
    padding: var(--input-padding, 0.9em 1.2em);
    background: var(--input-background, var(--color-canvas));
    border-radius: var(--input-radius, var(--radius));
    accent-color: var(--color-link);

    &:not([type="submit"]) {
      border: var(--input-border, var(--border));
      box-shadow: var(--input-shadow, var(--light-bottom));

      /* border-bottom-color: var(--lightsource-strong); */
    }

    &:not([type="checkbox"], [type="radio"], [type="submit"]) {
      width: 100%;
    }

    &[readonly] {
      color: var(--color-ink-weak);
    }
  }
}