/* Overrides inputs.css in the same layer, so it must sort after it: stylesheets load alphabetically. */
@layer components {
  /* A control: a 20px box with a 2px edge that reads as one, the accent and a bold tick once checked, round for one-of. */
  input.checkbox {
    block-size: 1.25em;
    border: 2px solid var(--color-ink-medium);
    border-radius: var(--radius-sm);
    cursor: pointer;
    flex: none;
    inline-size: 1.25em;
    transform: none;

    &::before {
      block-size: 0.8em;
      clip-path: polygon(10% 42%, 0 62%, 46% 100%, 100% 20%, 82% 2%, 42% 66%);
      inline-size: 0.8em;
    }

    &:checked {
      border-color: var(--color-link);
      color: var(--color-link);
    }

    &[type="radio"] {
      border-radius: 50%;
    }

    &:focus-visible {
      outline: var(--focus-ring-size) solid var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
    }

    @media (any-hover: hover) {
      &:enabled:not(:checked):hover {
        border-color: var(--color-ink-dark);
      }
    }
  }

  /* A pill that is itself the choice, as buttons.css lays it: the input covers the pill and draws nothing. */
  :not(.paper__options) > .btn > input.checkbox {
    background: none;
    block-size: auto;
    border: 0;
    inline-size: auto;

    &::before {
      content: none;
    }
  }

  /* A .checkbox where there is no input to check: a read-back answer, or a button. */
  .checkbox-mark {
    block-size: 1.25em;
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-sm);
    color: var(--mark, var(--color-link));
    flex: none;
    inline-size: 1.25em;
    padding: 0;
    transform: none;

    &::before {
      block-size: 0.8em;
      clip-path: polygon(10% 42%, 0 62%, 46% 100%, 100% 20%, 82% 2%, 42% 66%);
      inline-size: 0.8em;
    }

    @media (any-hover: hover) {
      &:is(button):enabled:hover {
        background-color: var(--color-ink-lightest);
      }
    }
  }

  .checkbox-mark--round {
    border-radius: 50%;
  }

  .checkbox-mark--checked::before {
    transform: scale(1) rotate(10deg);
  }
}