/*
 * A solid badge's text in black or white, whichever its fill can be read against.
 *
 * Tabler 1.6.1 compiles every .text-bg-* to `color: #fff !important` whatever the fill, light and
 * white aside. White falls short of WCAG's 4.5:1, the bar for text this small, on success (2.74),
 * info (3.05) and warning (2.13); on secondary in dark (2.52), where Tabler lightens it to
 * gray-400; on seven of the palette colors; and on primary under seven of the accents
 * tabler-themes.css offers. Under the inverted accent in dark it is white on near-white, 1.04.
 * Tabler's own --tblr-<color>-fg is no answer: it is --tblr-light for every color but light, which
 * is how this sheet used to fail while saying it was correct (issue #98). Tabler 1.7.1 points
 * .text-bg-* at exactly that, `var(--tblr-<color>-fg) !important`, so on its own it is still
 * near-white on every fill.
 *
 * So this makes the choice Bootstrap's color-contrast() makes when it compiles text-bg-*, black or
 * white, but at runtime and by a simpler measure. Bootstrap computes each candidate's WCAG
 * contrast; this splits on the fill's oklch lightness: white below 0.619, black from 0.62 up, and a
 * gray between them that no Tabler fill comes near. One formula, reading Tabler's own variable, so
 * the pick follows the accent, the theme base and the color scheme, and a palette change in a
 * Tabler upgrade moves it too. 0.62 is not a WCAG constant. It is an empirical separator: Tabler's
 * fills lie at or below 0.588 (pink) or at or above 0.643 (teal), and anything from 0.58 to 0.64
 * passes them all. TablerBadgeContrastTest computes the WCAG contrast of every fill under every
 * base, accent and scheme, and that test is the guarantee, not the number.
 *
 * Black and white, not --tblr-dark and --tblr-light: --tblr-light fails danger at 4.47, and #fff
 * and #000 are Bootstrap's own text-bg-* contract, which Tabler keeps for .text-bg-light and
 * .text-bg-white.
 *
 * The text-bg-* rules are !important because Tabler's are, and (0,2,0) outranks its (0,1,0)
 * whatever the load order. It also outranks the color utilities that follow .text-bg-* in
 * tabler.css, .text-dark among them, which used to win over it, so those no longer change a
 * text-bg-* badge's text. The bg-* rules are not !important: there the opponent is .badge's own
 * muted foreground, which .bg-* leaves on a saturated fill (1.00 on secondary), and an explicit
 * text utility on a hand-written badge should still win. They cover the 22 colors text-bg-* has,
 * not Tabler's brand colors.
 *
 * Opaque fills only. Tabler mixes the fill with transparent by --tblr-bg-opacity, so .bg-opacity-*
 * thins it while the pick still reads the opaque color.
 *
 * Inside @supports because a value holding var() parses whatever it holds. A browser without
 * relative colors would keep the declaration, compute it invalid and inherit the body text, dark
 * gray on blue at 3.03, where Tabler's white was 5.00. The condition holds no var(), so it is
 * really tested, and it uses the formula's own constructs with a light-dark() origin, which is what
 * secondary is. Its numbers are arbitrary; the threshold is only the custom property's.
 *
 * Where the guard turns a browser away, a text-bg-* badge keeps Tabler's near-white, and Bootstrap's
 * eight bg-* keep what this sheet gave them before, Tabler's -fg, from the rules ahead of the
 * block. Without those, .badge's muted gray would sit on the fill. Equally specific and earlier,
 * they lose to the pick wherever it applies.
 *
 * Badges only. Tabler's buttons, list groups and calendar read --tblr-<color>-fg, which
 * tabler-foreground-corrections.css re-points to the same pick (issue #106), and since 1.7.1 so do
 * .text-bg-* and a progress bar's label, so a .text-bg-* that is not a badge gets the pick from there.
 * The badge rules stay for what the root's pick cannot do: a var() resolves where it is declared, so
 * the root's -fg keeps the root's color in a subtree that redefines one, and these pick per element. This sheet does not
 * read those variables, so either can be deleted without the other.
 *
 * Per color rather than one attribute selector because the variable's name is part of the class's,
 * and there is no way to interpolate one in CSS.
 */

.badge.bg-primary {
	color: var(--tblr-primary-fg);
}

.badge.bg-secondary {
	color: var(--tblr-secondary-fg);
}

.badge.bg-success {
	color: var(--tblr-success-fg);
}

.badge.bg-danger {
	color: var(--tblr-danger-fg);
}

.badge.bg-warning {
	color: var(--tblr-warning-fg);
}

