/**
*	颜色
*/
@import "../var.scss";

.mt-radio{
	display:inline-block;
	cursor:pointer;
	vertical-align:middle;
	&:hover{
		.mt-radio-icon{
			border-color:$blue;
		}
	}
	.mt-radio-icon{
		display:inline-block;
		width: 14px;
		height:14px;
		vertical-align:middle;
		border:1px solid #ccc;
		border-radius:100px;
		margin-right:5px;
		transition:0.5s;
		box-sizing: content-box;
		&:after{
			content: '';
			float: left;
			display: inline-block;
			display: none\9\0;
			transition:0.2s;
			width: 60%;
			height: 60%;
			background: $blue;
			border-radius:100px;
			margin:20%;
			transform: scale(0);
		}
	}
}

.mt-radio-checked{
	.mt-radio-icon{
		border-color:$blue;
		&:after{
			display: block\9\0;
			transform: scale(1);
		}
	}
}

.mt-radio-disabled{
	opacity:0.6;
	.mt-radio-icon{
		border-color:#ccc;
		&:after{
			background: #ccc;
		}
	}
	&:hover{
		.mt-radio-icon{
			border-color:#ccc;
		}
	}
}

.mt-radio-group{
	display: inline-block;
	.mt-radio{
		margin-right: 10px;
	}
}

.mt-radio-group-button{
	font-size:12px;
	.mt-radio-icon{
		display: none;
	}
	.mt-radio{
		margin-right:-1px;
		border:1px solid #ccc;
		padding: 4px 10px;
	}
	.mt-radio-checked{
		// color:$blue;
		border-color:$blue;
		background:$blue;
		color:#fff;
		box-shadow: 0 0 -1px 0 $blue;
		position: relative;
		z-index: 10;
	}
}