/*
 * Selected Freeform tile, canvas "16 · Editor – Canvas gallery" (`data-cvi`,
 * `data-cvh`, `data-cvtb`). The canvas values are written out; the colour is
 * the editor's `--mod-se-selection` token. The toolbar itself is
 * `_tile-toolbar.scss`; this file only places it beside the tile.
 */
.modula-gallery-takeover__live-preview {

	.modula-freeform--editor {
		// Keep the tiles' paint order and the chrome above it inside the surface.
		isolation: isolate;
	}

	.modula-freeform-selection {
		position: absolute;
		z-index: 1000;
		box-sizing: border-box;
		// The shared selection outline, outside the tile as on the canvas.
		outline: var(--mod-se-selection-outline);
		pointer-events: none;
	}

	.modula-freeform-selection__handle {
		position: absolute;
		z-index: 2;
		box-sizing: border-box;
		width: 12px;
		height: 12px;
		border: 2px solid var(--mod-se-selection);
		border-radius: 50%;
		background: var(--mod-se-selection-ink);
		pointer-events: auto;
		touch-action: none;

		&.is-nw {
			top: -7px;
			left: -7px;
			cursor: nwse-resize;
		}

		&.is-ne {
			top: -7px;
			right: -7px;
			cursor: nesw-resize;
		}

		&.is-sw {
			bottom: -7px;
			left: -7px;
			cursor: nesw-resize;
		}

		&.is-se {
			right: -7px;
			bottom: -7px;
			cursor: nwse-resize;
		}

		&.is-n,
		&.is-s {
			left: calc(50% - 10px);
			width: 20px;
			height: 8px;
			border-radius: 4px;
			cursor: ns-resize;
		}

		&.is-n {
			top: -5px;
		}

		&.is-s {
			bottom: -5px;
		}

		&.is-w,
		&.is-e {
			top: calc(50% - 10px);
			width: 8px;
			height: 20px;
			border-radius: 4px;
			cursor: ew-resize;
		}

		&.is-w {
			left: -5px;
		}

		&.is-e {
			right: -5px;
		}
	}

	/*
	 * Under the tile while resizing: placed at the tile's bottom edge, its own
	 * bottom 30px below it (canvas `bottom: -30px`), centred. The 11.5px size
	 * is the canvas badge's, outside the whole-pixel type scale on purpose.
	 */
	.modula-freeform-selection__size {
		position: absolute;
		z-index: 1000;
		padding: 2px 7px;
		border-radius: 4px;
		background: var(--mod-se-selection);
		color: var(--mod-se-selection-ink);
		font-family: var(--mod-se-font-mono);
		font-size: 11.5px;
		white-space: nowrap;
		transform: translate(-50%, calc(30px - 100%));
		pointer-events: none;
	}

	// Beside the tile, above the frame (`_tile-toolbar.scss` draws it).
	.modula-tile-toolbar--beside {
		position: absolute;
		z-index: 1001;
	}

	/*
	 * The frame draws the selection outline outside the tile, so the tile's
	 * own inner outline would double it. The toolbar carries the hover trash
	 * while it is shown.
	 */
	.modula-freeform--editor:has(> .modula-freeform-selection) .is-item-selected .modula-gallery-preview-item-admin__select-hit {
		outline: none;
	}

	.modula-freeform--editor:has(.modula-tile-toolbar--beside) .is-item-selected .modula-gallery-preview-item-admin__trash {
		display: none;
	}
}