/**
 * AOL List Item: front end styles.
 *
 * The accordion is a native details / summary pair, so almost all behaviour
 * comes from the browser. These rules only handle presentation.
 *
 * Every class here begins with `aol-list-item`, so nothing in a theme or
 * another plugin can match this markup by accident and nothing here escapes.
 *
 * Cosmetic rules are wrapped in :where() so they carry zero specificity and
 * the theme stylesheet wins with a plain class. Only the rules the block
 * cannot function without keep normal weight.
 *
 * @package AOL_List
 */

:where( .aol-list-item ) {
	margin: 0;
}

/* Remove stray margins from the first and last inner block. Cosmetic: a theme
   that wants its own rhythm inside a panel can simply say so. */
:where( .aol-list-item__content > *:first-child ) {
	margin-block-start: 0;
}

:where( .aol-list-item__content > *:last-child ) {
	margin-block-end: 0;
}

/* --------------------------------------------------------------------
 * Titles
 * ------------------------------------------------------------------ */

.aol-list-item__title {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}

/* When the title is a span rather than a heading, keep it looking like a lead
   in rather than body copy. Cosmetic, so theme typography wins.
   A heading title is left entirely to the theme: we never set its size,
   weight or family, only the margin reset the flex row needs. */
:where( span.aol-list-item__title ) {
	display: block;
	font-weight: 600;
}

:where( .aol-list-item--plain .aol-list-item__summary ) {
	margin-block-end: 0.25em;
}

/* --------------------------------------------------------------------
 * Accordion
 * ------------------------------------------------------------------ */

:where( .aol-list-item__details ) {
	--aol-list-item-padding: 0.75em;
}

.aol-list-item__details {
	position: relative;
}

/*
 * Functional: the row layout and the removal of the browser's own disclosure
 * triangle. A theme reset cannot be allowed to bring the triangle back or
 * stack the icon under the title.
 */
.aol-list-item__summary {
	display: flex;
	align-items: center;
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Cosmetic. */
:where( .aol-list-item__summary ) {
	gap: 0.75em;
	padding-block: var( --aol-list-item-padding, 0.75em );
}

/* Hide the browser's own disclosure triangle in every engine. */
.aol-list-item__summary::-webkit-details-marker {
	display: none;
}

.aol-list-item__summary::marker {
	content: "";
}

.aol-list-item__summary--icon-left {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

/* A visible focus ring is a requirement, not a nicety. */
.aol-list-item__summary:focus-visible {
	outline: 2px solid var( --aol-list-marker-color, currentColor );
	outline-offset: 2px;
	border-radius: 2px;
}

:where( .aol-list-item__summary:hover ) {
	opacity: 0.85;
}

.aol-list-item__panel {
	overflow: hidden;
}

:where( .aol-list-item__details[ open ] > .aol-list-item__panel > .aol-list-item__content ) {
	padding-block-end: var( --aol-list-item-padding, 0.75em );
}

/* --------------------------------------------------------------------
 * Toggle icons, drawn in CSS so the markup stays clean
 * ------------------------------------------------------------------ */

.aol-list-item__icon {
	position: relative;
	flex: 0 0 auto;
	inline-size: 1em;
	block-size: 1em;
}

:where( .aol-list-item__icon ) {
	color: var( --aol-list-marker-color, currentColor );
	transition: transform 0.25s ease;
}

/* Chevron */
.aol-list-item__icon--chevron::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 0.5em;
	block-size: 0.5em;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: translateY( -0.15em ) rotate( 45deg );
}

.aol-list-item__details[ open ] > .aol-list-item__summary .aol-list-item__icon--chevron {
	transform: rotate( 180deg );
}

/* Caret */
.aol-list-item__icon--caret::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 0;
	block-size: 0;
	border-inline-start: 0.35em solid transparent;
	border-inline-end: 0.35em solid transparent;
	border-block-start: 0.45em solid currentColor;
}

.aol-list-item__details[ open ] > .aol-list-item__summary .aol-list-item__icon--caret {
	transform: rotate( 180deg );
}

/* Plus that becomes a minus */
.aol-list-item__icon--plus::before,
.aol-list-item__icon--plus::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: currentColor;
	border-radius: 1px;
}

.aol-list-item__icon--plus::before {
	inline-size: 0.85em;
	block-size: 2px;
}

.aol-list-item__icon--plus::after {
	inline-size: 2px;
	block-size: 0.85em;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.aol-list-item__details[ open ] > .aol-list-item__summary .aol-list-item__icon--plus::after {
	transform: scaleY( 0 );
	opacity: 0;
}

/* --------------------------------------------------------------------
 * Motion and print
 * ------------------------------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {
	.aol-list-item__icon,
	.aol-list-item__icon--plus::after {
		transition: none;
	}
}

@media print {
	.aol-list-item__panel {
		height: auto !important;
		opacity: 1 !important;
		overflow: visible !important;
	}

	.aol-list-item__icon {
		display: none;
	}
}