.mf-disclosure {
	border: var(--mf-border);
	background: var(--mf-color-surface);

	/* The tint is the host's to set; unset it reads as the plain accent. */
	--mf-disclosure-tint: var(--mf-color-accent);
}

.mf-disclosure-bar {
	display: flex;
	align-items: center;
	gap: var(--mf-space-2);
	padding: var(--mf-space-2) var(--mf-space-3);
	color: var(--mf-disclosure-tint);
	font-size: var(--mf-font-size-small);
	letter-spacing: var(--mf-track-caption);
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;

	&::-webkit-details-marker {
		display: none;
	}

	&:hover,
	&:focus-visible {
		background: var(--mf-color-surface-raised);
		outline: none;
	}
}

.mf-disclosure-glyph {
	display: inline-flex;
	flex: 0 0 auto;
}

.mf-disclosure-label {
	flex: 1 1 auto;
}

.mf-disclosure-count {
	flex: 0 0 auto;
	color: var(--mf-color-text-muted);
}

.mf-disclosure-toggle {
	flex: 0 0 auto;
	color: var(--mf-color-text-muted);
	transition: transform var(--mf-transition-fast);
}

.mf-disclosure[open] .mf-disclosure-toggle {
	transform: rotate(180deg);
}

.mf-disclosure-body {
	border-top: var(--mf-border);
}