/*	–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
	CORE/FORM/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
 */

/* Bootstrap override (will use box style instead) */
.form-input--self.form-control {
	border: none !important;
}

.form-input--self.form-control,
.form-input--self.form-control:focus {
	outline				: none			!important;
	box-shadow			: none			!important;
	border-radius		: 0				!important;
	background-color	: transparent	!important;
}

.form-select {
	background-color	: transparent;
	border				: none;
	border-color		: transparent;
	color				: unset;
}

textarea {
	resize: none;
}

.form-switch .form-check-input {
	margin-left: unset;
}

.form-switch {
	padding-left: unset;
}

.form-check .form-check-input {
	float		: unset;
	margin-left	: unset;
}

/*	#region		Check accent */

/*	Bootstrap 5.3 compiled writes its blue as a literal in every control rule rather
	than reading --bs-primary, and `appearance: none` on these boxes rules out
	`accent-color`. So the hex lives here once, as the fallback of a single token */
:root {
	--form-accent-color: #0d6efd;
}

.form-check-input:checked,
.form-check-input[type='checkbox']:indeterminate {
	background-color	: var(--form-accent-color)	!important;
	border-color		: var(--form-accent-color)	!important;
}

/*	A `bcp-*` on the box itself outranks the rule above, which is how a site overrides
	the accent per input — but that class paints unconditionally, and an unticked box
	must read empty, so the colour is held back until it is checked */
.form-check-input[class^='bcp-']:not(:checked),
.form-check-input[class*=' bcp-']:not(:checked) {
	background-color: transparent !important;
}

/*	#endregion	Check accent */

/*	#region		Option hover */

/*	The theme paints the hovered row with bootstrap's blue, written into the rule. The
	token holds the same value, so the look is unchanged, and it lives here rather than
	inside a theme selector */
:root {
	--form-option-hover-background: var(--bs-primary);
}

/*	Colour is deliberately absent: the theme's white loses to the row's own `cp-*` by
	load order, so the text keeps whatever the content configured. Setting it here
	would outrank that and force one colour on every site */
.selector-dropdown .form-check:hover,
.multiselector-dropdown .form-check:hover {
	background-color: var(--form-option-hover-background) !important;
}

/*	A `bcp-*` on the row is how a site sets its own hover colour: it wins over the
	token above while hovered, and is held back outside it — the class paints
	unconditionally, and an option row must not read as selected at rest */
.multiselector-dropdown .form-check[class*=' bcp-']:hover,
.selector-dropdown .form-check[class*=' bcp-']:hover {
	background-color: var(--background-color-primary) !important;
}

.multiselector-dropdown .form-check[class*=' bcp-']:not(:hover),
.selector-dropdown .form-check[class*=' bcp-']:not(:hover) {
	background-color: transparent !important;
}

/*	#endregion	Option hover */

/*	#region		Label placement */

/*	Bootstrap styles the floating label only; outside `.form-floating` a label is
	a bare inline element */
.form-input--label--stacked {
	display			: block;
	margin-bottom	: .5rem;
}

/*	Bootstrap sizes only `.form-floating` as an input-group child — without this
	the wrapper shrinks to its content, leaving the input narrower than its box
	(validation icon adrift, autofill stopping short of the right edge) */
.input-group > .form-input--stacked {
	flex		: 1 1 auto;
	width		: 1%;
	min-width	: 0;
}

.input-group > .form-input--stacked:focus-within {
	z-index: 5;
}

/*	#endregion	Label placement */

/*	#region		Input height */

.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
	height			: calc((3.5rem + calc(var(--bs-border-width) * 2)) * var(--input-height)) !important;
	--input-height	: 1;
}

/*	`FormInputHeight` multiplies whatever base the field carries, so a stacked
	field needs its own rule — anchored on `.form-floating`, `fih-*` would go
	silently dead the moment the label leaves the field */
.form-input--stacked > .form-control,
.form-input--stacked > .form-control-plaintext,
.form-input--stacked > .form-select {
	height			: calc((2.75rem + calc(var(--bs-border-width) * 2)) * var(--input-height)) !important;
	--input-height	: 1;
}

.fih-1 {
	--input-height: 1 !important;
}

.fih-2 {
	--input-height: 2 !important;
}

.fih-3 {
	--input-height: 3 !important;
}

.fih-4 {
	--input-height: 4 !important;
}

.fih-5 {
	--input-height: 5 !important;
}

/*	#endregion	Input height */

/*	#region		Selector */

/*	`.form-select` already draws the arrow as a background image, and the toggle's
	caret is inline-block following a block-level input — so it lands on its own
	line below the field instead of beside the arrow */
.selector-toggler.dropdown-toggle::after,
.multiselector-toggler.dropdown-toggle::after {
	content: none;
}

/*	The box is not floated here (see `.form-check .form-check-input` above), so flex
	is what keeps box and label on one line. Stretch, not center, so the label below
	fills the row's height and the whole strip ticks the box — not just the text line */
.multiselector-dropdown .form-check {
	align-items	: stretch;
	display		: flex;
	gap			: 0.5em;
	position	: relative;
}

.multiselector-dropdown .form-check .form-check-input {
	align-self	: center;
	flex		: 0 0 auto;
}

/*	The label takes the leftover width and height, widening the target that ticks the
	box. It deliberately carries no `.form-check-label`: bootstrap paints that class
	green inside `.was-validated`, and an optional checkbox is always `:valid` */
.multiselector-dropdown .form-check > label {
	align-items	: center;
	display		: flex;
	flex		: 1;
	user-select	: none;
}

/*	Flex cannot reach the row's own padding, so the target stayed narrower than the
	strip the hover state paints. The label projects a sheet over the whole row, which
	makes the two areas agree — a click on it reaches the box, since it is its label */
.multiselector-dropdown .form-check > label::before {
	content		: '';
	inset		: 0;
	position	: absolute;
}

/*	Same reason, on the box itself: these are UI, not fields — the submitted value
	lives in the hidden input — so bootstrap's success paint has nothing to report.
	Only the unticked border needs saying; the check accent region covers the rest */
.multiselector-dropdown .form-check-input:valid {
	border-color: var(--bs-border-color);
}

/*	#endregion	Selector */