/*
 * Ported 1:1 from Scss/Vendor/_easyzoom.scss (CON-1277 Phase 7 prep -- last real Bootstrap tie in
 * that file was "@include media-breakpoint-up(md)", swapped for a literal "min-width: 768px"
 * media query, matching this project's own breakpoint convention). Layout rules for the vanilla-JS
 * "imageZoom.js" module (Public/Js/imageZoom.js) -- keeps the same class names the old jQuery
 * "easyzoom" plugin used (".easyzoom-flyout", "is-loading"/"is-ready"/"is-error" state classes,
 * etc.) so the JS's own DOM manipulation needs no change. Only real consumer: con_products'
 * Show/Images.html (".easyzoom easyzoom--overlay easyzoom--with-thumbnails"). ".easyzoom--adjacent"
 * has no current template match, ported anyway since it's zero extra risk (same file, no separate
 * migration step).
 */
@layer extensions {
  .easyzoom {
    position: relative;
    display: inline-block;
  }
  @media (min-width: 768px) {
    .easyzoom {
      width: 100%;
    }
  }
  .easyzoom img {
    vertical-align: bottom;
    transition: opacity 250ms ease; /* read by imageZoom.js swap() as the fade duration */
  }
  .easyzoom.is-swapping img {
    opacity: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .easyzoom img {
      transition: none;
    }
  }
  .easyzoom.is-loading img {
    cursor: progress;
  }
  .easyzoom.is-ready img {
    cursor: crosshair;
  }
  .easyzoom.is-error img {
    cursor: not-allowed;
  }
  .easyzoom-notice {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 150;
    width: 10em;
    margin: -1em 0 0 -5em;
    line-height: 2em;
    text-align: center;
    background: var(--shade-white);
    box-shadow: 0 0 10px #888;
  }
  .easyzoom-flyout {
    position: absolute;
    z-index: 100;
    overflow: hidden;
    background: var(--shade-white);
  }
  .easyzoom-flyout img {
    max-width: none;
  }
  .easyzoom--overlay .easyzoom-flyout {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .easyzoom--adjacent .easyzoom-flyout {
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    margin-left: 20px;
  }
}