cropper.scss

// Handle touch target size — used both for the handle ::before hit area and
// for the inner canvas inset (half the touch target on each side so the full
// reach extends to the crop edge).
$handle-touch-target-size: 44px;

.wp-media-editor-image-editor {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
	touch-action: none;
	user-select: none;
	cursor: grab;

	// Inner gutter for resize handles. Handles use negative offsets and a
	// touch target that extends past the crop edge; the root clips overflow
	// (required for the dimming overlay's box-shadow trick), so a flush
	// handle would be clipped. The inner `__canvas` wrapper is inset by half
	// the touch target, reserving reach room on all sides while keeping the
	// root as the clipping boundary.
	&__canvas {
		position: absolute;
		inset: calc($handle-touch-target-size / 2);
	}

	&--dragging {
		cursor: grabbing;
	}

	&__image {
		position: absolute;
		top: 0;
		left: 0;
		will-change: transform;
		transform-origin: center center;
	}

	&__stencil {
		position: absolute;
		pointer-events: none;
	}

	&__dimming {
		position: absolute;
		pointer-events: none;
		/* Large shadow spread dims everything outside the crop area.
		   Darker at rest for clear crop framing, lighter during drag
		   so the user can see where they're panning. */
		box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
		transition: box-shadow 0.15s ease;
	}

	&--dragging &__dimming {
		box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
	}

	&__grid {
		position: absolute;
		pointer-events: none;
		overflow: hidden;
		transition: opacity 0.2s ease;
	}

	&__grid-line {
		position: absolute;
		background: rgba(255, 255, 255, 0.4);

		&--horizontal {
			left: 0;
			width: 100%;
			height: 1px;
		}

		&--vertical {
			top: 0;
			height: 100%;
			width: 1px;
		}
	}

	&__stencil-rect {
		position: absolute;
		border: 1px solid rgba(255, 255, 255, 0.7);
		box-sizing: border-box;
		pointer-events: none;
	}

	&__handle {
		// Reset native <button> UA styles — the handle is a button for
		// accessibility (native keyboard focus, button semantics), but
		// it's styled as a small draggable circle.
		appearance: none;
		margin: 0;
		padding: 0;
		font: inherit;
		cursor: default;

		position: absolute;
		width: 12px;
		height: 12px;
		background: rgba(255, 255, 255, 0.6);
		border: 1px solid rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		box-sizing: border-box;
		pointer-events: auto;
		transition: background-color 0.15s ease, box-shadow 0.15s ease;

		&:focus {
			outline: none;
		}

		// Double ring (white inner + theme-color outer) for legibility
		// over the dark dimming overlay.
		&:focus-visible {
			background: var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
			border-color: transparent;
			box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-image-editor-focus-color, var(--wp-admin-theme-color, #007cba));
		}

		// Extend touch target to the minimum accessible hit area.
		&::before {
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			width: $handle-touch-target-size;
			height: $handle-touch-target-size;
			transform: translate(-50%, -50%);
		}

		/* Offset by half the handle width (12px / 2 = 6px) to center on crop edge */
		&--n {
			top: -6px;
			left: 50%;
			margin-left: -6px;
			cursor: ns-resize;
		}

		&--s {
			bottom: -6px;
			left: 50%;
			margin-left: -6px;
			cursor: ns-resize;
		}

		&--e {
			top: 50%;
			right: -6px;
			margin-top: -6px;
			cursor: ew-resize;
		}

		&--w {
			top: 50%;
			left: -6px;
			margin-top: -6px;
			cursor: ew-resize;
		}

		&--nw {
			top: -6px;
			left: -6px;
			cursor: nwse-resize;
		}

		&--ne {
			top: -6px;
			right: -6px;
			cursor: nesw-resize;
		}

		&--sw {
			bottom: -6px;
			left: -6px;
			cursor: nesw-resize;
		}

		&--se {
			bottom: -6px;
			right: -6px;
			cursor: nwse-resize;
		}
	}

}