.oo-crosshair {
  --oo-crosshair-color: #35b957;
  --oo-crosshair-field: 24px;
  --oo-crosshair-arm: 6px;
  --oo-crosshair-stroke: 2.5px;
  --oo-crosshair-base-gap: 2.5px;
  --oo-crosshair-gap: var(--oo-crosshair-base-gap);
  --oo-crosshair-interaction-gap: 1.5px;
  --oo-crosshair-dot: 3px;
  --oo-crosshair-outline: 0.75px;

  position: relative;
  display: block;
  inline-size: var(--oo-crosshair-field);
  block-size: var(--oo-crosshair-field);
  flex: none;
}

.oo-custom-pointer {
  --oo-crosshair-layer: 30;

  position: fixed;
  z-index: var(--oo-crosshair-layer);
  inset-block-start: 0;
  inset-inline-start: 0;
  contain: strict;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
}

.oo-custom-pointer[data-pointer-state="interactive"] {
  --oo-crosshair-gap: var(--oo-crosshair-interaction-gap);
}

.oo-crosshair__arm {
  position: absolute;
  background: var(--oo-crosshair-color);
  box-shadow: 0 0 0 var(--oo-crosshair-outline) rgb(10 13 12 / 78%);
}

.oo-crosshair[data-crosshair-shape="continuous-plus"][data-crosshair-color="white"] {
  filter: drop-shadow(0 0 var(--oo-crosshair-outline) rgb(10 13 12 / 78%));
}

.oo-crosshair[data-crosshair-shape="continuous-plus"][data-crosshair-color="white"] .oo-crosshair__arm {
  box-shadow: none;
}

.oo-crosshair__center-dot {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: none;
  inline-size: var(--oo-crosshair-dot);
  block-size: var(--oo-crosshair-dot);
  border-radius: 50%;
  background: var(--oo-crosshair-color);
  box-shadow: 0 0 0 var(--oo-crosshair-outline) rgb(10 13 12 / 78%);
  transform: translate(-50%, -50%);
}

.oo-crosshair[data-crosshair-shape="filled-dot"] .oo-crosshair__arm {
  display: none;
}

.oo-crosshair[data-crosshair-shape="filled-dot"] .oo-crosshair__center-dot,
.oo-crosshair[data-crosshair-shape="heavy-dot-cross"] .oo-crosshair__center-dot {
  display: block;
}

.oo-crosshair__arm--top,
.oo-crosshair__arm--bottom {
  inset-inline-start: calc(50% - var(--oo-crosshair-stroke) / 2);
  inline-size: var(--oo-crosshair-stroke);
  block-size: var(--oo-crosshair-arm);
}

.oo-crosshair__arm--top {
  inset-block-end: calc(50% + var(--oo-crosshair-gap));
}

.oo-crosshair__arm--bottom {
  inset-block-start: calc(50% + var(--oo-crosshair-gap));
}

.oo-crosshair__arm--left,
.oo-crosshair__arm--right {
  inset-block-start: calc(50% - var(--oo-crosshair-stroke) / 2);
  inline-size: var(--oo-crosshair-arm);
  block-size: var(--oo-crosshair-stroke);
}

.oo-crosshair__arm--left {
  inset-inline-end: calc(50% + var(--oo-crosshair-gap));
}

.oo-crosshair__arm--right {
  inset-inline-start: calc(50% + var(--oo-crosshair-gap));
}

@media (any-pointer: fine) and (any-hover: hover) {
  html[data-custom-pointer-active],
  html[data-custom-pointer-active] body,
  html[data-custom-pointer-active] body * {
    cursor: none !important;
  }

  html[data-custom-pointer-active] :is(
    input,
    textarea,
    select,
    [contenteditable]:not([contenteditable="false"]),
    [data-native-cursor],
    [data-native-cursor] *
  ) {
    cursor: auto !important;
  }

  .oo-custom-pointer[data-visible="true"] {
    opacity: 0.96;
    visibility: visible;
  }
}