/* ═══════════════════════════════════════════════════════════════════════════
   FIGURE ZOOM

   The magnifier on a figure and the modal it opens into.

   The modal's canvas is --ds-plate-bg rather than --ds-surface: what it holds
   is a dimensioned drawing from the standard, and a plate keeps its paper in
   both palettes so its ink stays legible. The chrome around it, the indicator
   and the focus ring, follows the theme like any other control. The dialog
   itself is .ds-modal from design-system.css; only the canvas is here.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-figure-zoom-trigger] {
  cursor: zoom-in;
  position: relative;
}

[data-figure-zoom-trigger]:focus-visible {
  border-radius: var(--ds-radius-xs);
  outline: 3px solid var(--ds-focus-ring);
  outline-offset: 3px;
}

.figure-zoom-indicator {
  align-items: center;
  background: var(--ds-solid-bg);
  border: 1px solid var(--ds-solid-border);
  border-radius: 50%;
  color: var(--ds-solid-fg);
  display: flex;
  font-size: var(--ds-type-xs);
  height: 1.8rem;
  justify-content: center;
  position: absolute;
  right: var(--ds-space-4);
  top: var(--ds-space-4);
  width: 1.8rem;
  z-index: 2;
}

.figure-zoom-modal__canvas {
  align-items: center;
  padding: var(--ds-space-8);
  background: var(--ds-plate-bg);
  color: var(--ds-plate-ink);
  display: flex;
  justify-content: center;
  min-height: min(42rem, calc(100vh - 9rem));
  overflow: auto;
}

.figure-zoom-modal__canvas > svg {
  display: block;
  height: auto !important;
  max-height: calc(100vh - 10rem);
  max-width: 100%;
  width: min(100%, 60rem) !important;
}

@media (max-width: 575.98px) {
  .figure-zoom-modal__canvas {
    min-height: calc(100vh - 7.5rem);
    padding: var(--ds-space-4);
  }

  .figure-zoom-modal__canvas > svg {
    max-height: calc(100vh - 8.5rem);
  }
}