$handleSize: 10px;
$handleBorder: 1px rgba(127,127,127,0.8) solid;
$handleOffset: 7px;
$handleBackground: rgba(255,255,255,0.8);

@import 'handles-mixin';

.jcrop-widget .jcrop-handle {
  display: none;
  @include jcrop-handles(
    $handleSize,
    $handleOffset,
    $handleBorder,
    $handleBackground
  );
}

.jcrop-widget.active .jcrop-handle {
  display: block;
}

.jcrop-widget {
  position: absolute;
  box-sizing: border-box;
  border: 1px white dashed;
  opacity: 0.7;
  background: transparent;
  transition: opacity 1s;
  padding:0;
  margin:0;
  cursor: move;

  &:hover {
    transition: opacity 0.8s;
    opacity: 0.8;
  }

  &:focus {
    transition: opacity 0.5s;
    opacity: 1;
    outline-style: auto;
    outline-width: 3px;
    outline-color: rgba(0,0,0,0.3);
  }
}

.jcrop-shade {
  background: rgba(0,0,0,0.5);
  transition: opacity 0.4s, background-color 0.7s;
  position: absolute;
  &.l { top: 0px; left: 0px; height: 100%; }
  &.r { top: 0px; right: 0px; height: 100%; }
  &.t { top: 0px; }
  &.b { bottom: 0px; }
}

.jcrop-stage {
  position: absolute;
  width: 100%;
}

.jcrop-image-stage img {
  position: absolute;
  z-index: -1;
}

.jcrop-ux-inactive-handles .jcrop-widget .jcrop-handle {
  display: block;
}

.jcrop-widget img {
  width: 100%;
  height: auto;
}

.jcrop-ux-fade-more {
  .jcrop-widget {
    opacity: 0.25;

    &:hover {
      transition: opacity 0.4s;
      opacity: 0.8;
    }

    &:focus {
      transition: opacity 0.5s;
      opacity: 1;
      outline-style: auto;
      outline-width: 3px;
      outline-color: rgba(0,0,0,0.3);
    }
  }
}

.jcrop-ux-fade-more {
  .jcrop-widget {
    opacity: 0.25;
    &:hover { opacity: 0.65; }
  }
}

.jcrop-ux-keep-current {
  .jcrop-widget.active {
    opacity: 1;
    outline-style: auto;
    outline-width: 3px;
    outline-color: rgba(0,0,0,0.3);
  }
}

.jcrop-ux-no-outline {
  .jcrop-widget { outline: none !important; }
}

.jcrop-disable.jcrop-stage {
  opacity: .8;
  .jcrop-widget { outline: none !important; }
}