.cursor_dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 0.875rem;
  height: 0.875rem;
  margin: 0;
  border-radius: var(--radius-round);
  background-color: var(--color-brand-primary);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition:
    opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color var(--theme-duration) var(--theme-ease);
  will-change: transform;
  mix-blend-mode: normal;
}

html[data-theme="brand"] .cursor_dot {
  background-color: var(--color-brand-background);
}

.cursor_dot.is-active {
  opacity: 0.85;
}

.cursor_dot.is-active.is-hover {
  opacity: 0;
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor_dot {
    display: none;
  }
}