<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.checkbox {
  display: inline-block;
  position: relative;
}

.arrow {
  width: 10px;
  height: 10px;
  fill: var(--white);
  transition: transform 200ms ease;
  transform: rotate(-90deg);

  svg {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.real-checkbox {
  top: 0;
  position: absolute;
  opacity: 0;
  pointer-events: none;

  &amp;:checked + .arrow {
    transform: none;
  }
}
</pre></body></html>