.leodin-color-dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 5px;
	max-width: 100%;
	margin: 0 0 6px;
	padding: 0;
	line-height: 1;
}

.leodin-color-dots > .leodin-color-dots__dot {
	display: block;
	box-sizing: border-box;
	flex: 0 0 13px;
	width: 13px;
	height: 13px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	cursor: default;
}

.text-center .leodin-color-dots {
	justify-content: center;
}

.text-right .leodin-color-dots {
	justify-content: flex-end;
}

@media (forced-colors: active) {
	.leodin-color-dots > .leodin-color-dots__dot {
		forced-color-adjust: none;
		border-color: CanvasText;
	}
}