richlistbox {
	background: var(--material-background);
	border: var(--material-panedivider);
	// Prevent horizontal scrollbar on Windows
	overflow-x: hidden;

	richlistitem {
		padding: 0.2em 0.4em;
		align-items: center;

		@include compact {
			height: 22px;
		}

		@include comfortable {
			height: 28px;
		}

		&,
		& > *,
		& label {
			// Prevent word cut-off with double-byte characters
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			width: 100%;
		}

		// Selected but not focused
		&[selected="true"] {
			background-color: var(--color-quarternary-on-sidepane);
			color: var(--color-accent-text);
		}
	}

	&:focus {
		& > richlistitem {
			// Selected and focused
			&[selected="true"] {
				background-color: var(--color-accent);
				color: var(--color-accent-text);
			}
		}

		// Add focus ring to richlistbox if the richlistbox is multi-select
		&[seltype="multiple"] > richlistitem {
			&[selected="true"][current="true"] {
				outline: var(--default-focusring);
				outline-color: currentColor;
				outline-offset: calc(-1 * var(--default-focusring-width));
			}
		}
	}
}