.image-crop-host {
  position: relative;
}

.image-crop-overlay {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.image-crop-overlay[hidden] {
  display: none !important;
}

.image-crop-selection {
  position: absolute;
  box-sizing: border-box;
  border: 1px dashed rgba(255, 255, 255, .88);
  box-shadow: 0 0 0 1px rgba(20, 30, 36, .55);
  pointer-events: auto;
  cursor: move;
  touch-action: none;
}

.image-crop-handle {
  position: absolute;
  display: block;
  box-sizing: border-box;
  touch-action: none;
}

.image-crop-handle-n,
.image-crop-handle-s {
  left: 8px;
  right: 8px;
  height: 14px;
  cursor: ns-resize;
}

.image-crop-handle-n { top: -7px; }
.image-crop-handle-s { bottom: -7px; }

.image-crop-handle-e,
.image-crop-handle-w {
  top: 8px;
  bottom: 8px;
  width: 14px;
  cursor: ew-resize;
}

.image-crop-handle-e { right: -7px; }
.image-crop-handle-w { left: -7px; }

.image-crop-handle-ne,
.image-crop-handle-se,
.image-crop-handle-sw,
.image-crop-handle-nw {
  width: 16px;
  height: 16px;
}

.image-crop-handle-ne { right: -8px; top: -8px; cursor: nesw-resize; }
.image-crop-handle-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.image-crop-handle-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.image-crop-handle-nw { left: -8px; top: -8px; cursor: nwse-resize; }

.image-crop-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(20, 30, 36, .65);
  background: rgba(255, 255, 255, .92);
  transform: translate(-50%, -50%);
}

.image-crop-overlay.is-disabled .image-crop-selection,
.image-crop-overlay.is-disabled .image-crop-handle {
  pointer-events: none;
}

.image-crop-overlay.is-disabled .image-crop-selection {
  opacity: .45;
}

.image-crop-overlay.is-interacting .image-crop-selection {
  border-style: solid;
}

.image-crop-overlay.is-circle .image-crop-selection {
  border-radius: 50%;
}

.image-crop-overlay.is-circle .image-crop-handle {
  width: 16px;
  height: 16px;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
}

.image-crop-overlay.is-circle .image-crop-handle-n { left: 50%; top: 0; }
.image-crop-overlay.is-circle .image-crop-handle-e { left: 100%; top: 50%; }
.image-crop-overlay.is-circle .image-crop-handle-s { left: 50%; top: 100%; }
.image-crop-overlay.is-circle .image-crop-handle-w { left: 0; top: 50%; }
.image-crop-overlay.is-circle .image-crop-handle-ne { left: 85.355%; top: 14.645%; }
.image-crop-overlay.is-circle .image-crop-handle-se { left: 85.355%; top: 85.355%; }
.image-crop-overlay.is-circle .image-crop-handle-sw { left: 14.645%; top: 85.355%; }
.image-crop-overlay.is-circle .image-crop-handle-nw { left: 14.645%; top: 14.645%; }