.badge.bg-info {
	color: var(--tblr-info-fg);
}

.badge.bg-light {
	color: var(--tblr-light-fg);
}

.badge.bg-dark {
	color: var(--tblr-dark-fg);
}

@supports (color: oklch(from light-dark(red, blue) clamp(0, (1 - l) * 1000, 1) 0 0)) {
	:root {
		--bs5-badge-contrast: clamp(0, (0.62 - l) * 1000, 1) 0 0;
	}

	.badge.text-bg-primary {
		color: oklch(from var(--tblr-primary) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-secondary {
		color: oklch(from var(--tblr-secondary) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-success {
		color: oklch(from var(--tblr-success) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-info {
		color: oklch(from var(--tblr-info) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-warning {
		color: oklch(from var(--tblr-warning) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-danger {
		color: oklch(from var(--tblr-danger) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-light {
		color: oklch(from var(--tblr-light) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-dark {
		color: oklch(from var(--tblr-dark) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-muted {
		color: oklch(from var(--tblr-muted) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-blue {
		color: oklch(from var(--tblr-blue) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-azure {
		color: oklch(from var(--tblr-azure) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-indigo {
		color: oklch(from var(--tblr-indigo) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-purple {
		color: oklch(from var(--tblr-purple) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-pink {
		color: oklch(from var(--tblr-pink) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-red {
		color: oklch(from var(--tblr-red) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-orange {
		color: oklch(from var(--tblr-orange) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-yellow {
		color: oklch(from var(--tblr-yellow) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-lime {
		color: oklch(from var(--tblr-lime) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-green {
		color: oklch(from var(--tblr-green) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-teal {
		color: oklch(from var(--tblr-teal) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-cyan {
		color: oklch(from var(--tblr-cyan) var(--bs5-badge-contrast)) !important;
	}

	.badge.text-bg-white {
		color: oklch(from var(--tblr-white) var(--bs5-badge-contrast)) !important;
	}

	.badge.bg-primary {
		color: oklch(from var(--tblr-primary) var(--bs5-badge-contrast));
	}

	.badge.bg-secondary {
		color: oklch(from var(--tblr-secondary) var(--bs5-badge-contrast));
	}

	.badge.bg-success {
		color: oklch(from var(--tblr-success) var(--bs5-badge-contrast));
	}

	.badge.bg-info {
		color: oklch(from var(--tblr-info) var(--bs5-badge-contrast));
	}

	.badge.bg-warning {
		color: oklch(from var(--tblr-warning) var(--bs5-badge-contrast));
	}

	.badge.bg-danger {
		color: oklch(from var(--tblr-danger) var(--bs5-badge-contrast));
	}

	.badge.bg-light {
		color: oklch(from var(--tblr-light) var(--bs5-badge-contrast));
	}

	.badge.bg-dark {
		color: oklch(from var(--tblr-dark) var(--bs5-badge-contrast));
	}

	.badge.bg-muted {
		color: oklch(from var(--tblr-muted) var(--bs5-badge-contrast));
	}

	.badge.bg-blue {
		color: oklch(from var(--tblr-blue) var(--bs5-badge-contrast));
	}

	.badge.bg-azure {
		color: oklch(from var(--tblr-azure) var(--bs5-badge-contrast));
	}

	.badge.bg-indigo {
		color: oklch(from var(--tblr-indigo) var(--bs5-badge-contrast));
	}

	.badge.bg-purple {
		color: oklch(from var(--tblr-purple) var(--bs5-badge-contrast));
	}

	.badge.bg-pink {
		color: oklch(from var(--tblr-pink) var(--bs5-badge-contrast));
	}

	.badge.bg-red {
		color: oklch(from var(--tblr-red) var(--bs5-badge-contrast));
	}

	.badge.bg-orange {
		color: oklch(from var(--tblr-orange) var(--bs5-badge-contrast));
	}

	.badge.bg-yellow {
		color: oklch(from var(--tblr-yellow) var(--bs5-badge-contrast));
	}

	.badge.bg-lime {
		color: oklch(from var(--tblr-lime) var(--bs5-badge-contrast));
	}

	.badge.bg-green {
		color: oklch(from var(--tblr-green) var(--bs5-badge-contrast));
	}

	.badge.bg-teal {
		color: oklch(from var(--tblr-teal) var(--bs5-badge-contrast));
	}

	.badge.bg-cyan {
		color: oklch(from var(--tblr-cyan) var(--bs5-badge-contrast));
	}

	.badge.bg-white {
		color: oklch(from var(--tblr-white) var(--bs5-badge-contrast));
	}
}