@charset "utf-8";

@import '../variable';

/**
 * 
 * @Radio.css
 * @author zhangxinxu 
 * @create 15-06-17
 * @edit 17-06-14 focusable
**/

input[type=radio] {
	position: absolute;
	opacity: 0;
	width: 20px; height: 20px;
	filter: alpha(opacity=0);
	cursor: pointer;
	z-index: -1;
}

.ui-radio {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 1px solid rgba($borderNormal, .99);  /* IE7-IE8 ignore this */
	border-radius: 50%;
	background-color: $white;
	box-sizing: border-box;
	vertical-align: -.5ex;
	*vertical-align: 0;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: border-color .2s;
    transition: border-color .2s;
	overflow: hidden;
}

:not(:disabled) + .ui-radio:hover {
	border-color: $borderHover;
}

:focus + .ui-radio {
	border-color: rgba($borderFocus, .99);
}

.ui-radio::before {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	margin: 4px auto 0;
	border-radius: 50%;
	background-color: $backgroundBlue;
	visibility: hidden;
}

:checked + .ui-radio::before {
	visibility: visible;
	-webkit-animation: bounceIn .2s;
	animation: bounceIn .2s;
}

:disabled + .ui-radio,
.ui-radio.disabled {
	border-color: $borderHover;
	opacity: .38;
}

/* error */
.error.ui-radio {
	border-color: $red;
}

/*IE7, IE8 使用图片作UI*/
@media \0screen\,screen\9 {
	.ui-radio {
		background: url(#{$urlImage}/Radio/radio.png) no-repeat;
	}
	.ui-radio:hover {
		background-position: 0 -20px;
	}
	[checked] + .ui-radio {
		background-position: 0 -40px;
	}
	[defaultChecked] + .ui-radio {
		background-position: 0 -40px;
	}
	[checked] + .ui-radio:hover,
	[checked][disabled] + .ui-radio {
		/* disabled态使用高亮边框 */
		background-position: 0 -60px;
	}
	[defaultChecked] + .ui-radio:hover,
	[defaultChecked][disabled] + .ui-radio {
		/* disabled态使用高亮边框 */
		background-position: 0 -60px;
	}
	[disabled] + .ui-radio {
		background-position: 0 -20px;
		filter: alpha(opacity=38);
	}
}