@layer components.root {
  label:where(.checkbox, .radio) {
    align-items: center;
    color: var(--text-color-1);
    cursor: pointer;
    display: inline-grid;
    gap: 0 var(--size-2);
    grid-auto-columns: auto;
    grid-auto-flow: column;
    inline-size: fit-content;
    line-height: 1.5;
    transform: translateZ(0);
    user-select: none;

    /* Disabled */
    &:has([disabled]) {
      cursor: not-allowed;
      opacity: 0.64;
      user-select: none;

      input {
        cursor: not-allowed;
      }
    }

    /* Required dot */
    &:has([required]:not([type="checkbox"]:checked)) {
      .label:after {
        color: var(--red);
        content: "*";
        inset: 0 -0.25ex auto auto;
        position: absolute;
      }
    }

    /* Label */
    .label {
      grid-column: 2;
      grid-row: 1;
      position: relative;
      padding-inline: 0 1ex;
    }

    /* Supporting text */
    .supporting-text {
      color: var(--text-color-2);
      font-size: var(--font-size-xs);
      grid-column: 2;
      grid-row: 2;
      line-height: 1.5;
      z-index: 1;
    }

    /* Stacked layout */
    &.stack {
      justify-items: center;
      grid-auto-columns: unset;

      .label {
        grid-column: 1/-1;
        grid-row: 2;
        margin-block-start: var(--size-1);
        padding-inline: 1ex;

        /* Required dot */
        &::after {
          inset: 0 -0.25ex auto auto;
        }
      }

      .supporting-text {
        grid-column: 1/-1;
        grid-row: 3;
      }
    }

    /* Input */
    input {
      aspect-ratio: 1;
      block-size: 1.125rem;
      cursor: pointer;
      inline-size: 1.125rem;

      &::before {
        --highlight-size: 175%;
      }
    }

    /* Sizes */
    &.small {
      input {
        block-size: var(--size-3);
        inline-size: var(--size-3);
      }
    }

    &.large {
      input {
        block-size: var(--size-4);
        inline-size: var(--size-4);
      }
    }

    /* Validation */
    &.error {
      input[type="checkbox"] {
        accent-color: var(--color-9);

        & ~ :where(.label, .supporting-text) {
          color: var(--color-9);
        }
      }
    }

    /* Touch devices */
    @media (pointer: coarse) {
      input {
        block-size: var(--size-4);
        inline-size: var(--size-4);
      }
    }
  }
}