/*
 * Puts the accordion's expand chevron back, because Tabler removes the one Bootstrap draws.
 *
 * Bootstrap supplies it entirely in CSS: four .accordion-button::after rules reading
 * --bs-accordion-btn-icon, which bootstrap.css declares 11 times. Tabler declares
 * --tblr-accordion-btn-icon zero times and has zero ::after rules on that class, expecting a markup
 * element instead, an .accordion-button-toggle wrapping an inline SVG. Measured on Tabler's own
 * accordion page: content none, background-image none.
 *
 * So the two are mutually exclusive, and wicket-bootstrap5 emits what Bootstrap documents rather
 * than Tabler's element: emitting the element instead would give a plain Bootstrap page two
 * chevrons, one from its own ::after and one from the markup. The gap belongs to the module that
 * created it, which is this one, the same division as tabler-table-corrections.css.
 *
 * A mask rather than a background image, so the glyph takes its color from currentColor and follows
 * every one of Tabler's theme dimensions without a second rule. Bootstrap hardcodes #212529 and
 * needs a [data-bs-theme=dark] override to undo it. Note that mask-image is governed by img-src,
 * not style-src, and Bootstrap5.install already widens img-src to allow data: for the icons
 * Bootstrap's own stylesheet carries.
 *
 * Nothing here fights Bootstrap's rules, because there are none to fight: tabler.css replaces
 * bootstrap.css rather than loading beside it, which a samples test pins.
 *
 * It does have to stand aside for Tabler's own shape, though. This arrives with the theme so that a
 * hand-written accordion gets it too, and an application writing Tabler's markup already has an
 * .accordion-button-toggle holding an SVG: without the suppression below, such a button would draw
 * that SVG and this pseudo-element both, which is the two-chevron failure this whole split exists to
 * avoid, reached from the other side.
 *
 * The two hooks are ours and named --bs5-*, as the responsive table's are. An earlier version called
 * them --tblr-accordion-btn-icon and --tblr-accordion-btn-icon-width, invented by analogy with
 * Bootstrap's names: Tabler declares neither, so they read as Tabler's vocabulary while being this
 * library's own. Sizing falls through to --tblr-accordion-btn-toggle-width, which Tabler does
 * declare and which is what its own toggle element is sized by.
 */

.accordion-button::after {
	flex-shrink: 0;
	width: var(--bs5-accordion-chevron-size, var(--tblr-accordion-btn-toggle-width, 1.25rem));
	height: var(--bs5-accordion-chevron-size, var(--tblr-accordion-btn-toggle-width, 1.25rem));
	margin-left: auto;
	content: "";
	background-color: currentColor;
	mask-image: var(--bs5-accordion-chevron, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e"));
	-webkit-mask-image: var(--bs5-accordion-chevron, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m6 9 6 6 6-6'/%3e%3c/svg%3e"));
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: var(--bs5-accordion-chevron-size, var(--tblr-accordion-btn-toggle-width, 1.25rem));
	-webkit-mask-size: var(--bs5-accordion-chevron-size, var(--tblr-accordion-btn-toggle-width, 1.25rem));
	transition: transform 0.2s ease-in-out;
}

.accordion-button:not(.collapsed)::after {
	transform: rotate(-180deg);
}

/*
 * Stands aside for markup that brought its own indicator.
 *
 * A separate rule rather than :not(:has(...)) on the one above, and that is the whole point: a
 * browser without :has() drops a rule it cannot parse, so this way it falls back to drawing both
 * indicators on Tabler-native markup, where folding the condition into the base rule would drop the
 * chevron for everybody. Wrong in the small case beats wrong in every case.
 */

.accordion-button:has(.accordion-button-toggle)::after {
	display: none;
}

/*
 * WCAG 2.3.3. Tabler disables its own modal slide-in under the same query, which an earlier
 * override audit nearly "fixed" before noticing it was deliberate.
 */
@media (prefers-reduced-motion: reduce) {
	.accordion-button::after {
		transition: none;
	}
}

/*
 * Tabler's inverted variant puts the toggle before the label with order: -1, written against the
 * .accordion-button-toggle element it expects and this library does not emit. Reproduced for the
 * pseudo-element, which .accordion-button being a flex container makes an ordinary flex item.
 *
 * .accordion-plus deliberately has no counterpart. It animates between a plus and a minus by fading
 * one path of a two-path SVG, and a single-path mask has no second path to fade, so it is documented
 * as unsupported rather than half-restored.
 */

.accordion-inverted .accordion-button::after {
	order: -1;
	margin-right: var(--tblr-accordion-gap, 1rem);
	margin-left: 0;
}