.checkbox {
	display: flex;
    flex-direction: row;
	position: relative;
	padding-left: calc(var(--unit-8) - (var(--unit-1) / 2));
	font-family: var(--font-family-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-body);
	line-height: var(--line-height-body);
	user-select: none;
	color: var(--text-default);
	align-items: center;
}
.checkbox .label {
	cursor: pointer;
    display: flex;
    flex-direction: column;
}
.checkbox .label .helper {
	margin-top: var(--unit-0);
}
.checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: var(--unit-0);
	width: var(--unit-0);
}
.checkbox .mark {
	position: absolute;
	left: var(--unit-0);
	height: calc(var(--unit-6) - var(--unit-1));
	width: calc(var(--unit-6) - var(--unit-1));
	border: calc(var(--unit-1) / 2) solid var(--border-default);
	background: var(--surface-default);
	border-radius: var(--rounded-4);
	display: flex;
	align-items: flex-end;
	cursor: pointer;
}
.checkbox input:focus ~ .mark {
	box-shadow: var(--shadow-white), var(--shadow-blue-50);
}
.checkbox:hover input ~ .mark {
	background: var(--surface-default);
	border: calc(var(--unit-1) / 2) solid var(--action-default);
}
.checkbox input:checked ~ .mark {
	background: var(--action-default);
	border: calc(var(--unit-1) / 2) solid var(--action-default);
}
.checkbox:hover input:checked ~ .mark {
	background: var(--action-hovered);
	border: calc(var(--unit-1) / 2) solid var(--action-hovered);
}
.checkbox input:indeterminate ~ .mark {
	background: var(--action-default);
	border: calc(var(--unit-1) / 2) solid var(--action-default);
}
.checkbox:hover input:indeterminate ~ .mark {
	background: var(--action-hovered);
	border: calc(var(--unit-1) / 2) solid var(--action-hovered);
}
.checkbox .mark:after {
	content: "";
	opacity: 1;
	width: var(--unit-2);
	height: 0;
    left: calc(var(--unit-1) / 2);
    top: calc((var(--unit-2) + (var(--unit-1) / 2)) * -1);
	border: solid var(--white);
    border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transform-origin: bottom;
	position: relative;
}
.checkbox input:checked ~ .mark:after {
	opacity: 1;
	height: calc(var(--unit-1) + var(--unit-3));
	border-width: var(--unit-0) var(--unit-1) var(--unit-1) var(--unit-0);
}
.checkbox input:indeterminate ~ .mark:after {
	opacity: 1;
    height: calc(var(--unit-2) + var(--unit-2));
    width: var(--unit-0);
    border-width: var(--unit-0) var(--unit-1) var(--unit-1) var(--unit-0);
    transform: rotate(90deg);
    transform-origin: 150% 90%;
}
.checkbox.right {
	padding-left: var(--unit-0);
	padding-right: var(--unit-8);
}
.checkbox.right .mark {
	left: unset;
	right: var(--unit-0);
}
.checkbox input:disabled ~ .mark {
	background: var(--bg-default);
	border: calc(var(--unit-1) / 2) solid var(--action-disabled);
}
.checkbox input:disabled:checked ~ .mark {
	background: var(--action-disabled);
	border: calc(var(--unit-1) / 2) solid var(--action-disabled);
}
.checkbox input:disabled:checked ~ .mark:after {
	border-color: var(--bg-default);
}
li:has(.checkbox) {
    list-style: none;
}
li .checkbox .label {
    padding-bottom: var(--unit-2);
}
li .checkbox {
    margin-bottom: var(--unit-0);
}
.checkbox + ul {
    margin-left: var(--unit-8);
}