<p>
  <label class="base-checkbox">
    <input type="checkbox" />
    <span class="icon" aria-hidden="true"></span>
    これらの要素は
  </label>
</p>
<p>
  <label class="base-checkbox">
    <input type="checkbox" name="pokemon" value="ヒトカゲ">
    <span class="icon" aria-hidden="true"></span>
    フォーカスが当たり
  </label>
</p>
<p>
  <label class="base-checkbox">
    <input type="checkbox" name="pokemon" value="ゼニガメ">
    <span class="icon" aria-hidden="true"></span>
    フォーカスも可視化されます
  </label>
</p>

.base-checkbox {
  --duration: 0.3s;
  --easing: cubic-bezier(0.075, 0.82, 0.165, 1);
  --default-color: #999;
  --active-color: #779a75;

  display: inline grid;
  grid-template-columns: auto 1fr;
  gap: 1ex;
  align-items: center;
  cursor: pointer;

  &:has(:focus-visible) {
    outline: auto oklch(60% 0.4 240deg);
    outline-offset: 4px;
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  @media (any-hover: hover) {
    &:hover {
      text-decoration: underline;
      text-underline-offset: 0.25em;
    }
  }
}

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.icon {
  position: relative;
  display: inline flow-root;
  inline-size: 1lh;
  aspect-ratio: 1;
  color: var(--default-color);
  transition: color var(--duration);

  &:where(:has(:checked) > *) {
    color: var(--active-color);
  }

  &::before,
  &::after {
    position: absolute;
    content: "";
    transition-duration: var(--duration);
    transition-timig-function: var(--easing);
  }

  &::before {
    inset: 0;
    border: 2px solid;
    transition-property: opacity, rotate, scale;
  }

  &:where(:has(:checked) > *)::before {
    pointer-events: none;
    opacity: 0;
    rotate: 45deg;
    scale: 2;
  }

  &::after {
    inset-block-start: 0.375em;
    inset-inline-start: 0.25em;
    inline-size: 1em;
    block-size: 0.5em;
    color: transparent;
    border-block-end: 2px solid;
    border-inline-start: 2px solid;
    opacity: 0;
    transition-property: color, opacity, rotate;
    rotate: -225deg;
  }

  &:where(:has(:checked) > *)::after {
    color: var(--active-color);
    opacity: 1;
    rotate: -45deg;
  }
}

@layer defaults {
  :root {
    --color-white: #fcfcfc;
    --color-black: #353535;
    --font-sans: "Helvetica Neue", arial, "Hiragino Kaku Gothic ProN",
      "Hiragino Sans", "BIZ UDPGothic", meiryo, sans-serif;
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
    margin: 0;
  }

  body {
    padding: max(5vi, 20px);
    font-family: var(--font-sans);
    line-height: 1.5;
    color: var(--color-black);
    background-color: var(--color-white);
  }

  p + p {
    margin-block-start: 1em;
  }
}