$padding: 3px;
$border: 2px;
$height: 1.5em;

label:has(input[type="checkbox"]) {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: $padding;
  cursor: pointer;

  font-size: 12px;
  user-select: none;

  input[type="checkbox"] {
    $width: calc($height * (5 / 3));
    $diameter: calc($height - ((2 * $padding) + (2 * $border)));
    $radius: calc($diameter / 2);
    display: flex;

    position: relative;

    cursor: pointer;

    outline: $border solid currentcolor;
    outline-offset: calc(-1 * $border);
    border-radius: calc($height / 2);

    width: $width;
    height: $height;

    overflow: hidden;
    color: inherit;

    font-size: inherit;

    &::after {
      display: block;

      position: absolute;
      top: calc($padding + $border);
      left: calc($padding + $border);

      transition: all 250ms ease;

      outline-color: inherit;
      outline-style: solid;
      outline-width: $radius;
      outline-offset: calc(-1 * $radius);
      border-radius: calc($radius);

      width: $diameter;
      height: $diameter;
      content: "";
    }

    &:checked::after {
      translate: calc($width - 2 * $diameter - $padding / 2) 0;
      outline-width: calc($width - ($height - $border) + $padding);
      outline-offset: calc($padding / 2);
    }
  }

  &:has(span.icon) {
    $line-width: 10%;
    $side: calc(($line-width * 2) / sqrt(2));
    $mid: calc($side / 2);

    > input[type="checkbox"] {
      display: none;
    }

    > span.icon {
      display: block;
      position: relative;

      clip-path: polygon(
        0% $side,
        $mid $mid,
        calc(100% - $mid) calc(100% - $mid),
        calc(100% - $side) 100%,
        0% 100%,
        0% $side,
        $side 0%,
        100% calc(100% - $side),
        calc(100% - $side) 100%,
        calc(100% - $side) 100%,
        100% calc(100% - $side),
        100% calc(100% - $side),
        100% 0%,
        $side 0%
      );

      transition: all 250ms ease;

      width: 1em;
      height: 1em;

      font-size: inherit;

      &::before {
        display: block;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, 0) rotate(45deg);

        transition: all 250ms ease;

        background-color: currentcolor;

        width: calc(100% * sqrt(2));
        height: $line-width;
        content: "";
      }
    }

    &:has(:checked) > span.icon {
      clip-path: polygon(
        0% $side,
        $mid $mid,
        calc(100% - $mid) calc(100% - $mid),
        calc(100% - $side) 100%,
        0% 100%,
        0% $side,
        $side 0%,
        100% calc(100% - $side),
        calc(100% - $side) 100%,
        0% $side,
        $side 0%,
        100% calc(100% - $side),
        100% 0%,
        $side 0%
      );

      &::before {
        transform: translate(-50%, 0) rotate(45deg) translateX(-100%);
      }
    }
  }
}