.details {
	display: block;
	border-bottom: var(--line-width-300) solid black;
}

.details summary {
	outline-offset: calc(var(--line-width-focus) * -1);
}

.details-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: var(--layout-space-100) var(--layout-space-50);
	font-size: var(--font-size-200);
	font-weight: 600;
	gap: 1em;
}

.details-header-content {
	width: 100%;
}

.details-header-icon {
	[data-as-icon] {
		transform: rotate(90deg);
		transition: transform var(--ms-50) ease-in-out;
		color: var(--color-1-100);
	}
}

.details details[open] .details-header-icon [data-as-icon] {
	transform: rotate(270deg);
}


.details-content {
	padding: var(--layout-space-100) var(--layout-space-50);
}

wbc-details:defined {
	overflow: hidden;
	height: var(---heightSummary);
	transition: height var(--ms-200) ease-in-out;

	&:has(details[open]) {
		height: calc(var(---heightSummary) + var(---heightContent));
	}
}