/*
* jQuery Mobile Framework
* Copyright (c) jQuery Project
* Dual licensed under the MIT (MIT-LICENSE.txt) or GPL (GPL-LICENSE.txt) licenses.
*/
@import "config.less";

.ui-checkbox .ui-btn-inner, .ui-radio .ui-btn-inner { white-space: normal; }
//.ui-checkbox .ui-btn-icon-left .ui-btn-inner,.ui-radio .ui-btn-icon-left .ui-btn-inner { padding-left: 2.313em; }
//.ui-checkbox .ui-btn-icon-right .ui-btn-inner, .ui-radio .ui-btn-icon-right .ui-btn-inner { padding-right: 2.313em; }
//.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {left: 15px; }
//.ui-checkbox .ui-btn-icon-right .ui-icon, .ui-radio .ui-btn-icon-right .ui-icon {right: 15px; }

.ui-icon-radio-off {
	background-color: transparent;	
}

//font size: 42....
@checkbox-icon-left: (16*@unit_base);	//16

@checkbox-radio-all-height: (80*@unit_base);	//on-off style is the biggest.

@checkbox-radio-size-width: (42*@unit_base);
@checkbox-radio-size-height: (42*@unit_base);

@favorite-size-width: (64*@unit_base);
@favorite-size-height: (64*@unit_base);

@checkbox-radio-icon-internal-bottom: (-@checkbox-radio-size-height/2); //-icon size/2 (42/2)
@favorite-icon-internal-bottom: (-@favorite-size-height/2); //-icon size/2 (64/2)

@icon-left-margin: (16*@unit_base);
@checkbox-radio-label-left: (@checkbox-radio-size-width + 2*@icon-left-margin);	//16+42+16
@favorite-label-left: (@favorite-size-width + 2*@icon-left-margin);	//16+64+16

.ui-checkbox, .ui-radio {
	height: @checkbox-radio-all-height; 
	position: relative;
	margin: 0;
	z-index: 1;
	
	//clear btn basic setting
	.LESSclear-btn-basic-setting();
	input {
		position: absolute; 
		left: -10000px;
		height: 100%;
		outline: 0 !important; 
		z-index: 0;
	}
	.ui-btn { 
		height: 100%;
		margin: 0; 
		text-align: left; 
		z-index: 2; 
	}
	.ui-btn.ui-btn-icon-left { 
		display: block;
		.ui-btn-inner {
			display: inline-block;
			line-height: @checkbox-radio-all-height;
			padding: 0 16*@unit_base 0 16*@unit_base;
			.ui-btn-text {
				display: inline-block;
				vertical-align: middle;
				margin-left: 40 * @unit_base;
			}
			.ui-icon {
				position: absolute;	
				top: 50%;
				left: 16 * @unit_base;
				width: @checkbox-radio-size-width; 
				height: @checkbox-radio-size-height;
				margin-top: @checkbox-radio-icon-internal-bottom; 
			}
		}
	}
}
.ui-checkbox.favorite {
	input {
		position: absolute;
		left: -10000px;
		height: 100%;
		outline: 0 !important;
		z-index: 1;
	}

	.ui-btn.ui-btn-icon-left {
		display: block;
		.ui-btn-inner {
			display: inline-block;
			line-height: @checkbox-radio-all-height;
			padding: 0 0 0 16*@unit_base;
			.ui-btn-text {
				display: inline-block;
				vertical-align: middle;
				margin-left: @favorite-label-left;
			}
			.ui-icon {
				position: absolute;
				top: 50%;
				width: @favorite-size-width;
				height: @favorite-size-height;
				margin-top: @favorite-icon-internal-bottom; 
			}
		}
	}
}

/* put img inside of checkbox(normal, favorite, on&off style) */
@checkbox-radio-size-width: (42*@unit_base);
@checkbox-radio-size-height: (42*@unit_base);

@favorite-size-width: (64*@unit_base);
@favorite-size-height: (64*@unit_base);

.ui-icon-checkbox-off, .ui-icon-checkbox-on,
.favorite .ui-icon-checkbox-off, .favorite .ui-icon-checkbox-on,
.ui-icon-checkbox-on-press, .ui-icon-checkbox-off-press,
.ui-icon-radio-off, .ui-icon-radio-on,
.ui-icon-radio-on-press, .ui-icon-radio-off-press {
	background-size: 100% 100%;
	background-color: transparent;
}
.ui-icon-checkbox-off {
	width: @checkbox-radio-size-width;
	height: @checkbox-radio-size-height;
	background-image: url(images/00_check_bg.png);
}
.ui-icon-checkbox-on {
	width: @checkbox-radio-size-width;
	height: @checkbox-radio-size-height;
	background-image: url(images/00_check_checking.png), url(images/00_check_bg.png);
	background-repeat: no-repeat;
}
.ui-icon-checkbox-off-press {
	width: @checkbox-radio-size-width;
	height: @checkbox-radio-size-height;
	background-image: url(images/00_check_bg_press.png);
}
.ui-icon-checkbox-on-press {
	width: @checkbox-radio-size-width;
	height: @checkbox-radio-size-height;
	background-image: url(images/00_check_checking.png), url(images/00_check_bg_press.png);
	background-repeat: no-repeat;
}
.favorite {
	.ui-icon-checkbox-off,
	.ui-icon-checkbox-off-press {
		width: @favorite-size-width;
		height: @favorite-size-height;
		background-image: url(images/00_winset_icon_favorite_off.png);
	}
	.ui-icon-checkbox-on,
	.ui-icon-checkbox-on-press {
		width: @favorite-size-width;
		height: @favorite-size-height;
		background-image: url(images/00_winset_icon_favorite_on.png);
	}
}

.ui-icon-radio-off {
	width: @checkbox-radio-size-width;
	height: @checkbox-radio-size-height;
	background-image: url(images/00_button_radio_normal2.png);
}
.ui-icon-radio-on {
	width: @checkbox-radio-size-width;
	height: @checkbox-radio-size-height;
	background-image: url(images/00_button_radio_normal1.png);
}
.ui-icon-radio-on-press {
	width: @checkbox-radio-size-width;
	height: @checkbox-radio-size-height;
	background-image: url(images/00_button_radio_press2.png);
}
.ui-icon-radio-off-press {
	width: @checkbox-radio-size-width;
	height: @checkbox-radio-size-height;
	background-image: url(images/00_button_radio_press1.png);
}