/*
 * An alert's text in its variant's emphasis color, which Bootstrap's alerts use and Tabler's do
 * not.
 *
 * Tabler, 1.6.1 and 1.7 alike, paints .alert text in --tblr-alert-variant-color itself, and the
 * background is a light tint of that same color, so the text sits on a pale wash of its own hue.
 * Measured under 1.6.1, in light mode warning was 2.02, success 2.56, info 2.83 and danger 4.21,
 * against WCAG's 4.5:1 for text this size; in dark mode info and danger fell short too (issue #147).
 * NotificationPanel draws every feedback message as one of these alerts.
 *
 * Bootstrap 5.3 paints the same text in --bs-<color>-text-emphasis, which exists for exactly this,
 * and Tabler compiles all eight of those variables and then never reads them from .alert. So the
 * eight Bootstrap variants read Tabler's own variable here. Tabler's other variants, muted and the
 * palette colors, have none. They get the formula Tabler derives six of its eight from, 60% black
 * in light and 40% white in dark, mixed in oklab, over --tblr-alert-variant-color, the variable the
 * tint reads, so text and tint always come from one color. Light and dark are not that formula in
 * Tabler either: their emphasis is a fixed gray, which is why the eight read the variable rather
 * than the formula.
 *
 * Each variant names its emphasis in --bs5-alert-emphasis, and one rule applies it. A plain .alert
 * has none and keeps Tabler's body color through the fallback.
 *
 * Only the text moves; the tint and the border stay Tabler's. The text keeps a trace of its hue but
 * reads as near-black in light and as a pale tint in dark, which is Bootstrap's look. An
 * .alert-icon follows the text, because Tabler colors it from the same variable, and an
 * .alert-description does too, by its own rule below.
 *
 * An .alert-action is colored from the same variable, but on hover Tabler's a:hover at (0,1,1)
 * outranks .alert-action at (0,1,0) and gives it the link color, measured at 3.82 on a blue alert
 * under the pink base Tabler 1.6 had in dark.
 * Its hover keeps the alert's text color here; Tabler's own hover feedback, dropping the underline,
 * is untouched.
 *
 * Not .alert-important, which fills with the variant color, so emphasis text would be wrong on it
 * too. The :where(:not(.alert-important)) keeps these rules off it without adding specificity, so
 * each stays at Tabler's (0,1,0) and wins by landing after tabler.css. The important alert's text is
 * the last rule in the sheet.
 *
 * No @supports around these, unlike the badge sheet. light-dark() and color-mix() are what Tabler's
 * own palette is written in, so a browser without them has no working Tabler to correct. The
 * important alert's rule needs one, and says why.
 *
 * TablerAlertContrastTest resolves every variant under every theme base, accent and scheme from the
 * shipped sheets and holds each to 4.5:1, and its close button to 3:1.
 */

.alert-primary {
	--bs5-alert-emphasis: var(--tblr-primary-text-emphasis);
}

.alert-secondary {
	--bs5-alert-emphasis: var(--tblr-secondary-text-emphasis);
}

.alert-success {
	--bs5-alert-emphasis: var(--tblr-success-text-emphasis);
}

.alert-info {
	--bs5-alert-emphasis: var(--tblr-info-text-emphasis);
}

.alert-warning {
	--bs5-alert-emphasis: var(--tblr-warning-text-emphasis);
}

.alert-danger {
	--bs5-alert-emphasis: var(--tblr-danger-text-emphasis);
}

.alert-light {
	--bs5-alert-emphasis: var(--tblr-light-text-emphasis);
}

.alert-dark {
	--bs5-alert-emphasis: var(--tblr-dark-text-emphasis);
}

.alert-muted,
.alert-blue,
.alert-azure,
.alert-indigo,
.alert-purple,
.alert-pink,
.alert-red,
.alert-orange,
.alert-yellow,
.alert-lime,
.alert-green,
.alert-teal,
.alert-cyan {
	--bs5-alert-emphasis:
		light-dark(color-mix(in oklab, var(--tblr-black) 60%, var(--tblr-alert-variant-color)),
		color-mix(in oklab, var(--tblr-white) 40%, var(--tblr-alert-variant-color)));
}

.alert:where(:not(.alert-important)) {
	--tblr-alert-color: var(--bs5-alert-emphasis, var(--tblr-alert-variant-color));
}

.alert-action:hover {
	color: var(--tblr-alert-color);
}

/*
 * An .alert-description in the alert's text, as Tabler already makes it on an important alert.
 *
 * Tabler, 1.6.1 and 1.7 alike, paints it in --tblr-secondary, its gray-500 in light and gray-400 in
 * dark, which under 1.6.1 was borderline on a bare card, 4.74 in light, and fell short on the
 * alert's tint: 4.28 on blue and 3.98 on dark in light. Under the pink base Tabler 1.6 had, it fell
 * short everywhere, 2.85 on a blue alert in dark (issue #149).
 *
 * color: inherit, Tabler's own rule for the description on an important alert and for every
 * .alert-heading, so every part of every alert reads or inherits the alert's text, which this sheet
 * holds to 4.5:1. A nested .alert-link inherits it too. Under that pink base nothing dim enough to
 * read as secondary text read everywhere: 85% of the text measured 3.85 there. With the base gone that
 * has not been re-measured, and the choice stands on its own, as Bootstrap's alert also keeps its text
 * one color throughout. The body color would read everywhere, but outshines the heading in dark. So a
 * description is no longer gray, and a heading is set apart from it by Tabler's weight, 500 against
 * 400.
 *
 * (0,1,0), Tabler's selector, winning by landing after tabler.css. An application's own class on a
 * description still wins when it comes later, and a .text-* utility, which is !important, always.
 */

