/*	–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	CORE/IMAGE/CLASSES.CSS
	–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

	VISIOFRAMEWORK
	This file is part of VISIOFRAMEWORK.
	@package	visioframework
	@author		Agência Visio <contato@agenciavisio.com.br>
	@copyright	Copyright (c) 2023-present. M. Souza & Souza LTDA. (CNPJ: 21.284.748/0001-33). All rights reserved.
	@license	Proprietary
	@link		https://www.agenciavisio.com.br
	–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

	Focal cropper. Lives with the module rather than in a page's <style> so the
	image-inventory modals and the image-converter can share one markup, one
	factory and one set of rules instead of three drifting copies. */

.image-focal-stage {
	position		: relative;
	background		: rgba(0, 0, 0, 0.35);
	border			: 1px solid rgba(255, 255, 255, 0.15);
	border-radius	: 6px;
	padding			: 0.5rem;
	display			: flex;
	align-items		: center;
	justify-content	: center;
	min-height		: 8rem;
}
.image-focal-canvas {
	display			: block;
	max-width		: 100%;
	height			: auto;
	border-radius	: 4px;
	cursor			: grab;
	touch-action	: none;
}
.image-focal-canvas.is-panning {
	cursor			: grabbing;
}
.image-focal-canvas.is-empty {
	display			: none;
}
/*	Anchor pad sits beside the canvas rather than under it: the panel already
	competes with the preview for height, and a column steals only width. */
.image-focal-anchors {
	display				: grid;
	grid-template-columns: repeat(3, 1.4rem);
	gap					: 0.25rem;
	flex				: 0 0 auto;
	margin-right		: 0.6rem;
}
.image-focal-anchor-cell {
	width			: 1.4rem;
	height			: 1.4rem;
	display			: flex;
	align-items		: center;
	justify-content	: center;
	padding			: 0;
	border			: 1px solid rgba(255, 255, 255, 0.25);
	border-radius	: 4px;
	background		: transparent;
	color			: rgba(255, 255, 255, 0.6);
	font-size		: 0.8rem;
	line-height		: 1;
	cursor			: pointer;
}
.image-focal-anchor-cell:hover {
	background		: rgba(255, 255, 255, 0.12);
	border-color	: #4ade80;
	color			: #ffffff;
}
.image-focal-anchor-cell.is-active {
	background		: rgba(74, 222, 128, 0.25);
	border-color	: #4ade80;
	color			: #ffffff;
}
/*	The widest thing on its row on purpose: zoom is the control the operator
	nudges most, and a short track makes fine adjustment impossible. */
.image-focal-zoom {
	max-width		: 22rem;
	width			: 22rem;
}
.image-focal-num {
	width			: 6rem;
	flex			: 0 0 auto;
}
/*	Spinners steal a third of a 6rem field and step by the wrong amount
	for a 0.0001 focal — the slider and the drag are the coarse controls. */
.image-focal-num::-webkit-outer-spin-button,
.image-focal-num::-webkit-inner-spin-button {
	-webkit-appearance	: none;
	margin				: 0;
}
.image-focal-num {
	-moz-appearance	: textfield;
	appearance		: textfield;
}
.image-focal-readout.is-warning {
	color			: #fbbf24 !important;
}