/**
 * Accordion: .mk-accordion (templates/components/accordion.php).
 *
 * The padding belongs to the title row, the bottom border to the item: when
 * open, the border sits right under the content (no padding of its own).
 * Open state = the native [open] attribute: accent title, chevron turned up.
 */

.mk-accordion {
	--mk-accordion-title: var(--wp--custom--color--text--primary);

	border-block-end: var(--wp--custom--accordion--border-width) solid
		var(--wp--custom--color--accordion--border);
}

.mk-accordion[open] {
	--mk-accordion-title: var(--wp--custom--color--accordion--title-open);
}

.mk-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--custom--accordion--gap);
	padding-block: var(--wp--custom--accordion--padding-block);
	padding-inline: var(--wp--custom--accordion--padding-inline);
	color: var(--mk-accordion-title);
	font-family: var(--wp--custom--text--label-medium--font-family);
	font-size: var(--wp--custom--text--label-medium--font-size);
	font-weight: var(--wp--custom--text--label-medium--font-weight);
	line-height: var(--wp--custom--text--label-medium--line-height);
	letter-spacing: var(--wp--custom--text--label-medium--letter-spacing);
	list-style: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition-property: color;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

/* Safari still draws its own marker. */
.mk-accordion__summary::-webkit-details-marker {
	display: none;
}

.mk-accordion__summary:focus-visible {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: calc(-1 * var(--wp--custom--focus--ring-width));
}

@media (hover: hover) {
	.mk-accordion__summary:hover {
		--mk-accordion-title: var(--wp--custom--color--accordion--title-open);
	}
}

/* Optional icon before the title: 24, accent, 8 from the text. */
.mk-accordion__title {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--accordion--gap);
}

.mk-accordion__title .mk-icon {
	flex: none;
	inline-size: var(--wp--custom--accordion--icon-size);
	block-size: var(--wp--custom--accordion--icon-size);
	color: var(--wp--custom--color--accordion--icon);
}

.mk-accordion__summary > .mk-icon {
	flex: none;
	inline-size: var(--wp--custom--accordion--icon-size);
	block-size: var(--wp--custom--accordion--icon-size);
	transition-property: transform;
	transition-duration: var(--wp--custom--motion--duration--base);
	transition-timing-function: var(--wp--custom--motion--easing--standard);
}

.mk-accordion[open] .mk-accordion__summary > .mk-icon {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.mk-accordion__summary,
	.mk-accordion__summary > .mk-icon {
		transition: none;
	}
}