/**
 * Accordion
 *
 * Native <details> so it works without JavaScript.
 *
 *   <details class="accordion__item">
 *     <summary class="accordion__summary">
 *       <span class="accordion__title">Material</span>
 *       <span class="accordion__icon" aria-hidden="true"></span>
 *     </summary>
 *     <div class="accordion__content"> … </div>
 *   </details>
 */

.accordion {
	border-top: var(--border-width) solid var(--color-border);
}

.accordion__item {
	border-bottom: var(--border-width) solid var(--color-border);
}

.accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	cursor: pointer;
	list-style: none;
}

.accordion__summary::-webkit-details-marker {
	display: none;
}

.accordion__summary:focus-visible {
	outline: var(--border-width-strong) solid var(--color-border-strong);
	outline-offset: 2px;
}

.accordion__title {
	font-family: var(--font-heading);
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-heading);
}

/* Plus sign that becomes a minus when open. */
.accordion__icon {
	position: relative;
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
}

.accordion__icon::before,
.accordion__icon::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1px;
	background: var(--color-heading);
	transition: transform var(--transition-fast);
}

.accordion__icon::after {
	transform: rotate(90deg);
}

.accordion__item[open] .accordion__icon::after {
	transform: rotate(0deg);
}

.accordion__content {
	padding: 0 0 var(--space-5);
	font-size: var(--text-sm);
	line-height: var(--line-relaxed);
	color: var(--color-muted);
}

.accordion__content > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.accordion__icon::before,
	.accordion__icon::after {
		transition: none;
	}
}