.x-check {
  --x-check-outline-color: var(--color-accent);
  --x-check-icon-color: var(--color-accent-foreground);

  font-weight: var(--x-check-font-weight);
  font-size: var(--x-check-font-size);
  line-height: var(--x-check-line-height);
  letter-spacing: var(--x-check-letter-spacing);
  gap: var(--x-check-gap);
  display: inline-flex;
  text-wrap: pretty;

  &:has([type="radio"]) {
    --x-check-icon-mask: var(--x-check-radio-icon-mask);
    --x-check-border-radius: var(--x-check-radio-border-radius, 50%);
  }

  > :where(input) {
    inline-size: var(--x-check-size);
    block-size: var(--x-check-size);
    border-radius: var(--x-check-border-radius);
    background-color:
      color-mix(
        in var(--x-check-background-color-space, srgb),
        var(--x-check-background-color) var(--x-check-background-color-opacity, 0%),
        var(--x-check-background-color-mix, transparent)
      );
    border:
      var(--x-check-border-width) solid
      color-mix(
        in var(--x-check-border-color-space, srgb),
        var(--x-check-border-color) var(--x-check-border-color-opacity, 20%),
        var(--x-check-border-color-mix, transparent)
      );
    outline:
      var(--x-check-outline-width) solid
      color-mix(
        in var(--x-check-outline-color-space, srgb),
        var(--x-check-outline-color) var(--x-check-outline-color-opacity, 0%),
        var(--x-check-outline-color-mix, transparent)
      );
    outline-offset: var(--x-check-outline-offset);
    display: flex;
    flex-shrink: 0;

    &::before {
      inline-size: var(--x-check-icon-size);
      block-size: var(--x-check-icon-size);
      color: var(--x-check-icon-color);
      mask: var(--x-check-icon-mask);
      transition: inherit;
      content: "";
      background-color: currentcolor;
      opacity: 0%;
      transform: scale(0);
      will-change: transform;
      margin: auto;
    }

    &:where(:required) {
      + *::after {
        color: var(--x-check-required-color, var(--color-error));
        content: " *";
      }
    }
  }
}