:host([selected]) {
	background-color: rgb(var(--smoothly-item-selected-background));
	color: rgb(var(--smoothly-item-selected-foreground));
	border-left: .3em solid rgb(var(--smoothly-item-selected-border));
}

:host([disabled]),
:host([disabled])::slotted(*) {
	background-color: rgb(var(--smoothly-item-disabled-background));
	color: rgb(var(--smoothly-item-disabled-foreground));
	opacity: var(--smoothly-item-disabled-opacity);
	cursor: not-allowed;
}

:host:not([hidden]) {
	display: flex;
	align-items: center;
	padding: 0.5em;
	cursor: pointer;
	border-left: .3em solid transparent;
	color: rgb(var(--smoothly-item-foreground));
	fill: rgb(var(--smoothly-item-foreground));
	stroke: rgb(var(--smoothly-item-foreground));
	box-sizing: border-box;
	min-height: 3rem;
}

:host::slotted(*) {
	color: rgb(var(--smoothly-item-foreground));
	fill: rgb(var(--smoothly-item-foreground));
	stroke: rgb(var(--smoothly-item-foreground));
}

:host:not([disabled])[marked],
:host:not([disabled]):hover,
:host:not([disabled])[marked]::slotted(*),
:host:not([disabled]):hover::slotted(*) {
	background-color: rgb(var(--smoothly-item-hover-background));
	color: rgb(var(--smoothly-item-hover-foreground));
	fill: rgb(var(--smoothly-item-hover-foreground));
	stroke: rgb(var(--smoothly-item-hover-foreground));
}