//
// Image compate.
//

.fusion-image-before-after-horizontal {
  .fusion-image-before-after-handle {
    &:before {
      content: " ";
      display: block;
      background: #fff;
      position: absolute;
      z-index: 30;
      width: 3px;
      height: 9999px;
      left: 50%;
      margin-left: -1.5px;
      bottom: 50%;
      margin-bottom: 22px;
      box-shadow: 0 3px 0 #fff, 0 0 12px rgba(51, 51, 51, 0.5);
    }

    &:after {
      content: " ";
      display: block;
      background: #fff;
      position: absolute;
      z-index: 30;
      width: 3px;
      height: 9999px;
      left: 50%;
      margin-left: -1.5px;
      top: 50%;
      margin-top: 22px;
      box-shadow: 0 -3px 0 #fff, 0 0 12px rgba(51, 51, 51, 0.5);
    }
    /* Handle Rectangle Horizontal */
    &.fusion-image-before-after-handle-rectangle {
      border-radius: 6px;
      width: 15px;
      height: 65px;

      &:before {
        margin-bottom: 36px;
      }

      &:after {
        margin-top: 35px;
      }

      .fusion-image-before-after-left-arrow {
        margin: 0;
        transform: translate(-230%, -50%);
      }

      .fusion-image-before-after-right-arrow {
        margin: 0;
        transform: translate(230%, -50%);
      }
    }
    /* Handle Rectangle Arrows Horizontal */
    &.fusion-image-before-after-handle-arrows {
      border: transparent;
      box-shadow: none;

      &:before {
        margin-bottom: 0;
      }

      &:after {
        margin-top: 0;
      }

      .fusion-image-before-after-right-arrow {
        border-width: 9px;
        border-left-width: 9px;
        margin: 0;
        transform: translate(130%, -50%);
      }

      .fusion-image-before-after-left-arrow {
        margin: 0;
        border-width: 9px;
        border-right-width: 9px;
        transform: translate(-130%, -50%);
      }
    }
    /* Handle Rectangle Arrows Diamond Horizontal */
    &.fusion-image-before-after-handle-diamond {
      border: transparent;
      box-shadow: none;

      &:before {
        margin-bottom: 31px;
      }

      &:after {
        margin-top: 30px;
        margin-left: -1.5px;
      }

      .fusion-image-before-after-left-arrow {
        margin-left: -12px;

        &:before {
          content: "";
          width: 38px;
          height: 38px;
          border: 3px solid #ffffff;
          position: absolute;
          left: 50%;
          top: 50%;
          border-radius: 3px;
          transform: translate(-36%, -50%) rotate(-45deg);
          z-index: -1;
        }
      }

      .fusion-image-before-after-right-arrow {
        margin-right: -12px;
      }
    }
    /* Handle Rectangle Arrows Circle Horizontal */
    &.fusion-image-before-after-handle-circle {
      background: #ffffff;
      border-color: transparent;

      &:after,
      &:before {
        background: transparent;
        box-shadow: none;
      }

      .fusion-image-before-after-left-arrow {
        &:before {
          content: "";
          width: 42px;
          height: 42px;
          position: absolute;
          border: 10px solid #d3d3d3;
          left: 50%;
          top: 50%;
          transform: translate(-32%, -50%);
          border-radius: 100%;
        }
      }

      .fusion-image-before-after-left-arrow {
        border-right-color: #d3d3d3;
      }

      .fusion-image-before-after-right-arrow {
        border-left-color: #d3d3d3;
      }
    }
  }

  .fusion-image-before-after-before-label {
    &:before {
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
    }
  }

  .fusion-image-before-after-after-label {
    &:before {
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
    }
  }

  .fusion-image-before-after-overlay {
    &.before-after-overlay-image-up-down {
      .fusion-image-before-after-before-label {
        &:before {
          top: 0;
          left: 0;
          margin-top: 0;
          transform: inherit;
        }
      }

      .fusion-image-before-after-after-label {
        &:before {
          top: auto;
          bottom: 0;
          margin-top: 0;
          right: 0;
          transform: inherit;
        }
      }
    }
  }

  .fusion-image-before-after-handle {
    &.fusion-image-before-after-handle-default {
      .fusion-image-before-after-left-arrow {
        margin: 0;
        transform: translate(-130%, -50%);
      }

      .fusion-image-before-after-right-arrow {
        margin: 0;
        transform: translate(130%, -50%);
      }
    }
  }
}

