// 20/20 Class Prefix
$pluginPrefix: "jdb-beforeafter" !default;

// 20/20 Handle Styles
$twenty20-handle-color: #fff !default;
$twenty20-handle-stroke: 3px !default;
$twenty20-handle-circle-width: 38px !default;
$twenty20-handle-box-shadow: 0px 0px 12px rgba(#333, 0.5) !default;
$twenty20-handle-triangle-color: $twenty20-handle-color !default;
$twenty20-handle-triangle-size: 6px !default;
$twenty20-handle-triangle-position: 5px !default;
$twenty20-handle-radius: 1000px !default;

// 20/20 Overlay Styles
$twenty20-overlay-bg: rgba(#000, 0.5) !default;
$twenty20-overlay-label-color: #fff !default;
$twenty20-overlay-label-bg: rgba(#fff, .2) !default;
$twenty20-overlay-label-height: 38px !default;
$twenty20-overlay-label-width: 90px !default;
$twenty20-overlay-label-padding: 20px !default;
$twenty20-overlay-label-font-size: 13px !default;
$twenty20-overlay-label-letter-spacing: 0.1em !default;
$twenty20-label-radius: 2px !default;

// 20/20 Placeholders
%handle-content {
  content: " ";
  display: block;
  background: $twenty20-handle-color;
  position: absolute;
  z-index: 30;
  // @include box-shadow($twenty20-handle-box-shadow);
}

%handle-position-horizontal {
  width: $twenty20-handle-stroke;
  height: 9999px;
  left: 50%;
  margin-left: -($twenty20-handle-stroke / 2);
}

%handle-position-vertical {
  width: 9999px;
  height: $twenty20-handle-stroke;
  top: 50%;
  margin-top: -($twenty20-handle-stroke / 2);
}

%absolute-wh-position {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

%overlay-transition-duration {
  transition-duration: 0.5s;
}

%label-transition-property {
  transition-property: opacity;
}

%label-text {
  color: $twenty20-overlay-label-color;
  font-size: $twenty20-overlay-label-font-size;
  letter-spacing: $twenty20-overlay-label-letter-spacing;
  margin: 10px;
}

%label-structure {
  background: $twenty20-overlay-label-bg;
  line-height: $twenty20-overlay-label-height;
  padding: 0 $twenty20-overlay-label-padding;
  border-radius: $twenty20-label-radius;
}

%label-position-horizontal {
  top: 50%;
  margin-top: -($twenty20-overlay-label-height / 2);
}

%label-position-vertical {
  left: 50%;
  margin-left: -($twenty20-overlay-label-width / 2);
  text-align: center;
  width: $twenty20-overlay-label-width;
}

%css-triangle {
  width: 0;
  height: 0;
  border: $twenty20-handle-triangle-size inset transparent;
  position: absolute;
}

%css-triangle-horizontal {
  @extend %css-triangle;
  top: 50%;
  margin-top: -$twenty20-handle-triangle-size;
}

%css-triangle-vertical {
  @extend %css-triangle;
  left: 50%;
  margin-left: -$twenty20-handle-triangle-size;
}

.jdb-beforeafter-wrapper {
  max-width: 100%;
}

// 20/20 Container
.#{$pluginPrefix}-container {
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;

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

  &.active .#{$pluginPrefix}-overlay,
  &.active :hover.#{$pluginPrefix}-overlay {
    background: rgba(#000, 0);

    .#{$pluginPrefix}-before-label,
    .#{$pluginPrefix}-after-label {
      opacity: 0;
    }
  }

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

// 20/20 Before Label
.#{$pluginPrefix}-before-label {
  @extend %absolute-wh-position;
  @extend %label-transition-property;
  @extend %overlay-transition-duration;
  opacity: 0;

  &:before {
    @extend %label-structure;
    @extend %label-text;
    content: attr(data-content);
  }
}

// 20/20 After Label
.#{$pluginPrefix}-after-label {
  @extend %absolute-wh-position;
  @extend %label-transition-property;
  @extend %overlay-transition-duration;
  opacity: 0;

  &:before {
    @extend %label-structure;
    @extend %label-text;
    content: attr(data-content);
  }
}

// 20/20 Horizontal Labels
.#{$pluginPrefix}-horizontal .#{$pluginPrefix}-before-label {
  flex-direction: column;

  &:before {
    // @extend %label-position-horizontal;
    // left: 10px;
    align-self: flex-start;
  }
}

