.canvas-image-frame.is-cropping {
  overflow: visible;
}

.canvas-image-frame.is-cropping .canvas-image-size {
  visibility: hidden;
}

.canvas-crop-overlay {
  position: absolute;
  z-index: 12;
  touch-action: none;
}

.canvas-crop-selection {
  position: absolute;
  border: 1px solid #00afe9;
  box-shadow: 0 0 0 9999px rgb(15 23 42 / 48%);
  cursor: move;
}

.canvas-crop-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      to right,
      transparent 33.2%,
      rgb(255 255 255 / 62%) 33.2%,
      rgb(255 255 255 / 62%) 33.5%,
      transparent 33.5%,
      transparent 66.5%,
      rgb(255 255 255 / 62%) 66.5%,
      rgb(255 255 255 / 62%) 66.8%,
      transparent 66.8%
    ),
    linear-gradient(
      to bottom,
      transparent 33.2%,
      rgb(255 255 255 / 62%) 33.2%,
      rgb(255 255 255 / 62%) 33.5%,
      transparent 33.5%,
      transparent 66.5%,
      rgb(255 255 255 / 62%) 66.5%,
      rgb(255 255 255 / 62%) 66.8%,
      transparent 66.8%
    );
}

.canvas-crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #00afe9;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}

.canvas-crop-handle.is-nw { left: 0; top: 0; cursor: nwse-resize; }
.canvas-crop-handle.is-n { left: 50%; top: 0; cursor: ns-resize; }
.canvas-crop-handle.is-ne { left: 100%; top: 0; cursor: nesw-resize; }
.canvas-crop-handle.is-e { left: 100%; top: 50%; cursor: ew-resize; }
.canvas-crop-handle.is-se { left: 100%; top: 100%; cursor: nwse-resize; }
.canvas-crop-handle.is-s { left: 50%; top: 100%; cursor: ns-resize; }
.canvas-crop-handle.is-sw { left: 0; top: 100%; cursor: nesw-resize; }
.canvas-crop-handle.is-w { left: 0; top: 50%; cursor: ew-resize; }

.canvas-crop-controls {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.canvas-crop-ratio-wrap {
  position: relative;
  width: 100px;
  height: 28px;
  flex: 0 0 100px;
  align-self: center;
}

.canvas-crop-ratio,
.canvas-crop-control {
  box-sizing: border-box;
  height: 28px;
  min-height: 28px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid #d0d5dd;
  border-color: rgb(0 175 233 / 28%);
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 8px rgb(37 78 101 / 10%);
  color: #344054;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

.canvas-crop-ratio {
  display: block;
  width: 100%;
  appearance: none;
  padding: 0 22px 0 8px;
  text-align-last: center;
}

.canvas-crop-ratio option {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.canvas-crop-ratio,
.canvas-crop-confirm,
.canvas-crop-restore,
.canvas-crop-cancel {
  font-size: 11px;
  line-height: 16px;
}

.canvas-crop-ratio-icon {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 10px;
  height: 10px;
  pointer-events: none;
  fill: none;
  stroke: #475467;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  transform: translateY(-50%);
}

.canvas-crop-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
}

.canvas-crop-confirm {
  height: 28px;
  min-height: 28px;
  padding-inline: 10px;
  border-color: #00afe9;
  background: linear-gradient(90deg, #00afe9 0%, #5cc8f4 100%);
  box-shadow: 0 2px 8px rgb(0 175 233 / 18%);
  color: #fff;
  font-weight: 400;
}

.canvas-crop-cancel,
.canvas-crop-restore {
  padding-inline: 10px;
  font-weight: 400;
}

.canvas-crop-ratio:hover,
.canvas-crop-control:hover,
.canvas-crop-restore:hover {
  filter: brightness(.98);
}

.canvas-crop-ratio:focus-visible,
.canvas-crop-control:focus-visible,
.canvas-crop-restore:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px rgb(0 175 233 / 18%);
}

.canvas-crop-control:active,
.canvas-crop-restore:active {
  transform: translateY(1px);
}

.canvas-crop-overlay[aria-busy="true"] {
  cursor: progress;
}

.canvas-crop-overlay[aria-busy="true"] .canvas-crop-control,
.canvas-crop-overlay[aria-busy="true"] .canvas-crop-ratio,
.canvas-crop-overlay[aria-busy="true"] .canvas-crop-restore,
.canvas-crop-overlay[aria-busy="true"] .canvas-crop-handle {
  pointer-events: none;
  opacity: .72;
}

@media (max-width: 900px) {
  .canvas-crop-controls {
    max-width: calc(100vw - 32px);
    justify-content: flex-start;
    overflow-x: auto;
  }
}