/**
 * core/details
 */

.wp-block-details {
	--details--padding--inline: var(--wp--preset--spacing--20);
	--details--padding--block: var(--wp--preset--spacing--30);
	--details--border--color: var(--wp--preset--color--contrast);
	--summary--color--background: var(--wp--preset--color--base);
	--summary--color--text: var(--wp--preset--color--accent-2);
	--summary--icon: var(--wp--custom--icons--details-plus);
	--summary--icon--color: var(--wp--preset--color--contrast);
	--summary--icon--size: 1.25rem;

	padding-inline: var(--details--padding--inline);
}

.wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	margin-inline: calc(-1 * var(--details--padding--inline));
	padding: var(--details--padding--block) var(--details--padding--inline);
	background-color: var(--summary--color--background);
	color: var(--summary--color--text);
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 700;
	line-height: 1.33;
	transition: all var(--wp--custom--transition--hover);
}

.wp-block-details > summary::after {
	display: block;
	flex-shrink: 0;
	block-size: var(--summary--icon--size);
	inline-size: var(--summary--icon--size);
	margin-inline-start: auto;
	background-color: var(--summary--icon--color);
	content: '';
	mask: var(--summary--icon) center center no-repeat;
	mask-size: contain;
}

/** Hide default browser indicator UI */
.wp-block-details > summary::marker,
.wp-block-details > summary::-webkit-details-marker {
	display: none;
	content: '';
}

.wp-block-details[open] {
	--summary--color--background: var(--wp--preset--color--accent-1);
	--summary--color--text: var(--wp--preset--color--base);
	--summary--icon: var(--wp--custom--icons--details-minus);
	--summary--icon--color: var(--wp--preset--color--base);

	padding-block-end: var(--details--padding--block);
}

.wp-block-details:not([open]) > summary:hover {
	--summary--color--background: var(--wp--preset--color--base-2);
}