$primary: red !default;
$primary-alt: white !default;
$form-control-height: 24px !default;

.checkbox
{
	cursor: pointer;
	color: rgba( $primary-alt, 0.6 );
	align-items: center;

	label
	{
		pointer-events: none;
	}

	> .checkmark
	{
		padding: 1px;
		font-size: 22px;
		border: 3px solid $primary;
		border-radius: 4px;
		text-align: center;
		justify-content: center;
		align-items: center;
		color: transparent;
		min-height: $form-control-height;
		margin-right: 10px;
		pointer-events: none;
	}

	&.checked
	{
		> .checkmark
		{
			color: $primary-alt;
			background-color: $primary;
		}
	}

	&:active
	{
		transform: scale( 0.9 );
		transform-origin: 20px 50%;
		color: $primary-alt;
	}

	&:hover
	{
		color: $primary-alt;
	}
}