form.form {
  display: grid;
  gap: var(--spacer);

  > header,
  > footer {
    display: grid;
    gap: var(--spacer-sm);

    h1,
    p {
      text-align: left;
    }

    h1 {
      font-size: var(--font-xl);
    }
  }
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;

  input + .icon {
    position: absolute;
    right: var(--ui-padding-x);
    width: var(--size-4);
    color: var(--muted);
    z-index: 2;
  }

  input:has(+ .icon) {
    padding-right: calc(var(--ui-padding-x) + var(--spacer-sm));

    &:--highlight + .icon {
      color: var(--gray-z-6);
    }
  }

  input,
  button,
  .button,
  a {
    z-index: 1;

    &:has(+ input),
    &:has(+ button),
    &:has(+ a) {
      border-top-right-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

    + input,
    + button,
    + a {
      margin-left: calc(-1 * var(--border-width));
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }

    &:--highlight {
      z-index: 2;
    }
  }
}

input {
  &[type='checkbox'] {
    height: var(--size-4);
  }
}
label:has(> input[type='checkbox']) {
  display: flex;
  align-items: center;

  > * {
    width: auto;
  }
}