.main {
	color: var(--N800);
	cursor: pointer;
	position: relative;
}

.input { display: none }

.checkbox {
	align-items: center;
	background: var(--N0);
	border: 1px solid var(--N400);
	border-radius: 4px;
	display: flex;
	height: 16px;
	justify-content: center;
	position: relative;
	transition:
		background 100ms ease-in-out,
		border-color 100ms ease-in-out,
		color 100ms ease-in-out;
	width: 16px;
}

.checkboxChecked {
	background: var(--G400);
	border-color: var(--G400);
	color: var(--N0);
}

/* stylelint-disable selector-max-combinators */
.main:focus-visible .checkbox,
.main:hover .checkbox {
	border-color: var(--N600);
}

.main:active .checkbox {
	border-color: var(--N500);
}

.main:focus-visible .checkboxChecked,
.main:hover .checkboxChecked {
	background: var(--G500);
	border-color: var(--G500);
}

.main:active .checkboxChecked {
	background: var(--G600);
	border-color: var(--G600);
}
/* stylelint-enable selector-max-combinators */

/* Needed to avoid layout shift when checkbox is an inline block */
.icon { position: absolute }