{"version":3,"file":"common/css/image-compare.css","mappings":";;;AAIA;EACE;EACA;EACA;EACA;EACA;AAHF;;AAOA;EACE;EACA;EACA;EACA;AAJF;;AAOA;EACE;EACA;EACA;EACA;AAJF;;AAOA;EACE;EACA;EACA;EACA;AAJF;;AAOA;EACE;AAJF;;AAOA;EACE;AAJF;;AAOA;EACE;EACA;EACA;AAJF;;AAOA;EACE;EACA;EACA;EACA;EACA;AAJF;;AAOA;;;EACE;EACA;AAFF;;AAKA;;EACE;EACA;EAEA;EACA;EACA;AAFF;;AAKA;EACE;EACA;EACA;EACA;AAFF;;AAKA;EAEE;EACA;AAHF;;AAMA;EAEE;EACA;AAJF;;AAQA;EAEE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AATF;AAWE;;EAEE;AATJ;AAaE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EACA;EACA;AAfJ;AAmBI;EACE;AAjBN;AAoBI;EACE;AAlBN;AAqBI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAnBN;AAuBI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AArBN;AAwBI;EACE;EACA;EACA;EACA;EACA;AAtBN;AAyBI;EACE;EACA;EACA;EACA;AAvBN;;AA6BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AA1BF;AA4BE;EACE;IACE;EA1BJ;EA6BE;IACE;EA3BJ;AACF;AA8BE;EACE;EACA;EACA;EACA;EACA;AA5BJ;AA+BE;EAEE;AA9BJ;AAkCI;;EAEE;AAhCN;AAiCM;;EACE;AA9BR;AAoCI;;EAEE;AAlCN;AAsCE;EACE;AApCJ;AAuCE;EACE;AArCJ;AAyCE;EACE;EACA;EACA;EACA;AAvCJ;AA0CE;EACE;AAxCJ;AA4CE;EACE;EACA;EACA;AA1CJ;AA4CI;EAGE;EACA;EACA;EACA;AA5CN;AA+CI;EAAuB;EAAU;EAAW;AA1ChD;AA2CI;EAAuB;EAAW;AAvCtC;AAwCI;EAAuB;EAAW;EAAW;AAnCjD;AAoCI;EAAuB;EAAW;AAhCtC;AAiCI;EAAuB;EAAc;AA7BzC;AA8BI;EAAwB;EAAc;EAAW;AAzBrD;AA0BI;EAAuB;EAAc;AAtBzC;AAyBE;EACE;AAvBJ;AA0BE;EACE;AAxBJ;;AA6BA;EAIE;AA7BF;AA+BE;EAGE;AA/BJ;AAiCE;EACE;AA/BJ;AAiCE;EACE;AA/BJ;;AAoCA;EAIE;AApCF;AAsCE;EAGE;AAtCJ;AAwCE;EACE;AAtCJ;AAwCE;EACE;AAtCJ;;AAkDI;;EAEE;EACA;EACA;AA/CN;AAoDI;;EAEE;EACA;EACA;AAlDN;AAsDE;EACE;AApDJ;AAuDE;EACE;AArDJ;;AAgEE;EACE;AA7DJ;AAgEE;EACE;AA9DJ;;AAqEA;EACE;AAlEF;AAqEE;EAGE;EACA;EAGA;EACA;AAvEJ;AA2EE;EAGE;EACA;EAGA;EACA;AA7EJ;;AAyFI;;EAEE;EACA;EACA;AAtFN;AA2FI;;EAEE;EACA;EACA;AAzFN;AA6FE;EACE;AA3FJ;AA8FE;EACE;AA5FJ;;AAiGA;EAGE;EACA;EACA;AAhGF;AAmGI;EACE;AAjGN;AAoGI;EACE;AAlGN;AAqGI;EACE;AAnGN;;AAwGA;EACE;AArGF;;AAwGA;EACE;AArGF;;AA0GE;EAGE;EACA;EAIA;EACA;AA5GJ;AA+GE;EAGE;EACA;EACA;EAIA;EACA;AAlHJ;;AAwHE;EAGE;EACA;EACA;EAIA;EACA;AA1HJ;AA6HE;EAGE;EACA;EACA;EAIA;EACA;AAhIJ;;AAqIA;EACE;EACA;EAGA;AApIF;;AAyIA;EACE;EACA;EAGA;AAxIF;;AA6IA;EACE;EACA;EAGA;AA5IF;;AAiJA;EACE;EACA;EAGA;AAhJF;;AAqJE;EACE;EACA;AAlJJ;AAsJI;EACE;AApJN;;AAyJA;EACE;AAtJF;;AAyJA;EACE;EACA;EACA;AAtJF;AAwJE;EACE;AAtJJ;AAyJE;EACE;AAvJJ;AA0JE;EACE;AAxJJ;AA2JE;EACE;AAzJJ;;AAgKI;;EAEE;AA7JN;AAkKI;;EAEE;EACA;AAhKN;AAoKM;;EAEE;AAlKR;AAwKI;;EAEE;AAtKN;;AA2KA;EACE;EACA;EACA;EACA;AAxKF;;AA4KA;EACE;EACA;EACA;EACA;EACA;EACA;AAzKF;;AA4KA;EACE;EACA;EACA;EACA;EACA;EACA;AAzKF;;AA4KA;EACE;EACA;EACA;EACA;AAzKF;;AA4KA;EACE;EACA;EAEA;AA1KF;;AA6KA;EACE;EACA;EACA;AA1KF;;AA6KA;EACE;EACA;AA1KF;;AA+KA;EACE;EACA;EACA;EACA;EACA;AA5KF;;AA+KA;EACE;EACA;EACA;EACA;EACA;EACA;AA5KF;;AA+KA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA5KF;;AA+KA;EACE;EACA;EACA;EACA;EACA;EACA;AA5KF;;AA+KA;EACE;AA5KF;;AA8KA;EACE;AA3KF;;AA6KA;EACE;AA1KF;;AA8KA;EACE;EACA;AA3KF;;AA+KA;EACE;EACA;AA5KF;;AAgLA;EACE;EACA;AA7KF;;AAiLA;EACE;EACA;AA9KF;;AAiLA;AACA;;EAEE;AA9KF;;AAiLA;;EAEE;EACA;AA9KF;;AAgLA;EACE;EACA;AA7KF;;AAgLA;AACA;;;;EAIE;AA7KF;;AAgLA;EACE;AA7KF;;AAgLA;EACE;AA7KF;;AA+KA;EACE;AA5KF,C","sources":["webpack://@codecanel/before-after-image-slider/./src/common/styles/image-compare.scss"],"sourcesContent":["// Class Prefix\n$pluginPrefix: \"coca-image-compare\" !default;\n\n// Placeholders\n%handle-content {\n  position: absolute;\n  z-index: 30;\n  display: block;\n  content: \" \";\n  background: #fff; /* Fixed white color for divider */\n  // @include box-shadow(--coca-image-compare-handle-box-shadow);\n}\n\n%handle-position-horizontal {\n  left: 50%;\n  width: var(--coca-image-compare-handle-stroke);\n  height: 9999px;\n  margin-left: calc(-1 * var(--coca-image-compare-handle-stroke) / 2);\n}\n\n%handle-position-vertical {\n  top: 50%;\n  width: 9999px;\n  height: var(--coca-image-compare-handle-stroke);\n  margin-top: calc(-1 * var(--coca-image-compare-handle-stroke) / 2);\n}\n\n%absolute-wh-position {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  height: 100%;\n}\n\n%overlay-transition-duration {\n  transition-duration: 0.5s;\n}\n\n%label-transition-property {\n  transition-property: opacity;\n}\n\n%label-text {\n  font-size: var(--coca-image-compare-overlay-label-font-size);\n  color: var(--coca-image-compare-overlay-label-color);\n  letter-spacing: var(--coca-image-compare-overlay-label-letter-spacing);\n}\n\n%label-structure {\n  position: absolute;\n  padding: 0 var(--coca-image-compare-overlay-label-padding);\n  line-height: var(--coca-image-compare-overlay-label-height);\n  background: var(--coca-image-compare-overlay-label-bg);\n  border-radius: var(--coca-image-compare-label-radius);\n}\n\n%label-position-horizontal {\n  top: 50%;\n  margin-top: calc(-1 * var(--coca-image-compare-overlay-label-height) / 2);\n}\n\n%label-position-vertical {\n  left: 50%;\n  width: var(--coca-image-compare-overlay-label-width);\n  // margin-left: calc(-1 * var(--coca-image-compare-overlay-label-width) / 2);\n  margin-left: calc(var(--coca-image-compare-overlay-label-width) / -12);\n  transform: translateX(-50%);\n  text-align: center;\n}\n\n%css-triangle {\n  position: absolute;\n  width: 0;\n  height: 0;\n  border: var(--coca-image-compare-handle-triangle-size) inset transparent;\n}\n\n%css-triangle-horizontal {\n  @extend %css-triangle;\n  top: 50%;\n  margin-top: calc(-1 * var(--coca-image-compare-handle-triangle-size));\n}\n\n%css-triangle-vertical {\n  @extend %css-triangle;\n  left: 50%;\n  margin-left: calc(-1 * var(--coca-image-compare-handle-triangle-size));\n}\n\n// Wrapper\n.#{$pluginPrefix}-wrapper {\n  // Handle Styles\n  --coca-image-compare-handle-color: #fff;\n  --coca-image-compare-handle-stroke: 3px;\n  --coca-image-compare-handle-circle-width: 40px;\n  --coca-image-compare-handle-circle-height: 40px;\n  // --coca-image-compare-handle-box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);\n  --coca-image-compare-handle-triangle-color: var(--coca-image-compare-handle-color);\n  --coca-image-compare-handle-triangle-size: 6px;\n  --coca-image-compare-handle-triangle-position: 5px;\n  --coca-image-compare-handle-radius: 1000px;\n\n  // Overlay Styles\n  --coca-image-compare-overlay-bg: rgba(0, 0, 0, 0.5);\n  --coca-image-compare-overlay-label-color: #000;\n  --coca-image-compare-overlay-label-bg: #d6d6d680;\n  --coca-image-compare-overlay-label-height: 38px;\n  --coca-image-compare-overlay-label-width: 50px;\n  --coca-image-compare-overlay-label-padding: 20px;\n  --coca-image-compare-overlay-label-font-size: 13px;\n  --coca-image-compare-overlay-label-letter-spacing: 0.1em;\n  --coca-image-compare-label-radius: 2px;\n\n  .#{$pluginPrefix}-handle::after,\n  .#{$pluginPrefix}-handle::before {\n    transition: 300ms ease-in-out;\n  }\n\n  // Handle Styles\n  &:not(.handle-bottom) .#{$pluginPrefix}-handle {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    z-index: 40;\n    width: var(--coca-image-compare-handle-circle-width);\n    height: var(--coca-image-compare-handle-circle-height);\n    margin-top: calc(\n      -1 * calc(var(--coca-image-compare-handle-circle-height) / 2) - var(--coca-image-compare-handle-stroke)\n    );\n    margin-left: calc(\n      -1 * calc(var(--coca-image-compare-handle-circle-width) / 2) - var(--coca-image-compare-handle-stroke)\n    );\n    cursor: pointer;\n    border: var(--coca-image-compare-handle-stroke) solid var(--coca-image-compare-handle-color);\n    border-radius: var(--coca-image-compare-handle-radius);\n    box-shadow: var(--coca-image-compare-handle-box-shadow);\n    transition: none !important;\n  }\n\n  &.handle-bottom {\n    &:not(.#{$pluginPrefix}-vertical) .#{$pluginPrefix}-container {\n      margin-bottom: 25px;\n    }\n\n    .#{$pluginPrefix}-container {\n      overflow: inherit;\n    }\n\n    .#{$pluginPrefix}-handle-wrapper {\n      position: absolute;\n      bottom: -22px;\n      z-index: 10;\n      width: 100%;\n      height: 10px;\n      margin-right: 0;\n      background: rgba(0, 0, 0, 0.25);\n      border-radius: 30px;\n      //overflow: hidden;\n    }\n\n    .#{$pluginPrefix}-handle {\n      position: absolute;\n      top: inherit;\n      bottom: 0;\n      left: 50%;\n      z-index: 99999;\n      width: 45px;\n      height: 10px;\n      padding: 0;\n      margin: 0 0 0 -22px;\n      cursor: pointer;\n      background: #fff;\n      border: 0;\n      border-radius: 30px;\n      box-shadow: var(--coca-image-compare-handle-box-shadow);\n      transition: none !important;\n    }\n\n    &.#{$pluginPrefix}-vertical .#{$pluginPrefix}-handle-wrapper {\n      right: -22px;\n      bottom: 0;\n      width: 10px;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    &.#{$pluginPrefix}-vertical .#{$pluginPrefix}-handle {\n      left: 0;\n      width: 10px;\n      height: 45px;\n      margin: -22px 0 0;\n    }\n  }\n}\n\n// Container\n.#{$pluginPrefix}-container {\n  position: relative;\n  z-index: 0;\n  box-sizing: content-box;\n  overflow: hidden;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  animation: fadeIn 800ms;\n\n  @keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n\n    100% {\n      opacity: 1;\n    }\n  }\n\n  img {\n    position: absolute;\n    top: 0;\n    display: block;\n    max-width: 100%;\n    height: auto;\n  }\n\n  &.active .#{$pluginPrefix}-overlay,\n  &.active:hover .#{$pluginPrefix}-overlay {\n    background: rgba(#000, 0);\n  }\n\n  &.active .#{$pluginPrefix}-overlay {\n    .#{$pluginPrefix}-before-label,\n    .#{$pluginPrefix}-after-label {\n      opacity: 1;\n      &.label_show_on_hover {\n        opacity: 0;\n      }\n    }\n  }\n\n  &.active:hover .#{$pluginPrefix}-overlay {\n    .#{$pluginPrefix}-before-label,\n    .#{$pluginPrefix}-after-label {\n      opacity: 1;\n    }\n  }\n\n  &.has-indicator .#{$pluginPrefix}-overlay {\n    background-color: transparent !important;\n  }\n\n  * {\n    box-sizing: content-box;\n  }\n\n  // working with indicator image\n  & .#{$pluginPrefix}-overlay-image {\n    z-index: 25;\n    width: 100%;\n    height: 100%;\n    visibility: hidden;\n  }\n\n  &:not(.moving):hover .#{$pluginPrefix}-overlay-image {\n    visibility: visible;\n  }\n\n  // Badge / Watermark feature\n  & .coca-bais-badge {\n    position: absolute;\n    z-index: 30;\n    pointer-events: none;\n\n    img {\n      // Reset container-level `img { position: absolute; top: 0; max-width: 100% }`\n      // so the badge image stays in-flow and the badge div sizes to its content.\n      position: static;\n      display: block;\n      max-width: none;\n      height: auto;\n    }\n\n    &.badge-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); }\n    &.badge-top-left     { top: 10px; left: 10px; }\n    &.badge-top-center   { top: 10px; left: 50%; transform: translateX(-50%); }\n    &.badge-top-right    { top: 10px; right: 10px; }\n    &.badge-bottom-left  { bottom: 10px; left: 10px; }\n    &.badge-bottom-center { bottom: 10px; left: 50%; transform: translateX(-50%); }\n    &.badge-bottom-right { bottom: 10px; right: 10px; }\n  }\n\n  & .coca-bais-badge.badge-hover {\n    visibility: hidden;\n  }\n\n  &:not(.moving):hover .coca-bais-badge.badge-hover {\n    visibility: visible;\n  }\n}\n\n// Before Label\n.#{$pluginPrefix}-before-label {\n  @extend %absolute-wh-position;\n  @extend %label-transition-property;\n  @extend %overlay-transition-duration;\n  opacity: 1;\n\n  &:before {\n    @extend %label-structure;\n    @extend %label-text;\n    content: attr(data-content);\n  }\n  &.label_show_on_hover {\n    opacity: 0;\n  }\n  &.label_hide {\n    display: none !important;\n  }\n}\n\n// After Label\n.#{$pluginPrefix}-after-label {\n  @extend %absolute-wh-position;\n  @extend %label-transition-property;\n  @extend %overlay-transition-duration;\n  opacity: 1;\n\n  &:before {\n    @extend %label-structure;\n    @extend %label-text;\n    content: attr(data-content);\n  }\n  &.label_show_on_hover {\n    opacity: 0;\n  }\n  &.label_hide {\n    display: none !important;\n  }\n}\n\n// Horizontal Labels\n.#{$pluginPrefix}-horizontal {\n  .#{$pluginPrefix}-after-label:before,\n  .#{$pluginPrefix}-before-label:before {\n    @extend %label-position-horizontal;\n  }\n\n  .label-horizontal-top & {\n    .#{$pluginPrefix}-before-label:before,\n    .#{$pluginPrefix}-after-label:before {\n      top: 10px;\n      margin-top: 0;\n      transform: translateY(0);\n    }\n  }\n\n  .label-horizontal-bottom & {\n    .#{$pluginPrefix}-before-label:before,\n    .#{$pluginPrefix}-after-label:before {\n      top: auto;\n      bottom: 10px;\n      transform: translateY(0);\n    }\n  }\n\n  .#{$pluginPrefix}-before-label:before {\n    left: 10px;\n  }\n\n  .#{$pluginPrefix}-after-label:before {\n    right: 10px;\n  }\n}\n\n// Diagonal Labels (wrapper gets coca-image-compare-diagonal class)\n.#{$pluginPrefix}-diagonal {\n  .#{$pluginPrefix}-after-label:before,\n  .#{$pluginPrefix}-before-label:before {\n    @extend %label-position-horizontal;\n  }\n\n  .#{$pluginPrefix}-before-label:before {\n    left: 10px;\n  }\n\n  .#{$pluginPrefix}-after-label:before {\n    right: 10px;\n  }\n}\n\n// Diagonal handle rotation — the handle circle is rotated to align with the diagonal\n// divider line. ::before/::after bars (same structure as horizontal) rotate with it.\n// Excluded for handle-bottom (style07) since that has no on-image handle.\n.#{$pluginPrefix}-diagonal:not(.handle-bottom) .#{$pluginPrefix}-handle {\n  transform: rotate(calc(-1 * var(--bais-diagonal-angle, -45deg)));\n\n  // Divider upper half — identical to horizontal ::before; rotates with parent handle.\n  &::before {\n    @extend %handle-content;\n    @extend %handle-position-horizontal;\n    bottom: 50%;\n    margin-bottom: calc(\n      calc(var(--coca-image-compare-handle-circle-height) / 2) + var(--coca-image-compare-handle-stroke)\n    );\n    position: absolute;\n    z-index: 1;\n  }\n\n  // Divider lower half — identical to horizontal ::after; rotates with parent handle.\n  &::after {\n    @extend %handle-content;\n    @extend %handle-position-horizontal;\n    top: 50%;\n    margin-top: calc(\n      calc(var(--coca-image-compare-handle-circle-height) / 2) + var(--coca-image-compare-handle-stroke)\n    );\n    position: absolute;\n    z-index: 1;\n  }\n}\n\n// Vertical Labels\n.#{$pluginPrefix}-vertical {\n  .#{$pluginPrefix}-before-label:before,\n  .#{$pluginPrefix}-after-label:before {\n    @extend %label-position-vertical;\n  }\n\n  .label-vertical-left & {\n    .#{$pluginPrefix}-before-label:before,\n    .#{$pluginPrefix}-after-label:before {\n      left: 10px;\n      margin-left: 0;\n      transform: translateX(0);\n    }\n  }\n\n  .label-vertical-right & {\n    .#{$pluginPrefix}-before-label:before,\n    .#{$pluginPrefix}-after-label:before {\n      right: 10px;\n      left: auto;\n      transform: translateX(0);\n    }\n  }\n\n  .#{$pluginPrefix}-before-label:before {\n    top: 10px;\n  }\n\n  .#{$pluginPrefix}-after-label:before {\n    bottom: 10px;\n  }\n}\n\n// Overlay\n.#{$pluginPrefix}-overlay {\n  @extend %absolute-wh-position;\n  @extend %overlay-transition-duration;\n  z-index: 25;\n  background: rgba(#000, 0);\n  transition-property: background;\n\n  &:hover {\n    &:not(.no-overlay) {\n      background: var(--coca-image-compare-overlay-bg);\n    }\n\n    .#{$pluginPrefix}-after-label {\n      opacity: 1;\n    }\n\n    .#{$pluginPrefix}-before-label {\n      opacity: 1;\n    }\n  }\n}\n\n.#{$pluginPrefix}-before {\n  z-index: 20;\n}\n\n.#{$pluginPrefix}-after {\n  z-index: 10;\n}\n\n// Handle Styles\n.#{$pluginPrefix}-horizontal:not(.handle-bottom) .#{$pluginPrefix}-handle {\n  &:before {\n    @extend %handle-content;\n    @extend %handle-position-horizontal;\n    bottom: 50%;\n    margin-bottom: calc(\n      calc(var(--coca-image-compare-handle-circle-height) / 2) + var(--coca-image-compare-handle-stroke)\n    );\n    // box-shadow: 0 var(--coca-image-compare-handle-stroke) 0 #fff, var(--coca-image-compare-handle-box-shadow);\n    position: absolute;\n    z-index: 1;\n  }\n\n  &:after {\n    @extend %handle-content;\n    @extend %handle-position-horizontal;\n    top: 50%;\n    margin-top: calc(var(--coca-image-compare-handle-circle-height) / 2);\n    margin-top: calc(\n      calc(var(--coca-image-compare-handle-circle-height) / 2) + var(--coca-image-compare-handle-stroke)\n    );\n    // box-shadow: 0 var(--coca-image-compare-handle-stroke) 0 #fff, var(--coca-image-compare-handle-box-shadow);\n    position: absolute;\n    z-index: 1;\n  }\n}\n\n// Vertical Handle Styles\n.#{$pluginPrefix}-vertical:not(.handle-bottom) .#{$pluginPrefix}-handle {\n  &:before {\n    @extend %handle-content;\n    @extend %handle-position-vertical;\n    left: 50%;\n    margin-left: calc(var(--coca-image-compare-handle-circle-width) / 2);\n    margin-left: calc(\n      calc(var(--coca-image-compare-handle-circle-width) / 2) + var(--coca-image-compare-handle-stroke)\n    );\n    //box-shadow: var(--coca-image-compare-handle-stroke) 0 0 #fff, var(--coca-image-compare-handle-box-shadow);\n    position: absolute;\n    z-index: 1;\n  }\n\n  &:after {\n    @extend %handle-content;\n    @extend %handle-position-vertical;\n    right: 50%;\n    margin-right: calc(var(--coca-image-compare-handle-circle-width) / 2);\n    margin-right: calc(\n      calc(var(--coca-image-compare-handle-circle-width) / 2) + var(--coca-image-compare-handle-stroke)\n    );\n    //box-shadow: calc(-1 * var(--coca-image-compare-handle-stroke)) 0 0 #fff, var(--coca-image-compare-handle-box-shadow);\n    position: absolute;\n    z-index: 1;\n  }\n}\n\n// Left Handle\n.#{$pluginPrefix}-left-arrow {\n  left: 50%;\n  margin-left: calc(\n    -1 * calc(var(--coca-image-compare-handle-triangle-size) * 2) - var(--coca-image-compare-handle-triangle-position)\n  );\n  border-right: var(--coca-image-compare-handle-triangle-size) solid var(--coca-image-compare-handle-triangle-color);\n  @extend %css-triangle-horizontal;\n}\n\n// Right Handle\n.#{$pluginPrefix}-right-arrow {\n  right: 50%;\n  margin-right: calc(\n    -1 * calc(var(--coca-image-compare-handle-triangle-size) * 2) - var(--coca-image-compare-handle-triangle-position)\n  );\n  border-left: var(--coca-image-compare-handle-triangle-size) solid var(--coca-image-compare-handle-triangle-color);\n  @extend %css-triangle-horizontal;\n}\n\n// Up Handle\n.#{$pluginPrefix}-up-arrow {\n  top: 50%;\n  margin-top: calc(\n    -1 * calc(var(--coca-image-compare-handle-triangle-size) * 2) - var(--coca-image-compare-handle-triangle-position)\n  );\n  border-bottom: var(--coca-image-compare-handle-triangle-size) solid var(--coca-image-compare-handle-triangle-color);\n  @extend %css-triangle-vertical;\n}\n\n// Down Handle\n.#{$pluginPrefix}-down-arrow {\n  bottom: 50%;\n  margin-bottom: calc(\n    -1 * calc(var(--coca-image-compare-handle-triangle-size) * 2) - var(--coca-image-compare-handle-triangle-position)\n  );\n  border-top: var(--coca-image-compare-handle-triangle-size) solid var(--coca-image-compare-handle-triangle-color);\n  @extend %css-triangle-vertical;\n}\n\n.coca-slider-hover-true {\n  .coca-image-compare-overlay-image {\n    visibility: visible !important;\n    transition: visibility 0.2s ease-in-out;\n  }\n\n  &:hover {\n    .coca-image-compare-overlay-image {\n      visibility: hidden !important;\n    }\n  }\n}\n\n.popup-loaded {\n  background: #fff !important;\n}\n\n.video-control-area {\n  margin: 20px 0;\n  display: flex;\n  justify-content: space-evenly;\n\n  .video-play-pause {\n    cursor: pointer;\n  }\n\n  .video-sound {\n    cursor: pointer;\n  }\n\n  .show {\n    display: block;\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n\n// video slider label show/hide\n.coca-bais-video-slider {\n  &.label_hide {\n    .coca-image-compare-before-label,\n    .coca-image-compare-after-label {\n      display: none !important;\n    }\n  }\n\n  &.label_show_on_hover {\n    .coca-image-compare-before-label,\n    .coca-image-compare-after-label {\n      opacity: 0;\n      transition: opacity 0.3s ease-in-out;\n    }\n\n    &:hover {\n      .coca-image-compare-before-label,\n      .coca-image-compare-after-label {\n        opacity: 1;\n      }\n    }\n  }\n\n  &.label_always_show {\n    .coca-image-compare-before-label,\n    .coca-image-compare-after-label {\n      opacity: 1 !important;\n    }\n  }\n}\n\n.coca-bais-video-slider .coca-bais-container {\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  // min-height: 360px;\n}\n\n.coca-bais-video-slider .before-video-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.coca-bais-video-slider .after-video-wrapper {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 50%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.coca-bais-video-slider .coca-bais-container.vertical .after-video-wrapper {\n  width: 100%;\n  height: 50%;\n  top: 0;\n  left: 0;\n}\n\n.coca-bais-video-slider .video-wrapper {\n  width: 100%;\n  height: 100%;\n  // min-height: 360px;\n  position: relative;\n}\n\n.coca-bais-video-slider .video-wrapper video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.coca-bais-video-slider .video-wrapper iframe {\n  width: 100%;\n  height: 100%;\n  // min-height: 300px;\n}\n\n// Add styles for coca-video-compare-wrapper\n.coca-bais-video-slider .coca-video-compare-wrapper {\n  position: relative;\n  width: 100%;\n  height: 100% !important;\n  overflow: hidden;\n  padding-bottom: 0 !important;\n}\n\n.coca-video-compare-wrapper > div {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.coca-bais-video-slider .coca-video-compare-wrapper iframe {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  min-width: 100%;\n  min-height: 100%;\n  width: auto;\n  height: auto;\n  object-fit: cover;\n}\n\n.coca-bais-video-slider .coca-video-compare-wrapper video {\n  position: absolute;\n  top: 0;\n  left: 0;\n  min-height: 100%;\n  min-width: 100%;\n  object-fit: fill;\n}\n\nvideo::-webkit-media-controls {\n  display: none !important;\n}\nvideo::-moz-media-controls {\n  display: none !important;\n}\nvideo::-media-controls {\n  display: none !important;\n}\n\n// Second iframe (after) should only show in its designated area\n.coca-bais-video-slider .coca-image-compare-horizontal .coca-video-compare-wrapper iframe:nth-child(2) {\n  clip-path: inset(0 0 0 50%);\n  -webkit-clip-path: inset(0 0 0 50%);\n}\n\n// Second iframe (after) should only show in its designated area\n.coca-bais-video-slider .coca-image-compare-horizontal .coca-video-compare-wrapper video:nth-child(2) {\n  clip-path: inset(0 0 0 50%);\n  -webkit-clip-path: inset(0 0 0 50%);\n}\n\n// Adjust for vertical layout\n.coca-bais-video-slider .coca-image-compare-vertical .coca-video-compare-wrapper iframe:nth-child(2) {\n  clip-path: inset(50% 0 0 0);\n  -webkit-clip-path: inset(50% 0 0 0);\n}\n\n// Adjust for vertical layout\n.coca-bais-video-slider .coca-image-compare-vertical .coca-video-compare-wrapper video:nth-child(2) {\n  clip-path: inset(50% 0 0 0);\n  -webkit-clip-path: inset(50% 0 0 0);\n}\n\n/* Fix for clip path issues */\n.elementor-widget-coca_bais_before_after_image_slider iframe.coca-image-compare-before,\n.elementor-widget-coca_bais_before_after_image_slider iframe.coca-image-compare-after {\n  position: absolute !important;\n}\n\n.elementor-widget-coca_bais_before_after_image_slider video.coca-image-compare-before,\n.elementor-widget-coca_bais_before_after_image_slider video.coca-image-compare-after {\n  position: absolute !important;\n  object-fit: cover !important;\n}\n.shortcode-container .coca-bais-container {\n  display: flex !important;\n  align-items: center;\n}\n\n/* Set proper before/after image divider for template-style07 */\n.template-style07 .coca-image-compare-horizontal:not(.handle-bottom) .coca-image-compare-handle:before,\n.template-style07 .coca-image-compare-horizontal:not(.handle-bottom) .coca-image-compare-handle:after,\n.template-style07 .coca-image-compare-vertical:not(.handle-bottom) .coca-image-compare-handle:before,\n.template-style07 .coca-image-compare-vertical:not(.handle-bottom) .coca-image-compare-handle:after {\n  display: none !important;\n}\n\n.coca-image-compare-handle-wrapper {\n  overflow: hidden !important;\n}\n\n.elementor iframe {\n  min-width: 100% !important;\n}\n.elementor video {\n  min-width: 100% !important;\n}\n"],"names":[],"sourceRoot":""}