#manta-cc {
  display: none;
}

@media (pointer: fine) {
  #manta-cc {
    display: block;
    position: fixed;
    /* Fallback for browsers without popovers; the script puts the cursor in the top layer, above any z-index. */
    z-index: 2147483647;
    pointer-events: none;
    width: var(--manta-cc-size);
    height: var(--manta-cc-size);
    translate: -50% -50%;
    transition:
      width var(--manta-cc-time),
      height var(--manta-cc-time),
      border-radius var(--manta-cc-time);
  }

  /* Undo the browser's popover styles. */
  #manta-cc[popover] {
    inset: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    overflow: visible;
  }

  /* Hidden until the script has positioned it; until then it would sit in the top left corner. */
  #manta-cc:not(.manta-cc--ready) {
    visibility: hidden;
  }

  #manta-cc::before {
    content: '';
    position: absolute;
    inset: 0;
    transform-origin: center;
    rotate: var(--manta-cc-rotate);
    border-style: solid;
    -webkit-mask:
      linear-gradient(#000 0 0) padding-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    border-width: var(--manta-cc-border-width);
    border-radius: var(--manta-cc-radius);
    border-color: var(--manta-cc-border-color);
    backdrop-filter: var(--manta-cc-filter);
    -webkit-backdrop-filter: var(--manta-cc-filter);
    transition:
      rotate var(--manta-cc-time),
      border-width var(--manta-cc-time),
      border-radius var(--manta-cc-time),
      border-color var(--manta-cc-time),
      backdrop-filter var(--manta-cc-time),
      -webkit-backdrop-filter var(--manta-cc-time);
  }

  #manta-cc.manta-cc--hover:not(.manta-cc--wrap) {
    width: var(--manta-cc-hover-size);
    height: var(--manta-cc-hover-size);
  }

  #manta-cc.manta-cc--hover::before {
    border-radius: var(--manta-cc-hover-radius);
    rotate: var(--manta-cc-hover-rotate);
    border-width: var(--manta-cc-hover-border-width);
    border-color: var(--manta-cc-hover-border-color);
    backdrop-filter: var(--manta-cc-hover-filter);
    -webkit-backdrop-filter: var(--manta-cc-hover-filter);
  }

  #manta-cc.manta-cc--wrap {
    aspect-ratio: auto;
    transition:
      left var(--manta-cc-wrap-duration) cubic-bezier(0.25, 0.25, 0.42, 1),
      top var(--manta-cc-wrap-duration) cubic-bezier(0.25, 0.25, 0.42, 1),
      width var(--manta-cc-wrap-duration) cubic-bezier(0.25, 0.25, 0.42, 1),
      height var(--manta-cc-wrap-duration) cubic-bezier(0.25, 0.25, 0.42, 1),
      border-radius var(--manta-cc-wrap-duration) cubic-bezier(0.25, 0.25, 0.42, 1);
  }

  #manta-cc.manta-cc--wrap::before {
    rotate: 0deg;
    border-radius: var(--manta-cc-wrap-radius, 0px);
    transition-duration: var(--manta-cc-wrap-duration);
    transition-timing-function: cubic-bezier(0.25, 0.25, 0.42, 1);
  }
}

/* Windows high contrast replaces the cursor's colors and filters, which can make it invisible: keep the
   system cursor instead (the liquid only hides it with forced-colors: none). */
@media (forced-colors: active) {
  #manta-cc {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #manta-cc,
  #manta-cc::before {
    transition: none !important;
  }
}

@media print {
  #manta-cc {
    display: none !important;
  }
}