:host {
	display: contents;
	font-size: 11px;
	--open-background-image: url(data:image/gif;base64,R0lGODlhEQARAPIHAAAAAOTh3bKwrf///7+/v39/fxMTEwAAACH5BAUAAAcALAAAAAARABEAAAMneLrc/jDKSWsVIOsNRBMGMYwjYXgOKJZnpA4m6hpFS2EyFVh871sJADs=);
	--heading-background-color: #f0f0f0;
	--heading-border-color: #a0a0a0;
}

:host slot[name="content"] {
	display: block;
	overflow: hidden;
	max-height: 100%;
	transition: max-height 0.25s ease-in-out;
}
:host([closed]) slot[name="content"] {
	max-height: 0;
}

div[part=heading] {
	display: flex;
	gap: 0.25rem;
	align-items: center;
	background: var(--heading-background-color);
	border-bottom: 1px solid var(--heading-border-color);
	border-top: 1px solid var(--heading-border-color);
	padding: 0.25rem;
	margin: 0px;
	line-height: 1.5rem;
	cursor: pointer;
}
div[part=heading]::before {
	content: "";
	display: block;
	height: 20px;
	width: 20px;
	background: var(--open-background-image) center no-repeat;
	transition: transform 0.25s ease-in-out;
}

:host([hidden]) {
	display: none;
}

:host([closed]) div[part="heading"]::before {
	transform: rotate(-90deg);
}

.text {
	flex: 1;
	white-space: nowrap;
}