.c-checkbox {
	display: flex;
	align-items: center;
}


.c-checkbox__input {
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}


.c-checkbox__text {
	@include font-size(14,20);
	position: relative;
	display: inline-block;
	padding-left: 16px + space(1); /* 16px width of fake checkbox + gap */

	&::before,
	&::after {
		position: absolute;
		content: "";

		/*Needed for the line-height to take effect*/
		display: inline-block;
	}

	/*Outer box of the fake checkbox*/
	&::before {
		height: 16px;
		width: 16px;
		background-color: palette(neutral, 0);
		border: 2px solid palette(neutral, 300);
		top: 2px; // to vertically center it.
		left: 0;
		border-radius: 2px;
		transition: all 150ms linear;
	}

	/*Checkmark of the fake checkbox*/
	&::after {
		height: 5px;
		width: 10px;
		top: 7px;
		left: 3px;
		color: palette(neutral, 0);
		border-left: 2px solid;
		border-bottom: 2px solid;
		transform: rotate(-53deg);
	}


	/*Hide the checkmark by default*/
	.c-checkbox__input + &::after {
		content: none;
	}

	/*Unhide on the checked state*/
	.c-checkbox__input:checked + & {
		&::before {
			background-color: palette(feedback, focus);
			border-color: palette(feedback, focus);
		}
		&::after {
			content: "";
		}
	}


	/*Adding focus styles on the outer-box of the fake checkbox*/
	.c-checkbox__input:focus + &::before {
		outline: rgb(59, 153, 252) auto 5px;
		outline: none;
		box-shadow: 0 0 7px -1px rgba(palette(neutral, 900), 0.8);
		border-color: palette(feedback, focus);
	}
	
	
	/* Links inside the text */
	& > a {
		color: palette(feedback, focus);

		&:hover {
			text-decoration: underline;
			&::after { content: none; }
		}
	}
}


.c-checkbox__count {
	@include font-size(12);
	@include border-radius(s);
	display: flex;
	align-items: center;
	padding: 2px space(1);
	color: palette(neutral, 300);
	background-color: rgba(palette(neutral, 200), 0.7);
	border: 2px solid palette(neutral, 300);
	transition: all 80ms linear;

	.c-checkbox__input:checked ~ & {
		color: palette(feedback, focus);
		background-color: palette(feedback, focus);
		border-color: palette(feedback, focus);
	}
}


.c-checkbox--has-indicator {
	margin-top: space(0.5);

	& .c-checkbox__text {
		margin-right: auto;
	}
}