@import '../../../styles/definitions/colors';
@import '../../../styles/definitions/typography';
@import '../../../styles/definitions/mixins';
@import '../../../styles/definitions/forms';

// Variables
$checkbox-control-border-color: $gray;
$checkbox-control-check-color: $white;
$checkbox-control-active-bgcolor: $primary-color;
$checkbox-control-animation-duration: 0.1s;
$checkbox-control-size: 18px;
$checkbox-control-size-small: 14px;

.checkbox {
	&_container {
		& + & {
			margin-top: $form-checkbox-group-spacing;
		}
	}
	&_fieldset {
		@extend %form-fieldset;
	}

	&_legend {
		@extend %form-label;
	}
	
	&_label {
		display: inline-block;
		cursor: pointer;
	}
	
	&_control {
		position: absolute;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);

		&:focus {
			& + .checkbox_text {
				&:before {
					border-color: $checkbox-control-active-bgcolor;
				}
			}
		}
	}

	&_text {
		position: relative;
		display: inline-block;
		padding-left: $checkbox-control-size + 10px;
		font-size: $bodyFontSize5;
		line-height: $form-checkbox-label-line-height;
		
		&:before {
			content: '';
			position: absolute;
			top: $form-checkbox-label-line-height / 2;
			left: 0;
			display: block;
			width: $checkbox-control-size;
			height: $checkbox-control-size;
			background-color: $checkbox-control-check-color;
			border: 1px solid $checkbox-control-border-color;
			border-radius: 4px;
			transform: translateY(-50%);
			transition: border $checkbox-control-animation-duration cubic-bezier(.4,.0,.23,1);
		}

		&:after {
			content: '';
			position: absolute;
			top: $form-checkbox-label-line-height / 2;
			left: $checkbox-control-size / 2;
			display: block;
			width: 10px;
			height: 5px;
			border-left: 2px solid $white;
			border-bottom: 2px solid $white;
			opacity: 0;
			transform: translate(-50%, -75%) rotate(-45deg);
			transition: opacity 0.2s ease $checkbox-control-animation-duration;
		}

		&--checked {
			&:before {
				border: $checkbox-control-size / 2 solid $checkbox-control-active-bgcolor;
				animation: shrink-bounce 200ms cubic-bezier(.4,.0,.23,1);
			}
			&:after {
				opacity: 1;
			}
		}

		&--small {
			font-size: $bodyFontSize6;
			padding-left: $checkbox-control-size-small + 10px;

			&:before {
				width: $checkbox-control-size-small;
				height: $checkbox-control-size-small;
			}
			&:after {
				left: $checkbox-control-size-small / 2;
			}
		}
		&--small#{&}--checked {
			&:before {
				border-width: $checkbox-control-size-small / 2;
			}
		}
		&--error {
			&:before {
				border-color: $form-error-color;
			}
		}
	}

	&_error {
		@extend %input-error;
	}
}
