/*
* Copyright 2012 Research In Motion Limited.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and 
* limitations under the License.
*/

/*Slider*/
input[type="number"].ui-slider-input {
	display: none;
}

/* Sliders - many properties are common with toggle switches */
div.ui-slider {

	/*Dimensions*/
	font-size: @slider-font-size;

	/*Misc*/
	box-sizing: border-box;
	.rounded(@pillRound);

	/*Slider specific below*/
	//.background-img-gradient(#dbdbdb, #d4d4d4, #dbdbdb); //determine whether solid backgrounds should be used for toggle switches.
	margin: @slider-margins;
	height: @slider-height;
	width: auto;
	display: block;

	.ui-slider-bg {
		.rounded(1em);
		border: none;
	}

	.ui-slider-track{
		position: relative;
		overflow: visible;
		height: 0.3em;
		margin: 0;
		top: 0;
	}
	
	/*Handle Common Properties*/
	.ui-btn-inner {
		/*Dimensions*/
		font-size: @slider-font-size;
		box-sizing: border-box;
		width: 1.6em;
		height: 1.6em;
		max-height: none;
		max-width: none;

		top:0;
		left:0;

		/*Misc*/
		.rounded(50%);

		/*Transition*/
		-webkit-transition: 0.15s ease-in 0;
		-webkit-transition-property: top, left;
	}
	
		.ui-slider-track .ui-slider-handle, .ui-slider-inneroffset .ui-slider-handle
		{		
			/*Dimensions*/
			width: 1.6em;
			height: 1.6em;
			min-width: 0;
			box-sizing: border-box;

			/*overrides*/
			.noBorder();
			background: transparent;

			/*Spacing*/

			/*Misc*/
			display: block;
			.rounded(50%);

			top: -0.6em;
			margin-left: -0.8em;

			/*Transition*/
			-webkit-transition: width 0.15s ease-in 0, height 0.15s ease-in 0, top 0.15s ease-in 0, margin 0.15s ease-in 0, box-shadow 0.15s ease-in 0;

			/* Pressed State*/
			&.ui-btn-hover-a, &.ui-btn-hover-c {

				/*Dimensions*/
				width: 2.6em;
				height: 2.6em;
				.rounded(1.3em);

				/*Positioning*/
				top: -1.1em;
				margin-left: -1.3em;

				/*Aura*/
				background: rgba(0,168,223,0.2);
				-webkit-box-shadow: inset 0 0 15px 5px rgba(0,168,223,0.6);

				.ui-btn-inner {
					/*Gradient colours sampled from spec image: light = #3cbce7, dark = #01a8df */
					.background-img-gradient(@BBLightBlue, rgb(60,188,231), rgb(1,168,233));
					top: 1.3em - 0.8;
					left: 1.3em - 0.8;
				}
			}
		}
	
	
	
	/*Disabled Toggle State*/
	&.ui-disabled, .ui-slider-track.ui-disabled {
		opacity: 1;
	}
}

//at rule to override the rule inside jquery.mobile.structure.css
@media all and (min-width: 28em){
	.ui-field-contain label.ui-slider {
		vertical-align: top;
		display: inline-block;
		width: 20%;
		margin: 0 2% 0 0;
	}

	.ui-field-contain div.ui-slider{
		display: inline-block;
		margin: 1em 0.5em;
	}
	
	.ui-field-contain.ui-hide-label div.ui-slider {
		display: block;
		width: auto;
	}
	.ui-field-contain div.ui-slider-switch,
	.ui-field-contain.ui-hide-label div.ui-slider-switch {
		display: inline-block;
		width: 5.5em;
		margin: 0.5em;
	}
	.ui-field-contain div.ui-slider-switch.ui-mini {
		width: 5em;
	}
}


/*Toggle Switches*/
div.ui-slider-switch {
	/*Dimensions*/
	display: inline-block;
	width: @toggle-width;
	height: @toggle-height;

	/*Spacing*/
	margin: @toggle-margin;
	padding: 0.07em 0.05em 0.06em;

	/*On/off textarea*/
	.ui-slider-label {
		font-size: 1em;
		.rounded(@pillRound);
		line-height: 1.7; // centering text
		height: 100%;
		background: transparent;
	}

	.ui-slider-inneroffset {
		margin: 0 0.825em 0 0.775em;
	}

	/*Slider Handle*/
	.ui-slider-inneroffset .ui-slider-handle{

		/*overrides*/
		top: 0;

		/*Spacing*/
		margin: 0 0.5em 0 -0.775em;

		/*Transitions*/
		-webkit-transition: width 0.15s ease-in 0, height 0.15s ease-in 0, top 0.15s ease-in 0, margin 0.15s ease-in 0, box-shadow 0.15s ease-in 0, left 70ms linear;

		/* Pressed State*/
		&.ui-btn-hover-a, &.ui-btn-hover-c {

			/*Positioning*/
			top: -0.5em;
			margin: 0 0.5em 0 -1.278em;
		}
	}

	/*Disabled Toggle State*/
	&.ui-disabled {
		opacity: 1;

		span.ui-slider-label {
			opacity: 0.2;
		}
	}
}

/*Toggle Switch Text*/
span.ui-slider-label-a {
		text-indent: -1.2em;
	}

span.ui-slider-label-b {
	text-indent: 1.2em;
}

a.ui-btn.ui-slider-handle .ui-btn-inner {
	height: 1.6em;
}
