.form__item--radio {
	@extend .form__item;
	position: relative;
	cursor: pointer;
	margin-top: 2.6rem; //height of .form__item__label
	margin-bottom: 0.3rem; //for align at bottom with .form__item
	margin-right: 2rem;
	height: 3.1rem; //standart height of input type of text
	display: inline-block;
	width: auto;

	table & {
		margin: -0.2rem;
		height: 1.9rem;
	}

	.just-checkboxes & {
		margin-top: 0;
	}
	.ears-vertical & {
		margin-top: 0;
		display: block;
	}
	.checkboxes--linear & {
		display: inline-block;
		margin: 1rem 2rem 0 0;
		&:first-child {
			margin-left: 4rem;
		}
		&:last-child {
			margin-right: 0;
		}
	}

	.tree & {
		margin-top: 0;
		margin-bottom: 0;
	}
}

.form__item--radio span {
	@extend .form__item__caption;
	line-height: 3.1rem;
	&:before {
		@extend .form__item__field;
		text-align: center;
		color: $color--grayforms-label;
		font-size: 2.2rem;
		line-height: 3rem;
		content: '';
		display: inline-block;
		float: left;
		width: 3rem !important;
		height: 3rem;
		margin-right: 1rem;
		padding: 0rem 0.2rem 0.9rem 0.2rem !important;
		line-height: 2.6rem;
		background-size: 60%;
		background-repeat: no-repeat;
		background-position: center center;
	}
	table & {
		&:before {
			width: 2.8rem !important;
			height: 2.8rem !important;
			font-size: 1.3rem;
			padding: 0 0.4rem 1rem 0.4rem !important;
			font-size: 2rem !important;
		}
	}
	table & {
		line-height: 2rem;
		&:before {
			background: $color--white;
			width: 2rem !important;
			height: 2rem !important;
			font-size: 0.9rem;
			padding: 0 0.2rem 1rem 0.15rem !important;
			font-size: 1.6rem !important;
			line-height: 2rem !important;
		}		
	}
	.checkboxes--small & {
		line-height: 2.2rem;
		&:before {
			background: $color--white;
			width: 2.2rem !important;
			height: 2.2rem !important;
			font-size: 0.9rem;
			padding: 0 0.2rem 1rem 0.2rem !important;
			font-size: 1.6rem !important;
			line-height: 2.2rem !important;
		}
	}
	&:hover {
		&:before {
			border-color: darken($color--grayforms-border, 10%);
			background-image: url(./imgs/radiobutton--hovered.png);
		}
	}
}


.form__item--radio input {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
}



.form__item__caption--radio {
	@extend .form__item__caption;
}

.form__item--radio input:checked + span:before { background-image: url(./imgs/radiobutton--checked.png); }


.form__item--radio-family {
	@extend .form__item;
}
.form__item__caption--radio-family {
	@extend .form__item__caption;
}
.form__item--radio {
	display: inline-block;
	margin-top: -0.4rem;
}

.form__item--radio span {
	font-weight: 400;
	&:before {
		text-align: center;
		font-size: 1.5rem;
		border-radius: 50%;
		text-align: center;
		width: 2.2rem !important;
		height: 2.2rem !important;
		line-height: 2rem !important;
		margin-top: 0.5rem;
	}
	&:hover:before {
		border-color: darken($color--grayforms-border, 10%);
		background-image: url(./imgs/radiobutton--hovered.png);
	}
}