.checkboxLabel {
	color: var(--app-font-color);
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	user-select: none;
	height: 32px;
}

.checkboxLabel:hover {
	background-color: var(--background-highlight-color);
}

.checkboxInput {
	cursor: pointer;
	margin: 3px 3px 3px 4px;
}

.checkboxLabel:has(.checkboxInput:disabled) {
	opacity: 0.5;
	cursor: not-allowed;

	&:hover {
		background-color: unset;
	}

	& .checkboxInput {
		cursor: not-allowed;
	}
}