/*
 * What intl-tel-input leaves to the page, for a page this library owns the theme of.
 *
 * Everything here is scoped to what this library created: the ownership marker for a field's own
 * wrapper, and the class tel-input.js stamps on the mobile popup, which the widget appends to
 * document.body where no marker can reach it. An application's own intl-tel-input is left alone.
 *
 * Almost all of it is a rebind of the widget's own --iti-* custom properties rather than a rule
 * overriding one of its rules. intl-tel-input declares its colors that way, which is a real
 * extension point, and using it means no specificity fight, nothing to re-check when the widget
 * changes a selector, and the corrections compose with a theme instead of pinning a value. The one
 * exception is called out where it appears.
 *
 * EVERY COLOR ASKS FOR --bs-* THEN --tblr-*, AND KEEPS A LITERAL.
 *
 * Tabler compiles Bootstrap with its own prefix and ships no --bs-* at all, so a lone
 * var(--bs-body-bg) resolves to nothing there. That is not a fallback to the widget's default: an
 * unresolved var() makes the whole declaration invalid at computed-value time, so the dropdown came
 * out fully transparent with the page showing through it. Measured on the samples page, which runs
 * Tabler: --bs-body-bg empty, --tblr-body-bg #111827. required-marker.css is the worked example for
 * this chain; the literals are Bootstrap's own defaults, for a page that has neither.
 */

/*
 * The width, and this rule holds nothing else.
 *
 * The widget's wrapper is `display: inline-block` with no width, so a .form-control inside it
 * shrinks to its content and stops filling its column: measured on the samples page at 247px inside
 * a 443.5px column, against 427.5px for the text field beside it. Nothing errors and nothing warns;
 * the field is simply the wrong width, which reads as a mistake in the page rather than as a plugin
 * default.
 *
 * intl-tel-input documents this as the application's job, which is right for a plain HTML page and
 * wrong here, where this library owns the grid and every other field it ships fills its column.
 *
 * It applies to the field's own wrapper and never to the mobile popup below, which is a body-level
 * overlay the widget sizes itself.
 */
.iti:has(> [data-bs5-tel]) {
	display: block;
}

/*
 * The colors, and this is a contrast bug rather than a preference.
 *
 * --iti-country-selector-bg is the literal `white`, while the country names take `color: inherit`
 * from the page. Under a dark theme that is near-white text on a white panel: measured at
 * rgb(229, 231, 235) on rgb(255, 255, 255), about 1.1:1, against the 4.5:1 WCAG 1.4.3 asks for. The
 * list is legible in one color mode and not in the other, and nothing reports it.
 *
 * Both selectors are needed and neither covers the other. On a mobile browser the widget defaults
 * useFullscreenPopup to true and appends the country list to document.body instead of leaving it in
 * the field's wrapper, so it is a descendant of nothing carrying the marker. tel-input.js tags that
 * element as it creates it, which is what keeps this scoped to fields this library owns.
 *
 * Two of these were renamed in intl-tel-input 29 and one was deleted: --iti-dropdown-bg became
 * --iti-country-selector-bg, --iti-arrow-color became --iti-icon-color, which now also colors the
 * search and globe glyphs rather than the arrow alone, and --iti-dialcode-color is gone because
 * .iti__selected-dial-code declares only a margin and inherits its color. A rebind of a name the
 * widget no longer reads is a no-op that looks like a fix, which is why the test beside this checks
 * every name against the shipped stylesheet.
 */
