.cell-grid {
  --cell-size: var(--space-48);
  --grid-line-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
  --cell-highlight: color-mix(in srgb, var(--color-accent) 6%, transparent);
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background-image:
    linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
  background-size: var(--cell-size) var(--cell-size);
  background-position: center top;
  pointer-events: none;
}

.cell-grid span {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--cell-size);
  height: var(--cell-size);
  background-color: var(--cell-highlight);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}

.cell-grid span[data-active] {
  opacity: 1;
  transition-duration: var(--duration-fast);
}

.cell-grid--dots {
  --grid-dot-color: color-mix(in srgb, var(--color-on-ink) 20%, transparent);
  --cell-highlight: color-mix(in srgb, var(--color-code-token) 16%, transparent);
  background-image: radial-gradient(circle at 1px 1px, var(--grid-dot-color) 1px, transparent 1.5px); /* check:ignore */
}

.cell-grid--light {
  --grid-dot-color: color-mix(in srgb, var(--color-text) 20%, transparent);
  --cell-highlight: color-mix(in srgb, var(--color-accent) 16%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .cell-grid--dots span {
    display: none;
  }
}