html:not(.custom-cursor-ready),
html:not(.custom-cursor-ready) * {
  cursor: auto !important;
}

html:not(.custom-cursor-ready) a,
html:not(.custom-cursor-ready) button,
html:not(.custom-cursor-ready) [role="button"] {
  cursor: pointer !important;
}

html:not(.custom-cursor-ready) input,
html:not(.custom-cursor-ready) textarea,
html:not(.custom-cursor-ready) [contenteditable="true"] {
  cursor: text !important;
}

html.custom-cursor-ready,
html.custom-cursor-ready * {
  cursor: none !important;
}

.cursor {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 10px !important;
  height: 10px !important;
  border: 0 !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  display: block;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.52) !important;
  opacity: 0 !important;
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%);
  transition: width 160ms ease, height 160ms ease, background-color 160ms ease,
    box-shadow 160ms ease, opacity 120ms ease !important;
  will-change: transform, width, height, opacity;
}

.cursor.hover {
  width: 18px !important;
  height: 18px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 0 14px 3px rgba(255, 255, 255, 0.62) !important;
}

html.custom-cursor-ready .cursor.is-visible {
  opacity: 1 !important;
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none !important;
  }
}