@import "../default/theme.less";

.plx-radio-container {
	font-size: 0;
	position: relative;
}

.plx-radio {
	position: absolute;
	z-index: -1;
	opacity: 0;
	& + .radio-substitute {
		position: relative;
		display: inline-block;
		cursor: pointer;
		height: @checkbox-size;
		width: @checkbox-size;
		border: 1px solid @border-color-base;
		border-radius: @checkbox-size;
		vertical-align: middle;
	}
	&:hover + .radio-substitute,
	&:focus + .radio-substitute {
		border-color: @primary-color;
		outline: none;
		background-image: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		text-shadow: none;
	}
	&:checked + .radio-substitute {
		.radio-boder-checked-width(@font-size);
	}
	&:disabled + .radio-substitute,
	&[disabled] + .radio-substitute {
		border-color: @border-color-base;
		background-color: @input-bg-color-disabled;
		cursor: not-allowed;
	}
	&:checked [disabled] + .radio-substitute {
		border-color: @border-color-split;
		background-color: @border-color-split;
		cursor: not-allowed;
	}
	& + .radio-substitute + span {
		font-weight: normal;
		font-size: @font-size;
		cursor: pointer;
		vertical-align: middle;
		.font-padding(@font-size);
	}
	&:disabled + .radio-substitute + span,
	&[disabled] + .radio-substitute + span {
		cursor: not-allowed;
	}
}

.radio-boder-checked-width(12px) {
	border: 4px solid @primary-color;
}

.radio-boder-checked-width(14px) {
	border: 5px solid @primary-color;
}

.font-padding(12px) {
	padding-left: 6px;
}

.font-padding(14px) {
	padding-left: 10px;
}

/*radio-group*/

@radio-group-border-height: 1px;
@padding-normal: 0px 16px;
@padding-sm: 0px 14px;
@min-width-normal: 80px;
@min-width-sm: 60px;

.border-min-width(@min-width, 14px) {
	min-width: @min-width + 8px;
}

.border-min-width(@min-width, 12px) {
	min-width: @min-width;
}

.btn.dropdown-toggle,
.btn-group .btn.dropdown-toggle,
.btn:hover,
.btn:disabled,
.btn[disabled],
.btn:focus,
.btn:active,
.btn.active {
	outline: none !important;
	background-image: none !important;
	filter: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	text-shadow: none;
}

.plx-radio-group {
	cursor: pointer;
	font-size: @font-size;
	height: @btn-height;
	background-color: @common-color;
	border: @radio-group-border-height solid @border-color-base;
	color: @text-color;
	border-radius: @radius;
	padding: @padding-normal;
	.border-min-width(@min-width-normal, @font-size);
	transition: none;
	&:hover,
	&:focus,
	&:active {
		outline: none;
		background-image: none;
		filter: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		text-shadow: none;
	}

  &:hover,
  &:focus {
    color: @btn-common-color-text-hover;
    border-color: @btn-common-color-border-hover;
    background-color: @common-color-hover;
  }
  &:active {
    color: @btn-common-color-text-click;
    border-color: @btn-common-color-border-click;
    background-color: @common-color-click;
  }
	&.active {
		background-color: @primary-color;
		color: @scene-textcolor;
		border-color: @primary-color;
	}
	& > span {
		line-height: @btn-height - @radio-group-border-height * 2;
	}
}

.plx-radio-group-sm {
	height: @btn-height-sm;
	padding: @padding-sm;
	.border-min-width(@min-width-sm, @font-size);
	& > span {
		line-height: @btn-height-sm - @radio-group-border-height * 2;
	}
}