.badge-color-picker {
	display: inline-grid;
	gap: 0.5em;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: row;
}

/* display horizontally for bigger viewports */
@media (min-width: 576px) {
	.badge-color-picker {
		grid-template-rows: repeat(3, 1fr);
		grid-auto-flow: column;
	}
}

.badge-color-picker .form-check {
	/* reset bootstrap styles */
	padding-left: 0;
	display: inline-block;
}

/* https://moderncss.dev/pure-css-custom-styled-radio-buttons/ */
.badge-color-picker .form-check-input {
	/* reset bootstrap styles */
	margin-left: 0;
	position: relative;

	/* customize input */
	appearance: none;
	background-color: var(--background-color);
	margin: 0;
	width: 2em;
	height: 2em;
	border-radius: 0.5em;

	/* center children */
	display: grid;
	place-content: center;
}

.badge-color-picker .form-check-input:checked::before {
	content: "";
	width: 0.5em;
	height: 0.75em;
	border: solid var(--text-color);
	border-width: 0 3px 3px 0;
	transform: translateY(-1px) rotate(45deg);
}

/* visually hide label */
/* https://rgaa-checker.com/blog/css-visually-hidden-techniques */
.badge-color-picker .form-check-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.badge-custom-appareance {
	background-color: var(--background-color);
	color: var(--text-color);
}