/* Custom Cursor */
#cursor-dot,
#cursor-dot-outline,
#cursor-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

#cursor-dot {
  width: 14px;
  height: 14px;
  background-color: white;
}

#cursor-circle {
  width: 50px;
  height: 50px;
  border-width: 3px;
  border-style: solid;
  border-color: var(--color-primary);
}

#cursor-dot-outline {
  width: 13px;
  height: 13px;
  background-color: white;
}

@media (pointer: coarse) {
  #cursor-dot,
  #cursor-dot-outline,
  #cursor-circle {
    display: none;
  }
}