@import 'compass/css3';

/**
 * @global {color} [$cover-bg-color=#333]
 * Background-color for cover.
 *
 * @class Ext.ux.Cover
 * @xtype cover
 */
$cover-bg-color: #333 !default;


@mixin ux-cover {
	.ux-cover {
		background-color: $cover-bg-color;
	    position: relative;
		overflow: hidden;
		@include display-box;
		@include perspective(1000);
		
		-webkit-touch-callout: none;
	    -webkit-text-size-adjust: none;
	    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

		.ux-cover-scroller {
			@include transform-style(preserve-3d);

			@include transition-duration(0.4s);
			@include transition-timing-function(easy-out);

			//@include transition-property(-webkit-transform);
			-webkit-transition-property: -webkit-transform;

			
			.ux-cover-item {
				padding-top: 1px;
				@include transform-style(preserve-3d);
				@include transition-duration(0.4s);
				@include transition-timing-function(easy-out);
				
				//@include transition-property(-webkit-transform);
				-webkit-transition-property: -webkit-transform;
				
				background-color: $cover-bg-color;

				position: absolute;
				
			}
		}
	
		.ux-cover-item-inner {
			background-color: #d0d0d0;
			//not yet implemented in compass?
			-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent),  to(rgba(0,0,0, 0.3)));
		}
	
	}


}