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

// Variables
$radio-label-line-height: 24px;
$radio-control-border-color: $gray;
$radio-control-check-color: $white;
$radio-control-active-bgcolor: $primary-color;
$radio-control-animation-duration: 0.1s;
$radio-control-width: 16px;
$radio-control-height: $radio-control-width;

.radioGroup {
    &_form-group {
		margin: 27px 0 0;
		& > & {
			padding: 0 28px;
		}
	}
	&_label {
		display: inline-block;
	}

	&_control {
		position: absolute;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);

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

		&:focus {
			& + .radioGroup_text {
				&:before {
					box-shadow: 0 0 4px $radio-control-active-bgcolor;
				}
			}
		}
	}

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

		&:after {
			content: '';
			position: absolute;
			top: $radio-label-line-height / 2;
			left: $radio-control-width / 2;
			display: block;
			width: $radio-control-width / 4;
			height: $radio-control-width / 4;
			border-radius: $radio-control-width / 8;
			background: $white;
			opacity: 0;
			transform: translate(-50%, -50%);
			transition: opacity 0.2s ease $radio-control-animation-duration;
		}
	}
}
