/**
 * @file
 *
 * See README.md with KNOWN ISSUES for details.
 */

.zooming {
  position: relative;
  cursor: crosshair;
}

.is-zooming--loading .is-zooming__zoomed .zooming {
  cursor: wait;
}

/**
 * Prevents zoomed images from being cropped due to `overlow: hidden` rule.
 * Add your own selector when the body has class `is-zooming` if the script
 * doesn't detect the expected parent selectors. Basically just add
 * `overflow: visible;` rule to those cropped/ hidden when in a zoomed state.
 * When the zoomed is closed, this class will be removed to not affect design.
 */
.is-zooming .is-zooming__zoomed,
.is-zooming [data-zooming-gallery] .is-zooming__zoomed,
.is-zooming .is-zooming__zoomed .slide__media,
.is-zooming .is-zooming__zoomed.box > .box__content {
  position: relative;
  z-index: 1000;
  top: auto !important; /* csslint allow: known-properties, important */
  right: auto;
  bottom: auto;
  left: auto;
  display: block;
  float: none;
  overflow: visible;
  width: 100%;
  height: auto !important; /* csslint allow: known-properties, important */
  margin: auto;
  padding: 0;
  text-align: center;
}

.is-zooming [data-zooming-gallery]::before {
  position: fixed;
  z-index: 997;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: background-color 0.4s;
  background-color: rgba(255, 255, 255, 0.9);
}

/** Hide distracting elements when the image is being zoomed. */
.is-zooming .is-zooming__zoomed .blazy__caption,
.is-zooming .is-zooming__zoomed .slide__caption,
.is-zooming .is-zooming__zoomed .media__icon {
  visibility: hidden;
}

/** Releasing aspect ratio on being zoomed appears to cause issues. */
.is-zooming .is-zooming__zoomed .media {
  /* padding-bottom: 0 !important;  csslint allow: known-properties, important */
  position: relative;
  top: auto;
  left: auto;
  overflow: visible;
  height: auto;
  margin: auto;
  transition: none;
  text-align: center;
}

/** Zooming doesn't work with Slick due to both use transform rules. */
.is-zooming .slick--zooming .slick-list {
  overflow: visible;
}

/** Original backdrop is not always working, add one.
You may want to change things to better suit your design:
- background in case having different design,
- top value in case having a fixed height header */
.is-zooming__zoomed::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 200vw;
  height: 200vh;
  content: "";
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.9);
}

/** Original overlay is sometimes useless given various layouts. */
.is-zooming__overlay {
  background-color: transparent !important; /* csslint allow: known-properties, important */
}


/** Centering the image on being zoomed.
.is-zooming .is-zooming__zoomed .zooming {
  display: inline-block;
  left: auto;
  margin: 0 auto;
  top: auto;
  vertical-align: middle;
} */