/* ==========================================================================
   Override styles provided from cropperJS.
   Applying the .easel selector to win on specificity and to keep the
   styles componentised.
   ========================================================================== */

.easel .cropper-drag-box, .easel .cropper-face {
    background-color: transparent;
}

.easel .cropper-canvas {
    background-color: #bdbdbd;
    background-image:
      linear-gradient(45deg, white 25%, transparent 25%),
      linear-gradient(135deg, white 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, white 75%),
      linear-gradient(135deg, transparent 75%, white 75%);

    background-size: 20px 20px;

    background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
    opacity: .5;
}

.easel .cropper-view-box :first-child {
  display: block;
  height: 100%;
  outline: 1px solid #39f;
  outline-color: rgba(51, 153, 255, 0.75);
  overflow: hidden;
  width: 100%;
  background-color: #bdbdbd;
  background-image:
    linear-gradient(45deg, white 25%, transparent 25%),
    linear-gradient(135deg, white 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, white 75%),
    linear-gradient(135deg, transparent 75%, white 75%);

  background-size: 20px 20px;

  background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
}

/* circle guideline, works on any ratio (centered and with diameter the smaller of height/width) */
.easel.circular-guideline .cropper-crop-box::after {
  display: block;
  content: "";
  position: relative; /* can't be absolute otherwise aspect-ratio doesn't work */
  aspect-ratio: 1 / 1;
  max-width: 100%;
  max-height: 100%;
  border: 1px white dashed;
  mix-blend-mode: difference;
  border-radius: 50%;
  box-sizing: border-box;
  left: 50%;
  top: -50%; /* because position relative, we need to move it up by half the height of the container */
  transform: translate(-50%, -50%); /* center the circle, these percentages refer to the circles own x & y */
  pointer-events: none;
}

.easel.circular-mask .cropper-crop-box::after {
  display: none;
}
/* circular mask, only works on 1:1 */
.easel.circular-mask .cropper-view-box {
  border-radius: 50%;
}

/* GUTTERS to show what will be clipped if the 5:3 crop is used in 5:4 space */
.easel.hide-vertical-warning-gutters .cropper-view-box::before,
.easel.hide-vertical-warning-gutters .cropper-view-box::after {
  visibility: hidden;
}
.easel.vertical-warning-gutters .cropper-view-box::before,
.easel.vertical-warning-gutters .cropper-view-box::after {
  display: block;
  content: '';
  position: absolute;
  z-index: 999;
  width: 12.5%;
  top: 0;
  bottom: 0;
  mix-blend-mode: difference;
  opacity: 0.5;
  pointer-events: none;
}
.easel.vertical-warning-gutters .cropper-view-box::before { /* left gutter */
  left: 0;
  background: repeating-linear-gradient(-45deg,  transparent,  white 1px,  transparent 3px,  transparent 6px);
}
.easel.vertical-warning-gutters .cropper-view-box::after { /* right gutter */
  right: 0;
  background: repeating-linear-gradient(45deg,  transparent,  white 1px,  transparent 3px,  transparent 6px);
}