/*!***************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[3].use[2]!./node_modules/@wordpress/scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./packages/module-library/before-after-slider/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Before/After: layout shell. Image Compare Viewer (`.icv__*`) styles come from vendor CSS.
 */
.dsm_before_after_image {
  overflow: hidden;
}

.dsm-before-after-image-slider-container {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  z-index: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

/* Pre-mount: two images before ICV `mount()` mutates the wrapper. */
.dsm_before_after_image_wrapper:not(.icv) img,
.dsm-before-after-image-slider-container:not(.icv) img {
  max-width: 100%;
  width: 100%;
  display: block;
}

/*
 * Fluid mode: vendor hides `.icv__img` and paints `background-image` on absolute layers at
 * height:100%. With no in-flow content, `.icv` collapses to 0px — looks like “images missing”.
 * A block size here matches typical demos that set an explicit height on the compare root.
 */
.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__is--fluid {
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 12.5rem;
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__is--fluid.icv__icv--vertical {
  aspect-ratio: 9/16;
  max-height: min(85vh, 50rem);
}

/*
 * Hover overlay: Image Compare Viewer creates `.icv__imposter` in `_shapeContainer`, then
 * `_getImages()` clears `innerHTML` and only keeps `img`, `video`, `.keep` — the imposter is gone.
 * A ::before overlay (z-index 4, same as vendor imposter) + module styles on `:hover::before`
 * restores the intended tint without blocking drag (`pointer-events: none`).
 */
.dsm_before_after_image .dsm_before_after_image_wrapper.icv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-color: transparent;
  transition: background-color 0.25s ease;
}

/*
 * Label alignment (`label_align`): stored start | center | end.
 * Horizontal compare: cross-axis is vertical (UI: Top / Center / Bottom).
 * Vertical compare: cross-axis is horizontal (UI: Left / Center / Right).
 * Base `.icv__label { transform: ... }` would override vendor hover scale — restore scale in `.on-hover` rules.
 */
.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--horizontal.dsm-icv-label-align-start .icv__label {
  top: 1rem;
  bottom: auto;
  transform: none;
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--horizontal.dsm-icv-label-align-start .icv__label.on-hover {
  transform: scale(0);
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--horizontal.dsm-icv-label-align-start:hover .icv__label.on-hover {
  transform: scale(1);
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--horizontal.dsm-icv-label-align-center .icv__label {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--horizontal.dsm-icv-label-align-center .icv__label.on-hover {
  transform: translateY(-50%) scale(0);
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--horizontal.dsm-icv-label-align-center:hover .icv__label.on-hover {
  transform: translateY(-50%) scale(1);
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--horizontal.dsm-icv-label-align-end .icv__label {
  top: auto;
  bottom: 1rem;
  transform: none;
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--horizontal.dsm-icv-label-align-end .icv__label.on-hover {
  transform: scale(0);
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--horizontal.dsm-icv-label-align-end:hover .icv__label.on-hover {
  transform: scale(1);
}

/* Vertical compare: labels sit on the cross-axis (default vendor: left edge). */
.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--vertical.dsm-icv-label-align-start .icv__label {
  left: 1rem;
  right: auto;
  transform: none;
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--vertical.dsm-icv-label-align-start .icv__label.on-hover {
  transform: scale(0);
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--vertical.dsm-icv-label-align-start:hover .icv__label.on-hover {
  transform: scale(1);
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--vertical.dsm-icv-label-align-center .icv__label {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--vertical.dsm-icv-label-align-center .icv__label.on-hover {
  transform: translateX(-50%) scale(0);
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--vertical.dsm-icv-label-align-center:hover .icv__label.on-hover {
  transform: translateX(-50%) scale(1);
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--vertical.dsm-icv-label-align-end .icv__label {
  left: auto;
  right: 1rem;
  transform: none;
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--vertical.dsm-icv-label-align-end .icv__label.on-hover {
  transform: scale(0);
}

.dsm_before_after_image .dsm_before_after_image_wrapper.icv.icv__icv--vertical.dsm-icv-label-align-end:hover .icv__label.on-hover {
  transform: scale(1);
}