/**
 * SBX Accordion.
 *
 * Built on native <details>/<summary>: open/close, keyboard and screen-reader
 * support all work with no JavaScript. The animation is the progressive
 * enhancement — modern browsers animate the native ::details-content (with
 * interpolate-size letting it transition to auto height); older browsers just
 * snap open, which is still fully functional.
 */

.sbx-accordion {
	--sbx-acc-duration: 0.3s;

	display: flex;
	flex-direction: column;
	gap: 0;

	/* Full width of the parent: inside shrink-to-fit containers (flex parents
	   with align-items start) a <details> would otherwise size to its open
	   panel's content, making items jump in width when opened. */
	width: 100%;

	/* Lets ::details-content transition to/from auto where supported. Scoped
	   here (not :root) so it doesn't affect unrelated auto-animations. */
	interpolate-size: allow-keywords;
}

.sbx-accordion__item {
	/* The JS animation sets inline heights measured from offsetHeight; border-box
	   keeps those consistent even without a global box-sizing reset. */
	box-sizing: border-box;
	width: 100%;
	border: 1px solid rgba( 0, 0, 0, 0.12 );
	border-radius: 0;
	overflow: hidden;
}

.sbx-accordion__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	margin: 0;
	padding: 1rem 1.25rem;
	background: transparent;
	color: inherit;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

/* Remove the default disclosure marker. */
.sbx-accordion__header::-webkit-details-marker {
	display: none;
}

.sbx-accordion__header:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.sbx-accordion__title {
	margin: 0;
	font: inherit;
	line-height: 1.3;
}

.sbx-accordion__icon {
	flex: none;
	width: 1em;
	height: 1em;
	transition: transform var( --sbx-acc-duration ) ease;
}

.sbx-accordion__item[open] > .sbx-accordion__header .sbx-accordion__icon {
	transform: rotate( 180deg );
}

.sbx-accordion__panel {
	padding: 0 1.25rem 1.25rem;
}

/* CSS mode (default): animate the native disclosure where the browser supports
   ::details-content; unsupported browsers snap open. Switched off when JS
   animation is enabled, since the script animates the height itself. */
.sbx-accordion:not( [data-sbx-anim="js"] ) .sbx-accordion__item::details-content {
	block-size: 0;
	overflow: hidden; /* fallback for iOS Safari < 16 */
	overflow: clip;
	transition:
		block-size var( --sbx-acc-duration ) ease,
		content-visibility var( --sbx-acc-duration ) allow-discrete;
}

.sbx-accordion:not( [data-sbx-anim="js"] ) .sbx-accordion__item[open]::details-content {
	block-size: auto;
}

@media ( prefers-reduced-motion: reduce ) {
	.sbx-accordion__icon,
	.sbx-accordion__item::details-content {
		transition: none;
	}
}