:host {
	display: block;
}

:host>details>summary {
	display: flex;
	column-gap: 0.25rem;
	width: fit-content;
	list-style: none;
	align-items: center;
	cursor: pointer;
}

:host>details>summary>smoothly-icon {
	transition: transform 0.2s, opacity 0.1s;
	opacity: 0.3;
}

:host>details>summary:hover>smoothly-icon {
	opacity: 1;
}

:host>details[open]>summary>smoothly-icon {
	transform: rotate(90deg);
}

:host>details::slotted([slot=content]) {
	margin-left: var(--smoothly-summary-content-indent, 1.5rem);
}

@media (prefers-reduced-motion) { 
	:host>details>summary>smoothly-icon {
		transition: none;
	}
}