/*
 * Accordion (docs/DESIGN_SYSTEM.md sections 8.6 and 8.12): the Details block, a native <details> with its <summary>,
 * so it opens and closes without JavaScript and with the keyboard. Used for a course outline and for questions and
 * answers. A plus that turns into a minus, hairlines between the items; items that follow each other form one list.
 * The summary is a 56 px target and takes the light tint on hover.
 */
@layer components {
	.wp-block-details {
		border-block: var(--border-hairline);
	}

	.wp-block-details + .wp-block-details {
		border-block-start: 0;
	}

	.wp-block-details > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
		min-height: var(--size-control-lg);
		padding: var(--space-3) var(--space-2);
		font-weight: 600;
		line-height: var(--lh-small);
		list-style: none;
		cursor: pointer;
		transition: background-color var(--dur-fast) var(--ease-out);
	}

	/* Safari still draws its own triangle without this. */
	.wp-block-details > summary::-webkit-details-marker {
		display: none;
	}

	.wp-block-details > summary::after {
		flex: none;
		width: 1em;
		color: var(--color-accent);
		font-size: var(--fs-h4);
		font-weight: 400;
		line-height: 1;
		text-align: center;
		content: "+" / "";
	}

	.wp-block-details[open] > summary::after {
		content: "\2212" / "";
	}

	@media (hover: hover) {
		.wp-block-details > summary:hover {
			background: var(--color-surface-tint);
		}
	}

	.wp-block-details > :not(summary) {
		padding-inline: var(--space-2);
		color: var(--color-text-secondary);
	}

	.wp-block-details > :not(summary) + * {
		margin-block-start: var(--space-3);
	}

	.wp-block-details[open] > :last-child {
		margin-block-end: var(--space-5);
	}

	/* Items that follow each other are one list: no space between them. */
	.prose > .wp-block-details + .wp-block-details {
		margin-block-start: 0;
	}

	@media (forced-colors: active) {
		.wp-block-details {
			border-color: CanvasText;
		}
	}
}