.alert-description {
	color: inherit;
}

/*
 * An alert's close button at three quarters of the alert's text, rather than two fifths.
 *
 * Tabler, 1.6.1 and 1.7 alike, draws .btn-close as a mask over currentColor, which inside an alert
 * is the alert's text, at --tblr-btn-close-opacity, 0.4, so the glyph sits 60% of the way from the
 * text to the alert's background. WCAG asks 3:1 of a control against what is next to it, and at 0.4
 * almost every alert falls short, measured under 1.6: 1.82 on an important pink alert, 1.83 on
 * danger, 2.07 on a plain alert in light and 1.94 under the pink base in dark (issue #162). Plain
 * Bootstrap draws its glyph in black at 0.5 and reads 3.70 and up on its alerts.
 *
 * This sheet holds the text to 4.5:1, and the glyph needs 0.71 of it to reach 3:1 on the narrowest
 * pair, white at 4.62 on an important pink alert. 0.75, Tabler's own hover opacity, gives 3.19 there,
 * 3.87 at worst on a tint and 4.09 on a minor alert's card, under every Tabler 1.7 theme.
 *
 * Hover goes to 1, Tabler's focus opacity, so hovering still shows. That leaves focus no opacity step
 * above hover, and it needs none: tabler-close-button-corrections.css paints the focus ring Tabler's
 * own mask used to cut away (issue #179). Until it did, hover had to stay at 0.75 here, or a focus
 * arriving while the pointer rested on the button would have changed nothing. Remove that sheet and
 * hover must come back down; TablerAlertContrastTest fails until it does.
 *
 * Two custom properties, the ones Tabler's .btn-close declares and reads, on Tabler's selector with
 * the alert inside :where(), so it stays at (0,1,0) and wins by landing after tabler.css. That is any
 * close button inside an alert, dismissible or not. Outside one, a toast's or a modal's keeps
 * Tabler's 0.4, which falls short there too, 1.51 on a toast under Tabler 1.6's pink base in dark,
 * and is outside this sheet (issue #180).
 */

:where(.alert) .btn-close {
	--tblr-btn-close-opacity: 0.75;
	--tblr-btn-close-hover-opacity: 1;
}

/*
 * An important alert's text in black or white, whichever its fill can be read against.
 *
 * Tabler 1.6.1 fills .alert-important with --tblr-alert-variant-color and sets its text to
 * --tblr-white whatever that color is, the defect badges had before issue #98: 2.13 on warning and
 * yellow, 2.74 on success, 3.05 on info, 1.04 on light, and in dark 2.52 on secondary and 1.26 on a
 * plain important alert, which fills with the near-white body color (issue #148).
 *
 * The pick is the badge sheet's: white while the fill's oklch lightness is below 0.62, black from
 * there up. It reads --tblr-alert-variant-color, the variable the fill reads, so text and fill come
 * from one color under every accent, base and scheme, and the plain alert needs no rule of its own.
 * TablerAlertContrastTest holds the pick to 4.5:1 on Tabler's palette, where muted under the mist
 * base, white at 4.61, is the narrowest. For a variant color of an application's own it is a pick
 * rather than a guarantee: a fill within 0.001 of the threshold gets a gray, and a translucent one
 * translucent text.
 *
 * The formula is written out rather than read from the badge or foreground sheet's property, though
 * all three are equal, so that each sheet can be deleted by itself; one declaration does not need a
 * property of its own.
 *
 * The alert's text, its .alert-heading and .alert-link inherit it, the description through Tabler's
 * own .alert-important .alert-description { color: inherit }, and .alert-icon and .alert-action read
 * the variable, a hovered action held to it by the rule above. Content an application puts inside
 * with a color of its own, a .text-secondary or a plain link, does not follow and can match the fill.
 *
 * Not .alert-minor, whose transparent background follows .alert-important in tabler.css and wins, so
 * the text sits on the card rather than on a fill, and the pick would turn Tabler's white on a dark
 * card, 15.13, into black at 1.39. :where() keeps the rule at Tabler's (0,1,0), so it ties with
 * .alert-important and wins by landing after tabler.css.
 *
 * Inside @supports, unlike the rules above. This needs relative colors, which Tabler uses only to
 * shade colors it already has, its hover fills and dark-mode borders among them. Here the result is
 * the text itself: a custom property holding var() parses whatever it holds, so in a browser without
 * them color would be invalid at computed-value time and inherit the card's text instead of keeping
 * Tabler's white. The condition is the badge sheet's, verbatim. Turned away, a browser keeps Tabler's
 * white, which is the fallback; nothing outside the block is needed.
 */

@supports (color: oklch(from light-dark(red, blue) clamp(0, (1 - l) * 1000, 1) 0 0)) {
	.alert-important:where(:not(.alert-minor)) {
		--tblr-alert-color: oklch(from var(--tblr-alert-variant-color) clamp(0, (0.62 - l) * 1000, 1) 0 0);
	}
}