/**
 * ImagePicker recipe — layout for the pick / preview / adjust composition.
 *
 * Owns ONLY the orchestration chrome: the vertical stack, the preview box (with
 * the data-rotation transform), and the floating rotate/remove toolbar. The
 * dropzone (FileUpload), the image (Image) and the sliders (ImageAdjustments)
 * bring their own recipes.
 *
 * Tokens: `--image-picker-*` (public, themeable) from `recipes/base.ts`.
 */

[data-image-picker] {
	display: flex;
	flex-direction: column;
	gap: var(--image-picker-gap);
}

[data-image-picker][data-disabled] {
	opacity: 0.6;
}

[data-image-picker-preview] {
	position: relative;
	aspect-ratio: var(--image-picker-preview-aspect);
	border-radius: var(--image-picker-preview-radius);
	background: var(--image-picker-preview-bg);
	border: 1px solid var(--image-picker-preview-border);
	overflow: hidden;
}

/* The canvas holds the <Image> and carries the rotation transform, so the
   floating toolbar (a sibling) stays upright. */
.eidos-image-picker-canvas {
	position: absolute;
	inset: 0;
	transition: transform var(--duration-fast) var(--ease-default);
}

/* The composed <Image> fills the canvas so its object-fit has the full box to
   act on. Plain `> *` (NOT `:global(*)` — this is a plain CSS file, where the
   Svelte `:global()` wrapper is invalid and would drop the rule). */
.eidos-image-picker-canvas > * {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}

[data-image-picker-preview][data-rotation='90'] .eidos-image-picker-canvas {
	transform: rotate(90deg);
}
[data-image-picker-preview][data-rotation='180'] .eidos-image-picker-canvas {
	transform: rotate(180deg);
}
[data-image-picker-preview][data-rotation='270'] .eidos-image-picker-canvas {
	transform: rotate(270deg);
}

[data-image-picker-toolbar] {
	position: absolute;
	inset-block-start: var(--image-picker-toolbar-inset);
	inset-inline-end: var(--image-picker-toolbar-inset);
	display: flex;
	gap: var(--image-picker-toolbar-gap);
}

[data-image-picker-rotate],
[data-image-picker-remove] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--image-picker-button-size);
	block-size: var(--image-picker-button-size);
	border: 1px solid var(--image-picker-button-border);
	border-radius: var(--image-picker-button-radius);
	background: var(--image-picker-button-bg);
	color: var(--image-picker-button-fg);
	font-size: var(--image-picker-button-font-size);
	line-height: 1;
	cursor: pointer;
}

[data-image-picker-rotate]:hover:not([disabled]),
[data-image-picker-remove]:hover:not([disabled]) {
	background: var(--color-surface-default);
}

[data-image-picker-rotate]:focus-visible,
[data-image-picker-remove]:focus-visible {
	outline: var(--focus-ring-width) solid var(--color-focus-ring);
	outline-offset: 2px;
}

[data-image-picker-rotate][disabled],
[data-image-picker-remove][disabled] {
	opacity: 0.5;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.eidos-image-picker-canvas {
		transition: none;
	}
}

@media (forced-colors: active) {
	[data-image-picker-rotate]:focus-visible,
	[data-image-picker-remove]:focus-visible {
		outline-color: Highlight;
	}
}