.#{$pluginPrefix}-horizontal .#{$pluginPrefix}-after-label {
  flex-direction: column;

  &:before {
    // @extend %label-position-horizontal;
    // right: 10px;
    align-self: flex-end;
  }
}

// 20/20 Vertical Labels
.#{$pluginPrefix}-vertical .#{$pluginPrefix}-before-label {

  &:before {
    align-self: flex-start;
  }
}

.#{$pluginPrefix}-vertical .#{$pluginPrefix}-after-label {

  &:before {
    align-self: flex-end;
  }
}

// 20/20 Overlay
.#{$pluginPrefix}-horizontal .#{$pluginPrefix}-overlay {
  flex-direction: column;
}

.#{$pluginPrefix}-overlay {
  @extend %absolute-wh-position;
  @extend %overlay-transition-duration;
  transition-property: background;
  background: rgba(#000, 0);
  z-index: 25;

  &:hover {
    background: $twenty20-overlay-bg;

    .#{$pluginPrefix}-after-label {
      opacity: 1;
    }

    .#{$pluginPrefix}-before-label {
      opacity: 1;
    }
  }

  &.hovered {
    background: $twenty20-overlay-bg;

    .#{$pluginPrefix}-after-label {
      opacity: 1;
    }

    .#{$pluginPrefix}-before-label {
      opacity: 1;
    }
  }
}

.#{$pluginPrefix}-before {
  z-index: 20;
}

.#{$pluginPrefix}-after {
  z-index: 10;
}

// 20/20 Handle Styles
.#{$pluginPrefix}-handle {
  height: $twenty20-handle-circle-width;
  width: $twenty20-handle-circle-width;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -($twenty20-handle-circle-width/2) - $twenty20-handle-stroke;
  margin-top: -($twenty20-handle-circle-width/2) - $twenty20-handle-stroke;
  border: $twenty20-handle-stroke solid $twenty20-handle-color;
  border-radius: $twenty20-handle-radius;
  box-shadow: $twenty20-handle-box-shadow;
  z-index: 40;
  cursor: pointer;
}

// 20/20 Horizontal Handle Styles
.#{$pluginPrefix}-horizontal .#{$pluginPrefix}-handle {

  &:before {
    @extend %handle-content;
    @extend %handle-position-horizontal;
    bottom: 50%;
    margin-bottom: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
    box-shadow: 0 $twenty20-handle-stroke 0 $twenty20-handle-color, $twenty20-handle-box-shadow;
  }

  &:after {
    @extend %handle-content;
    @extend %handle-position-horizontal;
    top: 50%;
    margin-top: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
    box-shadow: 0 (-$twenty20-handle-stroke) 0 $twenty20-handle-color, $twenty20-handle-box-shadow;
  }
}

// 20/20 Vertical Handle Styles
.#{$pluginPrefix}-vertical .#{$pluginPrefix}-handle {

  &:before {
    @extend %handle-content;
    @extend %handle-position-vertical;
    left: 50%;
    margin-left: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
    box-shadow: $twenty20-handle-stroke 0 0 $twenty20-handle-color, $twenty20-handle-box-shadow;
  }

  &:after {
    @extend %handle-content;
    @extend %handle-position-vertical;
    right: 50%;
    margin-right: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
    box-shadow: (-$twenty20-handle-stroke) 0 0 $twenty20-handle-color, $twenty20-handle-box-shadow;
  }
}

// 20/20 Left Handle
.#{$pluginPrefix}-left-arrow {
  border-right: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
  left: 50%;
  margin-left: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
  @extend %css-triangle-horizontal;
}

// 20/20 Right Handle
.#{$pluginPrefix}-right-arrow {
  border-left: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
  right: 50%;
  margin-right: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
  @extend %css-triangle-horizontal;
}

// 20/20 Up Handle
.#{$pluginPrefix}-up-arrow {
  border-bottom: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
  top: 50%;
  margin-top: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
  @extend %css-triangle-vertical;
}

// 20/20 Down Handle
.#{$pluginPrefix}-down-arrow {
  border-top: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
  bottom: 50%;
  margin-bottom: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
  @extend %css-triangle-vertical;
}