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

label:has(input[type="checkbox"]) {
  cursor: pointer;
  user-select: none;

  display: flex;
  gap: $padding;
  align-items: center;
  justify-content: center;

  font-size: 12px;

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

    cursor: pointer;

    position: relative;

    overflow: hidden;
    display: flex;

    width: $width;
    height: $height;

    font-size: inherit;
    color: inherit;

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

    &::after {
      content: "";

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

      display: block;

      width: $diameter;
      height: $diameter;

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

      transition: all 250ms ease;
    }

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