/*** TODO: Hover Style ***/

.hoo-radio{
	&:checked,
	&:not(:checked){
		position: absolute;
		left: -9999px;
	}

	&:checked + label,
	&:not(:checked) + label{
		line-height: 20px;

		position: relative;

		display: inline-block;

		padding-left: 28px;

		cursor: pointer;

		color: $bodyText;
		font-size: px2rem(14px);
	}

	&:checked + label:before,
	&:not(:checked) + label:before{
		position: absolute;
		top: 0;
		left: 0;

		width: 18px;
		height: 18px;

		content: "";

		border: 1px $buttonBorder solid;
		border-radius: 100%;
		background: #fff;
	}

	&:checked + label:after,
	&:not(:checked) + label:after{
		position: absolute;
		top: 4px;
		left: 4px;

		width: 12px;
		height: 12px;

		content: "";
		transition: all .2s ease;

		border-radius: 100%;
		background: $primaryButtonBackground;
	}

	&:checked:hover + label:after,
	&:not(:checked):hover + label:after{
		position: absolute;
		top: 4px;
		left: 4px;

		width: 12px;
		height: 12px;

		content: "";
		transition: all .2s ease;

		border-radius: 100%;
		background: $buttonBorder;
	}

	&:not(:checked) + label:after{
		transform: scale(0);

		opacity: 0;
	}

	&:checked + label:after{
		transform: scale(1);

		opacity: 1;
	}
	&:disabled + label{
		color: $disabledText;
	}
	&:disabled + label:before{
		border-color: $disabledText;
	}
}