:host {
	display: contents;
	font-size: 11px;
	--open-background-image: url(../images/pnl_open.gif);
	--close-background-image: url(../images/pnl_close.gif);
	--heading-background-color: #f0f0f0;
	--heading-border-color: #a0a0a0;
}

:host([closed]) slot[name="content"] {
	display: none;
}

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;
}

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

:host([closed]) div[part="heading"]::before {
	background-image: var(--close-background-image);
}

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