.details:where(details) {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid var(--sui-color-outline-primary);
	border-radius: var(--sui-roundness-normal);
	background-color: var(--sui-color-surface);
}

.details:where(details) > :where(summary) {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 20px calc(var(--sui-base-padding) * 4 / 3);
	box-sizing: border-box;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.details:where(details) > :where(summary)::-webkit-details-marker {
	display: none;
}

.details:where(details) > :where(summary) > .icon {
	flex: 0 0 auto;
	width: 1.2em;
	height: 1.2em;
	margin-inline-end: var(--sui-icon-gap);
	margin-block-start: -0.15em;
}

.details:where(details) > :where(summary)::after {
	width: 0.45em;
	height: 0.45em;
	margin-inline-start: auto;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	content: "";
	transform: rotate(45deg);
	transition: transform 150ms ease-out;
}

.details:where(details) > :where(summary:hover) {
	background-color: var(--sui-color-highlight-secondary);
}

.details:where(details) > :where(summary:focus-visible) {
	outline: 2px solid var(--sui-color-key-primary);
	outline-offset: -2px;
}

.details:where(details[open]) > :where(summary)::after {
	transform: rotate(225deg);
}

.details:where(details) > :where(:not(summary)) {
	margin-inline: calc(var(--sui-base-padding) * 4 / 3);
	margin-block: 8px 24px;
}

.details:where(details):where(:has(> summary > .icon)) > :where(:not(summary)) {
	margin-inline-start: calc(
		var(--sui-base-padding) *
		4 / 3 +
		1.2em +
		var(--sui-icon-gap)
	);
}