/*
 * ponticlaro/gallery: what every gallery style shares on this site. Loaded by
 * ponticlaro-gallery with any gallery, and in the editor.
 */
:root {
  /* The block's "Theme default" background. */
  --ponticlaro-gallery-background: #eee;

  /* Space between a background's edge and the images. */
  --ponticlaro-gallery-padding: 48px;

  /*
   * The zoom viewer's arrows: this theme's own (assets/svg/left.svg), drawn as
   * a mask in the controls' colour; next is it mirrored. Root-relative, as a
   * relative url() in a custom property resolves differently between browsers.
   */
  --ponticlaro-zoom-arrow-icon: url("/wp-content/themes/ponticlaro-v2/assets/svg/left.svg");
}

@media (max-width: 767px) {
  :root {
    --ponticlaro-gallery-padding: 24px;
  }
}

/*
 * Dark mode (<html data-theme="dark">, the site's default): the "Theme default"
 * background a step lighter than the page (#121212) and darker than the dark
 * frames (#2b2b2d), so each window still stands off it.
 */
:root[data-theme='dark'] {
  --ponticlaro-gallery-background: #1b1b1d;

  /* The zoom viewer: the page blurred under near-black, not white. */
  --ponticlaro-zoom-background: rgba(18, 18, 18, 0.7);
}

/* The zoom viewer's controls, captions and top bar, light on the dark blur. */
:root[data-theme='dark'] .ponticlaro-zoom,
:root[data-theme='dark'] .ponticlaro-zoom__close,
:root[data-theme='dark'] .ponticlaro-zoom__arrow {
  color: #fff;
}

:root[data-theme='dark'] .ponticlaro-zoom__close:focus-visible,
:root[data-theme='dark'] .ponticlaro-zoom__arrow:focus-visible {
  outline-color: #fff;
}

:root[data-theme='dark'] .ponticlaro-zoom__caption {
  color: rgba(255, 255, 255, 0.75);
}

:root[data-theme='dark'] .ponticlaro-zoom__bar {
  background: linear-gradient(rgba(18, 18, 18, 0.85), rgba(18, 18, 18, 0));
}

@media (max-width: 600px) {
  :root[data-theme='dark'] .ponticlaro-zoom__bar {
    background: var(--ponticlaro-zoom-background);
  }
}

:root[data-theme='dark'] .ponticlaro-zoom__image {
  background: rgba(255, 255, 255, 0.04);
}