:root {
  --cursor-big-size: 36px;
  --cursor-small-size: 10px;
  --cursor-big-fill: #ffffff;
  --cursor-small-fill: #000000;
}

html[data-theme="light"] {
  --cursor-big-fill: #000000;
  --cursor-small-fill: #ffffff;
}

body.cursor-enhanced {
  cursor: none;
}

body.cursor-enhanced a,
body.cursor-enhanced button,
body.cursor-enhanced [role="button"] {
  cursor: none;
}

body.cursor-enhanced input,
body.cursor-enhanced textarea,
body.cursor-enhanced select {
  cursor: text;
}

.cursor-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1400;
}

.cursor-layer__ball {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: difference;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  pointer-events: none;
}

.cursor-layer__ball--big {
  width: var(--cursor-big-size);
  height: var(--cursor-big-size);
}

.cursor-layer__ball--small {
  width: var(--cursor-small-size);
  height: var(--cursor-small-size);
  mix-blend-mode: normal;
}

.cursor-layer__ball svg {
  display: block;
  width: 100%;
  height: 100%;
}

.cursor-layer__ball circle {
  fill: var(--cursor-big-fill);
}

.cursor-layer__ball--small circle {
  fill: var(--cursor-small-fill);
  stroke: var(--cursor-big-fill);
  stroke-width: 1.25;
}

.cursor-layer__ball--hidden {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.cursor-enhanced {
    cursor: auto;
  }

  .cursor-layer {
    display: none;
  }
}

@media (pointer: coarse) {
  body.cursor-enhanced {
    cursor: auto;
  }

  .cursor-layer {
    display: none;
  }
}