.fusion-image-before-after-vertical {
  .fusion-image-before-after-handle {
    &:before {
      content: " ";
      display: block;
      background: #fff;
      position: absolute;
      z-index: 30;
      width: 9999px;
      height: 3px;
      top: 50%;
      margin-top: -1.5px;
      left: 50%;
      margin-left: 22px;
      box-shadow: 3px 0 0 #fff, 0 0 12px rgba(51, 51, 51, 0.5);
    }

    &:after {
      content: " ";
      display: block;
      background: #fff;
      position: absolute;
      z-index: 30;
      width: 9999px;
      height: 3px;
      top: 50%;
      margin-top: -1.5px;
      right: 50%;
      margin-right: 22px;
      box-shadow: -3px 0 0 #fff, 0 0 12px rgba(51, 51, 51, 0.5);
    }
    /* Handle Rectangle Vertical */
    &.fusion-image-before-after-handle-rectangle {
      border-radius: 6px;
      width: 65px;
      height: 15px;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      margin-top: 0;
      transform: translateY(-50%);

      &:before {
        margin-left: 35px;
      }

      &:after {
        margin-right: 35px;
      }

      .fusion-image-before-after-down-arrow {
        margin: 0;
        transform: translate(-50%, 230%);
      }

      .fusion-image-before-after-up-arrow {
        margin: 0;
        transform: translate(-50%, -230%);
      }
    }
    /* Handle Rectangle Arrows Vertical */
    &.fusion-image-before-after-handle-arrows {
      border: transparent;
      box-shadow: none;

      &:before {
        margin-left: 0;
      }

      &:after {
        margin-right: 0;
      }

      .fusion-image-before-after-down-arrow {
        border-width: 9px;
        border-top-width: 9px;
        margin: 0;
        transform: translate(-50%, 130%);
      }

      .fusion-image-before-after-up-arrow {
        border-width: 9px;
        border-top-width: 9px;
        margin: 0;
        transform: translate(-50%, -130%);
      }
    }
    /* Handle Rectangle Arrows Diamond Vertical */
    &.fusion-image-before-after-handle-diamond {
      border: transparent;
      box-shadow: none;

      &:before {
        margin-left: 29px;
      }

      &:after {
        margin-right: 29px;
      }

      .fusion-image-before-after-down-arrow {
        margin-bottom: -12px;

        &:before {
          content: "";
          width: 38px;
          height: 38px;
          border: 3px solid #ffffff;
          position: absolute;
          left: 50%;
          top: 50%;
          border-radius: 3px;
          transform: translate(-50%, -64%) rotate(-45deg);
          z-index: -1;
        }
      }

      .fusion-image-before-after-up-arrow {
        margin-top: -12px;
      }
    }
    /* Handle Rectangle Arrows Circle Vertical */
    &.fusion-image-before-after-handle-circle {
      background: #ffffff;
      border-color: transparent;

      &:after,
      &:before {
        background: transparent;
        box-shadow: none;
      }

      .fusion-image-before-after-down-arrow {
        &:before {
          content: "";
          width: 42px;
          height: 42px;
          position: absolute;
          border: 10px solid #d3d3d3;
          left: 50%;
          top: 50%;
          border-radius: 100%;
          transform: translate(-50%, -67%);
        }
      }

      .fusion-image-before-after-down-arrow {
        border-top-color: #d3d3d3;
      }

      .fusion-image-before-after-up-arrow {
        border-bottom-color: #d3d3d3;
      }
    }
  }

  .fusion-image-before-after-before-label {
    &:before {
      left: 50%;
      text-align: center;
      top: 10px;
      transform: translateX(-50%);
    }
  }

  .fusion-image-before-after-after-label {
    &:before {
      left: 50%;
      text-align: center;
      bottom: 10px;
      transform: translateX(-50%);
    }
  }

  .fusion-image-before-after-overlay {
    &.before-after-overlay-image-up-down {
      .fusion-image-before-after-before-label {
        &:before {
          left: 0;
          transform: inherit;
          top: 0;
        }
      }

      .fusion-image-before-after-after-label {
        &:before {
          left: auto;
          right: 0;
          transform: inherit;
          bottom: 0;
        }
      }
    }
  }

  .fusion-image-before-after-handle {
    &.fusion-image-before-after-handle-square {
      .fusion-image-before-after-down-arrow {
        margin: 0;
        transform: translate(-50%, 130%);
      }

      .fusion-image-before-after-up-arrow {
        margin: 0;
        transform: translate(-50%, -130%);
      }
    }
  }

  .fusion-image-before-after-handle {
    &.fusion-image-before-after-handle-default {
      .fusion-image-before-after-down-arrow {
        margin: 0;
        transform: translate(-50%, 130%);
      }

      .fusion-image-before-after-up-arrow {
        margin: 0;
        transform: translate(-50%, -130%);
      }
    }
  }
}

.fusion-image-before-after-before-label {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition-duration: 0.5s;
  transition-property: opacity;
  opacity: 0;

  &:before {
    color: #fff;
    letter-spacing: 0.1em;
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    line-height: normal;
    padding: 2% 3.8%;
    border-radius: 2px;
    content: attr(data-content);
  }
}

.fusion-image-before-after-after-label {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition-duration: 0.5s;
  transition-property: opacity;
  opacity: 0;

  &:before {
    color: #fff;
    letter-spacing: 0.1em;
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    line-height: normal;
    padding: 2% 3.8%;
    border-radius: 2px;
    content: attr(data-content);
  }
}