.iti:has(> [data-bs5-tel]),
.bs5-tel-popup {
	--iti-country-selector-bg: var(--bs-body-bg, var(--tblr-body-bg, #fff));
	--iti-border-color: var(--bs-border-color, var(--tblr-border-color, #dee2e6));
	--iti-hover-color: var(--bs-tertiary-bg, var(--tblr-bg-surface-tertiary, rgba(0, 0, 0, 0.05)));
	--iti-icon-color: var(--bs-secondary-color, var(--tblr-secondary, #6c757d));
}

/*
 * The country search box, which the widget gives no colors at all.
 *
 * It declares width, `border-width: 0`, a radius and padding, so an input inside a dark-themed page
 * falls through to the browser's own control styling: measured in Chrome at rgb(59, 59, 59) on a
 * panel this file had just made rgb(17, 24, 39), which reads as a lighter box pasted onto the
 * dropdown. The widget's own light-mode design is a search field the same color as the panel with a
 * separator line beneath it, so matching the panel is what it intends, not a compromise. Under a
 * light theme this changes nothing visible.
 *
 * intl-tel-input 29 draws that line on `.iti__search-input-wrapper` as
 * `border-bottom: 1px solid var(--iti-border-color)`, where 25 drew it with an adjacent-sibling
 * rule carrying a literal. It therefore follows the border color rebound above and needs nothing
 * here, which is one fewer rule than this file used to need.
 */
.iti:has(> [data-bs5-tel]) .iti__search-input,
.bs5-tel-popup .iti__search-input {
	/* The panel's own chain, not the form-control one. Matching the panel is the whole point, and
	 * --tblr-bg-forms is not the panel: under Tabler's dark scheme both resolve to #111827 and the
	 * difference is invisible, but on light --tblr-bg-forms is #fff against a #f9fafb panel, so the
	 * search box read as a lighter box on the dropdown - the exact defect this rule exists to fix,
	 * surviving in the other color mode. Measured. */
	background-color: var(--bs-body-bg, var(--tblr-body-bg, #fff));
	color: var(--bs-body-color, var(--tblr-body-color, #212529));
}

/*
 * And its focus ring, which was the browser's: a 3px pure white outline, against the subtle
 * theme-colored ring every other field on the page gets. Replaced with Bootstrap's own shape, which
 * is what `.form-control:focus` draws, so it reads as the same control family.
 *
 * The outline is dropped only because the box-shadow replaces it. Removing one without the other
 * would take the field below WCAG 2.4.7, and forced-colors mode restores a UA outline regardless.
 */
.iti:has(> [data-bs5-tel]) .iti__search-input:focus,
.bs5-tel-popup .iti__search-input:focus {
	outline: 0;
	box-shadow: 0 0 0 0.25rem
		var(--bs-focus-ring-color, var(--tblr-focus-ring-color, rgba(13, 110, 253, 0.25)));
}

/*
 * The one plain-property override on the dropdown itself, because this one is not a variable.
 *
 * The inline panel is `z-index: 2`, which loses to ordinary Bootstrap controls beside it: a
 * btn-check label is 5, so the open country list renders underneath the neighbouring field. Raised
 * to Bootstrap's own dropdown layer, which is what this is. The widget's detached popup is already
 * 1060 and is left alone.
 *
 * intl-tel-input 29 renamed the element: the panel is .iti__country-selector, and the z-index it
 * needs beating is set on that class under .iti--inline-country-selector rather than on a
 * .iti__dropdown-content of its own.
 */
.iti:has(> [data-bs5-tel]) .iti__country-selector {
	z-index: var(--bs-dropdown-zindex, var(--tblr-dropdown-zindex, 1000));
}

/*
 * A floating label has to clear the country button, which sits where the label starts.
 *
 * tel-input.js makes the widget's wrapper the floating context and moves the label into it, which
 * restores Bootstrap's selectors but leaves the label rendering on top of the flag. The clearance is
 * the button's measured width, published as --bs5-tel-label-offset; the fallback covers the moment
 * before the bridge runs and the case where it never does.
 *
 * The floated transform needs its own compensation. Bootstrap floats the label with
 * `scale(.85) translateY(-.5rem) translateX(.15rem)` about an origin of 0 0, so a label indented by
 * P renders its text at 0.85P and drifts left by 0.15P. Translations in that list apply in the
 * scaled system, so undoing it takes 0.15P / 0.85, or 0.176P. At the default 48px button that is
 * 8.5px, which is why a hand-tuned 0.5rem looked right.
 */
.iti:has(> [data-bs5-tel]).form-floating > label {
	padding-left: var(--bs5-tel-label-offset, 3rem);
}

.iti:has(> [data-bs5-tel]).form-floating > .form-control:focus ~ label,
.iti:has(> [data-bs5-tel]).form-floating > .form-control:not(:placeholder-shown) ~ label {
	transform: scale(0.85) translateY(-0.5rem)
		translateX(calc(var(--bs5-tel-label-offset, 3rem) * 0.176));
}