@utility checkbox-and-radio {
  & {
    --size: 1em;
    --fill-color: none;
    --stroke-color: transparent;
    --fill-checked-color: none;
    --stroke-checked-color: white;
    display: flex;
    align-items: center;
    gap: 0.5em;

    > .group {
      display: flex;
      align-items: start;
      gap: inherit;
    }

    .checkmark-container,
    .radiomark-container {
      @apply stack;
      flex-shrink: 0;
      display: grid;
      place-items: center;

      .input {
        @apply transition-scaffold;
        @apply outline-scaffold;
        appearance: none;
        display: grid;
        place-content: center;
        width: var(--size);
        height: var(--size);
        margin-block: calc((1lh - var(--size)) / 2);
        padding: 0;
        border: var(--border-width, 1px) var(--border-style, solid)
          var(--border-color, black);
        font: inherit;
        background-color: var(--bg-color, transparent);

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

        &:active {
          transform: scale(0.85);
        }

        &[type='checkbox'] {
          border-radius: var(--checkbox-radius, var(--border-radius, 0.25em));
        }

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

    /* Checkbox and SVG */
    svg {
      @apply transition-scaffold;
      pointer-events: none;
      transition-property: transform, opacity;
    }

    .checkmark {
      width: calc(var(--size) - 2px);
      height: calc(var(--size) - 2px);

      path {
        @apply transition-scaffold;
        fill: var(--fill-color);
        stroke: var(--stroke-color);
        stroke-width: var(--stroke-width, 3);
      }
    }

    .radiomark {
      width: calc(var(--size) * 1);
      height: calc(var(--size) * 1);

      circle {
        @apply transition-scaffold;
        fill: var(--stroke-color);
        stroke: var(--stroke-color);
      }
    }

    /* Show the SVG/radio item when the input is checked */
    input:checked {
      & ~ svg {
        opacity: 1;
        transform: scale(1);
      }

      & ~ .checkmark path {
        @apply transition-scaffold;
        fill: var(--fill-checked-color);
        stroke: var(--stroke-checked-color);
      }

      & ~ .radiomark circle {
        @apply transition-scaffold;
        fill: var(--stroke-checked-color);
        stroke: var(--stroke-checked-color);
      }
    }

    /*********************
     * Text Input that is used along with Checkboxes and Radios *
     * Usually for an others field *
     *********************/
    .text-input {
      display: none;
    }

    :where(.group):has(:checked) ~ .text-input {
      display: block;
    }
  }
}

@layer utility {
  .checkbox,
  .radio {
    @apply checkbox-and-radio;
    --transition-duration: 125ms;
    --transition-easing: ease-in;
  }

  /* TODO: Display flex doesn't work on fieldset */
  .fieldset,
  .checkboxes,
  .radios {
    @apply vertical;
    gap: 0.125em;
  }
}