/* All selectors are scoped. Override --image-viewer-* on :root for a light treatment. */
.rb-image-viewer {
  --_viewer-bg: var(--image-viewer-background, rgb(13 16 18 / 97%));
  --_viewer-text: var(--image-viewer-color, #fff);
  --_viewer-muted: var(--image-viewer-muted, #c3c7ca);
  --_viewer-line: var(--image-viewer-line, rgb(255 255 255 / 30%));
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 2.5vw, 36px);
  box-sizing: border-box;
  border: 0;
  color: var(--_viewer-text);
  background: var(--_viewer-bg);
  font: 400 14px/1.5 system-ui, sans-serif;
  overflow: hidden;
  overscroll-behavior: contain;
  cursor: zoom-out;
}
.rb-image-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px; }
.rb-image-viewer::backdrop { background: transparent; }
.rb-image-viewer *, .rb-image-viewer *::before, .rb-image-viewer *::after { box-sizing: border-box; }
.rb-image-viewer .rb-image-viewer__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; }
.rb-image-viewer .rb-image-viewer__title { margin: 0; max-width: 82ch; color: var(--_viewer-text); font: inherit; text-transform: none; letter-spacing: normal; }
.rb-image-viewer .rb-image-viewer__close { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; margin: 0; padding: 0; border: 1px solid var(--_viewer-line); border-radius: 50%; color: var(--_viewer-text); background: transparent; cursor: pointer; }
.rb-image-viewer .rb-image-viewer__close:hover { border-color: currentColor; }
.rb-image-viewer .rb-image-viewer__close:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.rb-image-viewer .rb-image-viewer__close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.rb-image-viewer .rb-image-viewer__stage { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); align-items: center; justify-items: center; min-width: 0; min-height: 0; }
.rb-image-viewer .rb-image-viewer__image { grid-area: 1 / 1; display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; border: 0; border-radius: 0; background: transparent; }
.rb-image-viewer .rb-image-viewer__status { grid-area: 1 / 1; z-index: 1; margin: 0; padding: 10px 16px; max-width: 38ch; color: var(--_viewer-text); background: var(--_viewer-bg); text-align: center; font: inherit; }
.rb-image-viewer .rb-image-viewer__status:empty { display: none; }
.rb-image-viewer .rb-image-viewer__hint { margin: 0; color: var(--_viewer-muted); font: 400 12px/1.5 system-ui, sans-serif; text-align: center; letter-spacing: .01em; text-transform: none; }
@media (max-width: 560px) {
  .rb-image-viewer[open] { gap: 12px; }
  .rb-image-viewer .rb-image-viewer__toolbar { gap: 14px; align-items: flex-start; }
  .rb-image-viewer .rb-image-viewer__title { font-size: 12px; }
  .rb-image-viewer .rb-image-viewer__close { flex-basis: 44px; width: 44px; height: 44px; }
  .rb-image-viewer .rb-image-viewer__hint { font-size: 11px; }
}