[data-rmiz-ghost] {
  position: absolute;
  pointer-events: none;
}

[data-rmiz-btn-zoom],
[data-rmiz-btn-unzoom] {
  @apply x:bg-black/70 x:text-white x:dark:bg-white/70 x:dark:text-black x:rounded-full x:size-10;
  outline-offset: 2px;
  padding: 9px;
  touch-action: manipulation;
  appearance: none;
}

[data-rmiz-btn-zoom] {
  position: absolute;
  inset: 10px 10px auto auto;
  cursor: zoom-in;

  &:not(:focus):not(:active) {
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    pointer-events: none;
    white-space: nowrap;
    width: 1px;
  }
}

[data-rmiz-btn-unzoom] {
  position: absolute;
  inset: 20px 20px auto auto;
  cursor: zoom-out;
  z-index: 1;
}

[data-rmiz-content='found'] {
  img,
  svg,
  [role='img'],
  [data-zoom] {
    cursor: zoom-in;
  }
}

[data-rmiz-modal]::backdrop {
  display: none;
}

[data-rmiz-modal][open] {
  position: fixed;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

[data-rmiz-modal-overlay] {
  position: absolute;
  inset: 0;
  transition: opacity 0.3s;
  background: rgba(var(--nextra-bg), 0.8);
}

[data-rmiz-modal-overlay='hidden'] {
  opacity: 0%;
}

[data-rmiz-modal-overlay='visible'] {
  opacity: 100%;
}

[data-rmiz-modal-content] {
  position: relative;
  width: 100%;
  height: 100%;
}

[data-rmiz-modal-img] {
  position: absolute;
  cursor: zoom-out;
  image-rendering: high-quality;
  transform-origin: top left;
  transition: transform 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  [data-rmiz-modal-overlay],
  [data-rmiz-modal-img] {
    transition-duration: 0.01ms;
  }
}