/**
 * core/details
 */

.wp-block-details {
	--details--color--background: var(--wp--preset--color--base);
	--details--border--color: var(--wp--preset--color--base);
	--details--border--radius: var(--wp--preset--spacing--10);
	--details--padding--inline: var(--wp--preset--spacing--30);
	--details--padding--block: 20px;
	--details--font-size: var(--wp--preset--font-size--large);
	--summary--color--background: var(--wp--preset--color--base);
	--summary--color--text: var(--wp--preset--color--contrast);
	--summary--font-size: var(--wp--preset--font-size--large);
	--summary--font-weight: 700;
	--summary--gap: var(--wp--preset--spacing--30);
	--summary--line-height: 1.33;
	--summary--icon: var(--wp--custom--icon--details-plus);
	--summary--icon--open: var(--wp--custom--icon--details-minus);
	--summary--icon--color: var(--wp--preset--color--contrast);
	--summary--icon--rotate: 0deg;
	--summary--icon--size: 1.25rem;

	padding-inline: var(--details--padding--inline);
	background-color: var(--details--color--background);
	border: 1px solid var(--details--border--color);
	border-block-start-width: 4px;
	border-radius: var(--details--border--radius);
	box-shadow: 0 4px 32px 0 rgb(0 0 0 / 8%);
	overflow: clip;
	transition: border-color var(--wp--custom--transition--hover);
}

.wp-block-details, .wp-block-details p {
	font-size: var(--details--font-size);
}

.wp-block-details:has(+ .wp-block-details) {
	margin-block-end: 0;
}

.wp-block-details > summary {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--summary--gap);
	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-size: var(--summary--font-size);
	font-weight: var(--summary--font-weight);
	line-height: var(--summary--line-height);
	transition: background-color var(--wp--custom--transition--hover), color 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;
	rotate: var(--summary--icon--rotate);
	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] {
	--details--border--color: var(--wp--preset--color--accent-1);
	--summary--icon: var(--summary--icon--open);

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


.wp-block-details[open] > summary {
	margin-block-end: 0;
	border-block-start: 0;
}


.wp-block-details:not([open]):has(summary:hover) {
	--details--border--color: var(--wp--preset--color--accent-1);
}

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

.wp-block-details[open]:not(.is-style-simple) > * {
	margin-block-start: 0;
}

.wp-block-details:not(.is-style-simple) + .wp-block-details:not(.is-style-simple) {
	margin-block-start: var(--wp--preset--spacing--10);
}