/* Native sprite pixels and typography are scaled with the rest of the page. */

/* #region Tooltip Box */
.cursor-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: max-content;
  max-width: calc(var(--site-viewport-width) - 8px);
  max-height: calc(var(--site-viewport-height) - 8px);
  padding: 1px 3px 4px;
  font-family: "1980 P03", "Mona", monospace;
  line-height: 7px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #000000;
  filter: drop-shadow(1px 2px 0 rgb(0 0 0 / 0.3));
  isolation: isolate;
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
}

/* #endregion */

/* #region Pixel-Art Surface & Arrow */
.cursor-tooltip::before,
.cursor-tooltip::after {
  content: "";
  position: absolute;
  z-index: -1;
}

.cursor-tooltip::before {
  inset: 0;
  /* A continuous fill avoids border-image seams at fractional cursor positions. */
  background-color: #ffffff;
  clip-path: polygon(0 0, calc(100% - 1px) 0,
      calc(100% - 1px) 1px, 100% 1px,
      100% calc(100% - 1px), calc(100% - 1px) calc(100% - 1px),
      calc(100% - 1px) 100%, 1px 100%,
      1px calc(100% - 1px), 0 calc(100% - 1px));
}

.cursor-tooltip::after {
  top: 0;
  left: -3px;
  width: 6px;
  height: 6px;
  /* Crop the arrow at native 1x scale and overlap the solid box by 3 pixels. */
  background-image: url("../assets/textures/round_rect_with_arrow.png");
  background-size: 16px 16px;
  background-position: 0 -3px;
  background-repeat: no-repeat;
}

/* #endregion */

/* #region Visibility State */
.cursor-tooltip:not(:empty) {
  visibility: visible;
}

/* #endregion */