.fusion-image-before-after-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition-duration: 0.5s;
  transition-property: background;
  background: transparent;
  z-index: 25;

  &:hover {
    background: rgba(0, 0, 0, 0.5);

    .fusion-image-before-after-after-label {
      opacity: 1;
    }

    .fusion-image-before-after-before-label {
      opacity: 1;
    }
  }
}

.fusion-image-before-after-left-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  border-right: 6px solid #fff;
  left: 50%;
  margin-left: -17px;
}

.fusion-image-before-after-right-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  top: 50%;
  margin-top: -6px;
  border-left: 6px solid #fff;
  right: 50%;
  margin-right: -17px;
}

.fusion-image-before-after-up-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  left: 50%;
  margin-left: -6px;
  border-bottom: 6px solid #fff;
  top: 50%;
  margin-top: -17px;
}

.fusion-image-before-after-down-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute;
  left: 50%;
  margin-left: -6px;
  border-top: 6px solid #fff;
  bottom: 50%;
  margin-bottom: -17px;
}

.fusion-image-before-after-container {
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  user-select: none;

  img {
    max-width: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    display: block;
  }

  * {
    box-sizing: content-box;
  }
}

.fusion-image-before-after-container.active {
  .fusion-image-before-after-overlay {
    background: transparent;

    .fusion-image-before-after-before-label {
      opacity: 0;
    }

    .fusion-image-before-after-after-label {
      opacity: 0;
    }
  }

  &:hover.fusion-image-before-after-overlay {
    background: transparent;

    .fusion-image-before-after-before-label {
      opacity: 0;
    }

    .fusion-image-before-after-after-label {
      opacity: 0;
    }
  }
}

.fusion-image-before-after-before {
  z-index: 20;
}

.fusion-image-before-after-after {
  z-index: 10;
}

.fusion-image-before-after-handle {
  height: 38px;
  width: 38px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #fff;
  border-radius: 1000px;
  box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);
  z-index: 40;
  cursor: pointer;
  /* Handle Square */
  &.fusion-image-before-after-handle-square {
    border-radius: 0;

    .fusion-image-before-after-left-arrow {
      margin: 0;
      transform: translate(-130%, -50%);
    }

    .fusion-image-before-after-right-arrow {
      margin: 0;
      transform: translate(130%,-50%);
    }
  }
}
//
// Image switch.
//

.fusion-image-switch {
  display: inline-block;
  position: relative;
  max-width: 100%;

  img {
    transition: 0.5s ease;

    &:first-child {
      opacity: 1;
    }

    &:last-child {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  &:hover {
    img {
      &:first-child {
        opacity: 0;
      }

      &:last-child {
        opacity: 1;
      }
    }
  }
}
/* Label Out Image */
.before-after-label-out-image-up-down {
  opacity: 1;
  position: relative;
  padding: 0;
  line-height: normal;
  visibility: hidden;

  &.fusion-image-before-after-before-label {
    margin-bottom: 0.5em;
  }

  &.fusion-image-before-after-after-label {
    margin-top: 0.5em;
  }

  &:before {
    position: static;
    padding: 0;
    margin: 0;
    letter-spacing: 2px;
    line-height: normal;
  }

  &.visible {
    visibility: visible;
		height: auto !important;
  }
}

.fusion-image-before-after-after-label {
  &.before-after-label-out-image-up-down {
    text-align: right;
  }
}
/* RTL */
.rtl {
  .fusion-image-before-after-horizontal {
    .fusion-image-before-after-after-label {
      &:before {
        right: auto;
        left: 10px;
      }
    }

    .fusion-image-before-after-before-label {
      &:before {
        left: auto;
        right: 10px;
      }
    }
  }

  .fusion-image-before-after-after-label {
    &.before-after-label-out-image-up-down {
      text-align: left;
    }
  }

  .fusion-image-before-after-wrapper {
    &.fusion-image-before-after-horizontal {
      .fusion-image-before-after-overlay {
        &.before-after-overlay-image-up-down {
          .fusion-image-before-after-before-label {
            &:before {
              left: auto;
              right: 0;
            }
          }

          .fusion-image-before-after-after-label {
            &:before {
              left: 0;
              right: auto;
            }
          }
        }
      }
    }

    &.fusion-image-before-after-vertical {
      .fusion-image-before-after-overlay {
        &.before-after-overlay-image-up-down {
          .fusion-image-before-after-before-label {
            &:before {
              left: auto;
              right: 0;
            }
          }

          .fusion-image-before-after-after-label {
            &:before {
              left: 0;
              right: auto;
            }
          }
        }
      }
    }
  }
}

.fusion-image-before-after-wrapper {
  &.fusion-image-before-after-vertical {
    .fusion-image-before-after-after-label,
    .fusion-image-before-after-before-label {
      &.before-after-label-out-image-up-down,
      &.before-after-label-out-image-up-down {
        text-align: center;
      }
    }
  }
}