@import "config.less";

.ui-controlgroup,
fieldset.ui-controlgroup {
	padding: 0;
	margin: .5em 0 1em;
}
.ui-bar .ui-controlgroup {
	margin: 0 .3em;
}
.ui-controlgroup-label {
	font-size: 1em;
	line-height: 1.4;
	font-weight: normal;
	margin: 0 0 .3em;
}

.ui-controlgroup-controls {
	display: block;
}
.ui-controlgroup {
	li {
		list-style: none;
	}
	.ui-btn-inner {
		white-space: nowrap;
	}
	.ui-checkbox label,	.ui-radio {
		label {
			font-size: 1em;
		}
	}
	.ui-radio {
		width: 25%;
		overflow: hidden;
		label {
			text-align: center;
			white-space: nowrap;
		}
	}
	.ui-radio-off, .ui-radio-on {
		width: 100%;
	}
	.ui-radio-on {
		.ui-btn-inner {
			background : @color_bg;
			.ui-btn-text {
				color : @color_bar_title_text;
			}
		}
	}
	.ui-corner-left {
		border-left-width: 0px;
	}
	.ui-corner-right {
		border-right-width: 0px;
	}
}
.ui-controlgroup-vertical {
	.ui-btn, .ui-checkbox, .ui-radio {
		margin: 0;
		border-bottom-width: 0;
	}
	.ui-controlgroup-last {
		border-bottom-width: 1px;
	}

	.ui-radio {
		width : 100%;
	}

	.ui-radio label {
		text-align :left;
		.ui-btn-inner {
			margin-left : 16 * @unit_base;
			margin-right : 16 * @unit_base;
		}
	}
}
.ui-controlgroup-horizontal {
	padding: 0;
	.ui-btn {
		display: inline-block;
		margin-left : -4 * @unit_base;
		margin-right : -3 * @unit_base;
	}
	.ui-checkbox, .ui-radio {
		float: left;
		margin: 0 -1px 0 0;
	}
	.ui-controlgroup-last {
		margin-right: 0;
	}

	[data-role="button"] {
		border-top : 0px;
		border-bottom : 0px;
		border-radius : 0px;
		box-shadow : none;
		background : none;
		&.ui-btn-down-s, .ui-btn-active-s {
			.ui-btn-inner {
				background : @color_bg;
				.ui-btn-text {
					color : @color_bar_title_text;
				}
			}
		}

		&.ui-btn-down-s {
			.ui-btn-inner {
				background : @color_tabbar_btn_tab_press;
			}
		}

		>.ui-btn-inner {
			border : 0px solid;
			box-shadow : none;
			padding-top : 5 * @unit_base;
			padding-bottom : 5 * @unit_base;
			padding-left : 10 * @unit_base;
			padding-right : 10 * @unit_base;
		}
	}

	label {
		> span.ui-btn-inner {
			padding-top : 3 * @unit_base;
			padding-bottom : 3 * @unit_base;
		}
	}

}