#color-picker-container {
	-webkit-backdrop-filter: var(--blur);
	position: fixed;
	transform: translateX(calc(-100% + 1rem));
	z-index: 1;
	backdrop-filter: var(--blur);
	transition: var(--transition);
	inset-block-end: 1rem;
	inset-inline-start: 0;
	box-shadow: var(--edge-highlight), var(--shadow-glass);
	border-start-end-radius: var(--rounded-corner);
	border-end-end-radius: var(--rounded-corner);
	background-color: var(--glass-bg);
	padding: 0.5rem;
}

:root[dir*="rtl"] #color-picker-container {
	transform: translateX(calc(100% - 1rem));
}

:root[dir*="rtl"] #color-picker-container:hover {
	transform: none;
}

#color-picker-container:hover {
	transform: none;
}

#color-picker-container > small {
	display: block;
	margin-block-end: 0.5rem;
	font-weight: bold;
}

#color-picker-container label {
	margin-inline-end: 0.25rem;
	color: var(--fg-muted-5);
}

#color-picker-light,
#color-picker-dark {
	margin-inline-end: 0.25rem;
}