.checkbox {
	align-items: center;
	cursor: default;
	display: flex;
	height: var(--size-medium);
	position: relative;

	&__box {
		opacity: 0;
		width: 10px;
		height: 10px;
		margin: 0;
		padding: 0;
	}

	&__label {
		align-items: center;
		color: var(--black8);
		display: flex;
		font-family: var(--font-stack);
		font-size: var(--font-size-xsmall);
		font-weight: var(--font-weight-normal);
		line-height: var(--font-line-height);
		letter-spacing: var(--font-letter-spacing-pos-xsmall);
		margin-left: -16px;
		padding: 0 var(--size-xsmall) 0 var(--size-small);
		height: 100%;
		user-select: none;
	}

	&__label:before {
		border: 1px solid var(--black8);
		border-radius: var(--border-radius-small);
		content: '';
		display: block;
		width: 10px;
		height: 10px;
		margin: -1px 10px 0 -8px;
		box-shadow: none;
	}

	/* unchecked */
	/*
	&__box:focus + &__label:before {
		border: 1px solid var(--white);
	    box-shadow: 0 0 0 2px var(--blue);
	}*/
	&__box:disabled + &__label {
		color: var(--black);
		opacity: 0.3;
	}

	/* checked */
	&__box:checked + &__label:before {
		background-color: var(--blue);
		background-image: url('data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%227%22%20viewBox%3D%220%200%208%207%22%20width%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m1.17647%201.88236%201.88235%201.88236%203.76471-3.76472%201.17647%201.17648-4.94118%204.9412-3.05882-3.05884z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
		background-repeat: no-repeat;
		background-position: 1px 2px;
		border: 1px solid var(--blue);
	}
	/*
	&__box:checked:focus + &__label:before {
		border: 1px solid var(--white);
	    box-shadow: 0 0 0 2px var(--blue);
	}*/
	&__box:checked:disabled + &__label:before {
		border: 1px solid transparent;
		background-color: var(--black8);
	}
}