details,
details summary {
	transition: block-size 1s, background 0.2s linear;
}

details::details-content {
	block-size: 0;
	overflow: hidden;
	transition-property: block-size, content-visibility;
	transition-duration: 0.5s;
	transition-behavior: allow-discrete;
}


details[open]::details-content {
	/* Fallback for browsers that don't support calc-size() function */
	block-size: auto;

	/* calc-size() function allows transition to height: auto; */
	block-size: calc-size(auto, size);
}

details > summary {
	cursor: pointer;
}

details[class] > summary {
	list-style: none;
	display: flex;
	align-items: center;
	font-weight: 600;
	gap: var(--wp--preset--spacing--40);
}

details[class] > summary::marker {
	content: none;
}

details[class] summary::-webkit-details-marker {
	display: none;
}

details:not(.is-style-block,.is-style-accordion, is-style-counter) {
	padding: var(--wp--preset--spacing--40);
	border-radius: 0.4em;
}

details summary::marker {
	color: var(--wp--preset--color--current);
}

.is-style-accordion summary,
.is-style-block summary {
	justify-content: space-between;
	border-radius: 0.4em;
}

.is-style-block {
	border-radius: 0.4em;
}

.is-style-block[open] {
	color: var(--wp--preset--color--base);
	background-color: var(--wp--preset--color--accent);
}

.is-style-block summary {
	justify-content: space-between;
}

.is-style-block summary {
	padding: var(--wp--preset--spacing--60);
}

.is-style-block[open] summary + * {
	border-top: 1px solid var(--wp--preset--color--dark-divider);
}

.is-style-block summary::after {
	content: "+";
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--preset--spacing--70);
	height: var(--wp--preset--spacing--70);
	transition: transform 100ms ease-in-out;
	border-radius: 20em;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: 1;
}

.is-style-block[open] summary::after {
	content: "-";
}

.is-style-accordion[open] summary::after
.is-style-counter[open] summary::after {
	transform: rotate(45deg);
}

.is-style-accordion summary,
.is-style-accordion summary + *,
.is-style-counter summary,
.is-style-counter summary + * {
	padding: var(--wp--preset--spacing--40);
}

.is-style-accordion summary::after,
.is-style-counter summary::after {
	content: '';
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	width: 0.5rem;
	height: 0.5rem;
	transform: rotate(45deg);
	background-color: transparent;
	border-radius: 0;
}

.is-style-accordion[open] summary::after,
.is-style-counter[open] summary::after  {
	transform: rotate(225deg);
}

.wp-block-details-wrapper {
	counter-reset: details-counter;
}

.is-style-counter {
	counter-increment: details-counter;
}

.is-style-counter summary {
	font-size: var(--wp--preset--font-size--large);
}

.is-style-counter summary::after {
	margin-inline-start: auto;
}

.is-style-counter summary + * {
	margin-block-start: 0 !important;
}

.is-style-counter > summary::before {
	content: counter(details-counter) ". ";
}

.is-style-counter> summary::before {
	content: counter(details-counter) ". ";
	font-weight: bold;
}
