@layer defaults {
  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);
  }

  .form :is(label, legend), .label {
    text-transform: uppercase;
    font-size: var(--label-font-size, inherit);
    font-family: var(--label-font, inherit);
    text-box: var(--text-box-font-header);
  }

  .form fieldset {
    width: 100%;
  }

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

  .form input, .ui-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);
    box-shadow: var(--input-shadow, var(--light-bottom));
    border: var(--input-border,
      var(--input-border-color, var(--border-color))
      var(--input-border-style, var(--border-style))
      var(--input-border-width, var(--border-width))
    );

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

    &[type="submit"] {
      --input-border: none;
      --input-shadow: none;
    }

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

  .ui-input--plain {
    --input-padding: 0;
    --input-background: none;
    --input-border: none;
    --input-shadow: none;
    --input-radius: 0;
    --focus-ring: none;
  }

  .ui-input {
    &.valid, &:has(.valid) {
      --input-border-color: var(--color-positive);
    }

    &.invalid, &:has(.invalid) {
      --input-border-color: var(--color-negative);
    }
  }

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

  .label--embedded {
    --label-font-size: 0.75em;

    display: block;

    margin-top: -0.25lh;
    padding-bottom: 0.5lh;
    text-transform: uppercase;
    color: var(--color-ink-weak);
  }

  .switch {
    --switch-color: var(--color-ink-weak);
    --switch-hover-brightness: 0.9;

    block-size: 1.75em;
    border-radius: 2em;
    display: inline-flex;
    inline-size: 3em;
    position: relative;
  }

  .switch__input {
    block-size: 0;
    inline-size: 0;
    opacity: 0.1;
  }

  .switch__btn {
    background-color: var(--switch-color);
    border-radius: 2em;
    cursor: pointer;
    inset: 0;
    position: absolute;
    transition: 150ms ease;

    &::before {
      background-color: var(--color-ink-inverted);
      block-size: 1.35em;
      border-radius: 50%;
      content: "";
      inline-size: 1.35em;
      inset-block-end: 0.2em;
      inset-inline-start: 0.2em;
      position: absolute;
      transition: 150ms ease;
    }

    @media (any-hover: hover) {
      &:hover {
        background-color: color-mix(in srgb, var(--switch-color) 80%, var(--color-ink));
      }
    }

    .switch__input:checked + & {
      --switch-color: var(--color-link);

      &::before {
        transform: translateX(1.2em);
      }
    }

    .switch__input:disabled + & {
      --switch-color: var(--color-ink-weak);

      cursor: not-allowed;
      opacity: 0.5;
    }
  }
}