/*
 * A close button whose focus ring can be seen.
 *
 * Tabler 1.6.1 draws .btn-close as a mask over the button's own background-color, which is
 * currentColor, and draws keyboard focus as an outline on the same element. A mask applies to all
 * the element paints, its outline included, and outside the X it is transparent, so the ring, 2px
 * wide at a 2px offset, is cut away whole: under a real Tab focus Chrome 155 matched
 * :focus-visible, computed the ring's color, and painted no pixel of it, on an alert, a toast and a
 * modal, under every scheme and base probed (issue #179). Focus showed by opacity alone, 0.4 to 1.
 *
 * So the X moves to ::after and the button stops masking itself. The pseudo-element reads the
 * variables Tabler's mask reads, with Tabler's own mask value, so the glyph is the same shape in
 * the same place in the same color: a crop of every probed button at rest matches as shipped to
 * within one level of 8-bit rounding, the cost of compositing the mask on ::after rather than on
 * the button. Opacity stays on the button, so it dims glyph and ring together, and the ring shows
 * only at the focus opacity. ::before is Tabler's 24px hit area and is left alone.
 *
 * The button's own fill goes, at rest and on hover, where Tabler restates it at (0,2,0); without
 * the mask it would paint the whole box.
 *
 * The ring is Tabler's outline, its width and style, with two changes.
 *
 * It sits inside the button rather than 2px outside it. Tabler puts a modal's close button flush in
 * the corner of .modal-content, which a scrollable modal clips with overflow: hidden and a
 * fullscreen one puts at the viewport's edge, so an outward ring lost its top and right there.
 * Inset by its own width it painted on all four sides of every probed button, with room to spare
 * around the X: the smallest box, a toast's, is 24.5px around a 10.5px glyph. Set through
 * --tblr-focus-ring-offset, the variable Tabler's outline already reads and itself sets to -1px on
 * a flat input group.
 *
 * It takes the button's own color instead of Tabler's ring color. Tabler's ring is the primary
 * mixed into the page background, 50% in light and 75% in dark, and a close button sits on an
 * alert, which is often that primary's tint or a fill of the same lightness: painted, it measured
 * below 3:1 against the surface on 121 of 128 buttons, 1.01 on an important warning alert. The
 * button's color is the text it inherits, which tabler-alert-corrections.css holds to 4.5:1 on an
 * alert, and in its own color the ring is 4.61 or better on every alert under Tabler 1.7. Measured
 * under 1.6 it was 3:1 or better on all but one of 136 probed buttons, a toast header under the
 * pink base in dark, whose own text was that faint; that base went with 1.7. An application's
 * --tblr-focus-ring still decides the ring's width and style.
 *
 * Every rule ties Tabler's on specificity, or beats it, and wins by landing after tabler.css.
 * TablerCloseButtonCorrectionsTest pins what this rests on in tabler.css: the mask on the element,
 * its relative position and zero border, which make ::after's box the one the mask covered, and the
 * ring's shorthand. If Tabler stops masking the button, this sheet is a candidate for deletion.
 *
 * Not fixed here: forced colors, where the glyph on some important alerts was already invisible as
 * Tabler ships it and the ring, in the same color, is too (#187); and every other control's ring,
 * which stays Tabler's and is unmeasured (#188). The ring is unverified in Firefox: headless
 * Firefox never reports :focus-visible from a BiDi Tab key, so focus.mjs cannot see it there.
 */

.btn-close {
	--tblr-focus-ring-offset: calc(-1 * var(--tblr-focus-ring-width));
	background-color: transparent;
	mask: none;
}

.btn-close:hover {
	background-color: transparent;
}

.btn-close::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--tblr-btn-close-color);
	mask: var(--tblr-btn-close-bg) no-repeat center/calc(var(--tblr-btn-close-size) * 0.75);
}

.btn-close:focus-visible {
	outline-color: var(--tblr-btn-close-color);
}