/**
 * core/details/dropdown
 */

.wp-block-details.is-style-dropdown {
	--details--padding--block: 0;
	--details--padding--inline: 0;
	--summary--icon: var(--wp--custom--icons--circle-chevron-down);
	--summary--icon--size: 1.5rem;

	border: 0;
}

.wp-block-details.is-style-dropdown > summary {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--5);
	padding-block: 0 calc(var(--wp--preset--spacing--30) - 4px);
	padding-inline: 0 calc(var(--summary--icon--size) + var(--wp--preset--spacing--10));
	background-color: var(--wp--preset--color--base);
	border-block-end: 4px solid var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--accent-2);
	font-family: var(--wp--preset--font-family--primary);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.01ch;
	line-height: 1.33;
	z-index: 2;
}

.wp-block-details.is-style-dropdown > summary::after {
	position: absolute;
	inset-block-start: calc(50% - calc(var(--summary--icon--size) / 2));
	inset-inline-end: 0;
	block-size: var(--summary--icon--size);
	inline-size: var(--summary--icon--size);
	translate: 0 -50%;
	background-color: transparent;
	background-image: var(--summary--icon);
	clip-path: unset;
}

.wp-block-details.is-style-dropdown[open] > summary::after {
	transform: rotate(180deg);
}