/*
 * Roca Professionals, the full-screen view of images (wave 9.1b, public/assets/js/viewer.js): a dark layer, the picture whole,
 * the counter on top, "back", "forward" and "close" of 44 px. The cabinet and the pages of the jury (wave 9.4b) use it; only
 * tokens, the icons are masks of the tokens, so the file stands on its own next to rp-tokens.css.
 */

html.rp-viewer-open {
  overflow: hidden;
}

.rp-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--rp-surface-inverse);
  color: var(--rp-text-inverse);
  /* A swipe sideways reaches the script; the page under the layer does not move. */
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.rp-viewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rp-sp-3);
  padding: calc(var(--rp-sp-2) + var(--rp-safe-top)) var(--rp-sp-4) var(--rp-sp-2);
}

.rp-viewer__count {
  font-size: var(--rp-fs-small);
  font-variant-numeric: tabular-nums;
}

/* "Open the original": a text link in the bar, beside the counter, as tall as a button. */
.rp-viewer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--rp-tap);
  margin-inline-start: auto;
  color: var(--rp-text-inverse);
  font-size: var(--rp-fs-small);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rp-viewer__link[hidden] {
  display: none;
}

.rp-viewer__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--rp-bw-strong) var(--rp-surface-inverse), 0 0 0 calc(var(--rp-bw-strong) * 2) var(--rp-text-inverse);
}

.rp-viewer__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 var(--rp-sp-2);
}

.rp-viewer__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* No picture yet: nothing is drawn, not even the text of alt. */
.rp-viewer__img:not([src]) {
  visibility: hidden;
}

.rp-viewer__note {
  position: absolute;
  margin: 0;
  color: var(--rp-text-inverse-secondary);
  font-size: var(--rp-fs-small);
}

.rp-viewer__foot {
  display: grid;
  grid-template-columns: var(--rp-tap) minmax(0, 1fr) var(--rp-tap);
  align-items: center;
  gap: var(--rp-sp-2);
  padding: var(--rp-sp-2) var(--rp-sp-4) calc(var(--rp-sp-2) + var(--rp-safe-bottom));
}

.rp-viewer__caption {
  margin: 0;
  color: var(--rp-text-inverse-secondary);
  font-size: var(--rp-fs-small);
  text-align: center;
}

.rp-viewer__btn {
  display: grid;
  place-items: center;
  width: var(--rp-tap);
  height: var(--rp-tap);
  margin: 0;
  padding: 0;
  border: var(--rp-bw) solid var(--rp-line-inverse);
  background: transparent;
  color: var(--rp-text-inverse);
  cursor: pointer;
}

@media (hover: hover) {
  .rp-viewer__btn:hover:not(:disabled) {
    background: var(--rp-surface-inverse-raised);
  }
}

.rp-viewer__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--rp-bw-strong) var(--rp-surface-inverse), 0 0 0 calc(var(--rp-bw-strong) * 2) var(--rp-text-inverse);
}

.rp-viewer__btn:disabled {
  color: var(--rp-text-tertiary);
  cursor: default;
}

.rp-viewer__btn::before {
  content: "";
  width: var(--rp-icon);
  height: var(--rp-icon);
  background: currentColor;
}

.rp-viewer__btn--close::before {
  -webkit-mask: var(--rp-ic-x);
  mask: var(--rp-ic-x);
}

.rp-viewer__btn--prev::before {
  -webkit-mask: var(--rp-ic-back);
  mask: var(--rp-ic-back);
}

.rp-viewer__btn--next::before {
  -webkit-mask: var(--rp-ic-arrow);
  mask: var(--rp-ic-arrow);
}