/* Image stage and resize handles shared by the crop box: Image Cropper and Blur Image. Loaded only on those pages, after tool.css. */

/* Clips the dimming overlay; the padding leaves room for handles at the image edges. */
.cropper {
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-checker-a);
  background-image: conic-gradient(var(--color-checker-b) 25%, transparent 0 50%, var(--color-checker-b) 0 75%, transparent 0);
  background-size: 16px 16px;
}

/* Sized exactly to the rendered image, so percentage positions map to image pixels. */
.cropper__stage {
  position: relative;
  line-height: 0;
  user-select: none;
  -webkit-user-select: none;
}

.cropper__image {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}

.cropper__handle {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-primary);
  border-radius: 3px;
  background: #ffffff;
  touch-action: none;
}

/* Invisible 44px hit area around each handle for touch. */
.cropper__handle::after {
  content: "";
  position: absolute;
  inset: -15px;
}

.cropper__handle--nw { top: -8px; left: -8px; cursor: nwse-resize; }
.cropper__handle--se { bottom: -8px; right: -8px; cursor: nwse-resize; }
.cropper__handle--ne { top: -8px; right: -8px; cursor: nesw-resize; }
.cropper__handle--sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
.cropper__handle--n { top: -8px; left: calc(50% - 7px); cursor: ns-resize; }
.cropper__handle--s { bottom: -8px; left: calc(50% - 7px); cursor: ns-resize; }
.cropper__handle--e { right: -8px; top: calc(50% - 7px); cursor: ew-resize; }
.cropper__handle--w { left: -8px; top: calc(50% - 7px); cursor: ew-resize; }

/* On touch screens, corner handles are enough and edge handles would crowd small crops. */
@media (pointer: coarse) {
  .cropper__handle--n,
  .cropper__handle--s,
  .cropper__handle--e,
  .cropper__handle--w {
    display: none;
  }

  .cropper__handle {
    width: 18px;
    height: 18px;
  }

  .cropper__handle--nw { top: -10px; left: -10px; }
  .cropper__handle--se { bottom: -10px; right: -10px; }
  .cropper__handle--ne { top: -10px; right: -10px; }
  .cropper__handle--sw { bottom: -10px; left: -10px; }
}