//
// Tiles
// --------------------------------------------------


//Basic Tile Styling

	.tile-heading, .tile-body, .tile-footer {
		&:extend(.clearfix all);
		.transition(~"0.05s ease-in");
	}

	.info-tile, .shortcut-tile {
		margin: 0px 0px 24px;
		display: block;
		border-radius: @border-radius-base;
	}
	a.info-tile, a.shortcut-tile, a.amazo-tile {background: none;}


// Amazo Tile

	.amazo-tile {
		margin-bottom: 24px;
		.tile-heading {
			padding: 8px 12px;
			font-size: @font-size-small;
			line-height: @line-height-small;
			.border-top-radius(@border-radius-base);

			.title {
				letter-spacing: 2px;
				text-transform: uppercase;
				float: left;
			}
			.secondary {float: right;}
		}

		.tile-body {
			padding: 16px;
			.content {
				font-size: @font-size-h2;
				line-height: 30px;
				font-weight: 400;
				text-align: left;
			}
		}

		.tile-footer {
			height: 32px;
			position: relative;
			.border-bottom-radius(@border-radius-base);
			.sparkline-line > canvas {.border-bottom-radius(@border-radius-base);}
			.sparkline-bar > canvas {.border-bottom-radius(@border-radius-base);}
			.progress {
				height: 32px;
				.border-top-radius(0);
				.border-bottom-radius(@border-radius-base);
			}
			.info-text {
				font-size: @font-size-small;
				position: absolute;
				padding: 0 12px;
				line-height: 32px;
				&.text-right {right: 0}
				&.text-left {left: 0}
			}
		}
	}

	.amazo-tile-variant(@tile-bg, @title-color, @secondary-color, @content-color, @progress-bg, @progress-bar-bg, @info-text-color) {
		.tile-heading {
			background: @tile-bg;
			.title {color: @title-color}
			.secondary {color: @secondary-color}
		}
		.tile-body {
			background: @tile-bg;
			.content {color: @content-color}
		}
		.tile-footer {
			background: @tile-bg;
			.progress {
				background: @progress-bg;
				.progress-bar {background: @progress-bar-bg}
			}
			.info-text {color: @info-text-color}
		}
	}

	.amazo-tile {
		&.tile-white {.amazo-tile-variant(#fff, @gray, @gray-lighter, @gray-darker, @gray-300, @gray-300, @gray-darker);}
		&.tile-info {.amazo-tile-variant(@brand-info, #fff, @cyan-200, #fff, @cyan-700, @cyan-A400, #fff);}
		&.tile-success {.amazo-tile-variant(@brand-success, #fff, @light-green-200, #fff, @light-green-700, @light-green-A400, #fff);}
	}


// Shortcut Tile

	.shortcut-tile {
		.tile-body {
			padding: 12px;
			font-size: @font-size-h2;
			line-height: @font-size-h2;
			border-top-right-radius: @border-radius-base;
			border-top-left-radius: @border-radius-base;
			i {
				font-size: @font-size-h2; color: rgba(255,255,255,0.5); .transition(~"0.05s ease-in");
			}
			.pull-right {
				line-height: 0;
				.badge {
					.rgba(black, 0.25);
				}
			}
		}
		.tile-footer {
			text-transform: none;
			text-align: right;
			padding: 8px 12px;
			letter-spacing: 2px;
			font-size: @font-size-small;
			text-transform: uppercase;
			border-bottom-right-radius: @border-radius-base;
			border-bottom-left-radius: @border-radius-base;
		}
		&:hover {
			text-decoration: none;
			i {color: #fff;}
		}
	}
	//Mixin
	.shortcut-tile-variant(@color, @text-color:#fff) {
		.tile-heading,.tile-body,.tile-footer {background: @color;}
		color: @text-color !important;
		&:hover {
			.tile-heading, .tile-body, .tile-footer {background: darken(@color, 5%);}
			color: @text-color;
		}
	}

	.shortcut-tile {
		&.tile-info 			{.shortcut-tile-variant(@brand-info);}
		&.tile-success 			{.shortcut-tile-variant(@brand-success);}
		&.tile-danger 			{.shortcut-tile-variant(@brand-danger);}
		&.tile-warning 			{.shortcut-tile-variant(@brand-warning);}
		&.tile-primary 			{.shortcut-tile-variant(@brand-primary);}
		&.tile-inverse 			{.shortcut-tile-variant(@brand-inverse);}
		&.tile-midnightblue 	{.shortcut-tile-variant(@brand-midnightblue)}
		&.tile-sky 				{.shortcut-tile-variant(@brand-teal);}
		&.tile-orange 			{.shortcut-tile-variant(@brand-orange)}; 
		&.tile-indigo 			{.shortcut-tile-variant(@brand-indigo)}; 
		&.tile-green 			{.shortcut-tile-variant(@brand-green);}
		&.tile-blue 			{.shortcut-tile-variant(@brand-blue);}
		&.tile-magenta  		{.shortcut-tile-variant(@brand-pink);}
		&.tile-purple  			{.shortcut-tile-variant(@brand-purple);}
		&.tile-brown  			{.shortcut-tile-variant(@brand-brown);}
		&.tile-grape  			{.shortcut-tile-variant(@brand-lime);}
		&.tile-toyo  			{.shortcut-tile-variant(@brand-amber);}
		&.tile-alizarin  		{.shortcut-tile-variant(@brand-deeporange);}
	}


// Info Tile

	.info-tile {
		.tile-heading {
			letter-spacing: 2px;
			padding: 8px 12px;
			line-height: @line-height-small;
			text-transform: uppercase;
			text-align: center;
			font-size: @font-size-small;
			.border-top-radius(@border-radius-base);

			.pull-right {
				.transition(~"0.05s ease-in");	
				color: rgba(255, 255, 255, 0.5);

				.sparkline-block {
					font-size: 0;
					padding: 2px 0;
				}
			}

			.title {
				float: left !important;
				letter-spacing: 2px;
				text-transform: uppercase;
			}
			.secondary {
				float: right !important;
				letter-spacing: normal !important;
				text-transform: none !important;
			}
		}
		.tile-body {
			font-size: @font-size-h2;
			border-bottom-right-radius: @border-radius-base;
			border-bottom-left-radius: @border-radius-base;
			padding: 16px;
			line-height: 30px;
			font-weight: 400;

			.text-centered {
				position: relative;
				text-align: center;
				i {
					position: absolute;
					margin: auto;
					color: rgba(255, 255, 255, 0.25);
					&:hover {color: rgba(255, 255, 255, 0.5)}
				}
				.info-text {
					font-size: @font-size-h2;
					height: 30px;
					line-height: 30px;
					color: #fff;
				}
				.info-text-bottom {
					font-size: @font-size-small;
					line-height: 16px;
					height: 16px;
					color: rgba(255, 255, 255, 0.75);
				}
			}

			i {font-size: @font-size-h2; color: rgba(255, 255, 255, 0.5); .transition(~"0.05s ease-in");}
			> i {position: absolute; font-size: @font-size-h2;}
			div + small {font-size: @font-size-base; text-align: center; display: block; font-weight: 400; color: rgba(255, 255, 255, 0.75);}
		}
		.tile-footer {
			color: #fff;
			font-size: @font-size-small;
			color: rgba(255, 255, 255, 0.5);
			padding: 8px 12px;
			border-bottom-right-radius: @border-radius-base;
			border-bottom-left-radius: @border-radius-base;

			.pull-right {
				.sparkline-block {
					font-size: 0;
					padding: 2px 0;
				}
			}
		}

		&.has-footer { //Just remove the border-radius
			.tile-body {
				border-bottom-left-radius: 0;
				border-bottom-right-radius: 0;
			}
			.tile-footer {
				border-bottom-right-radius: @border-radius-base;
				border-bottom-left-radius: @border-radius-base;
			}
		}

		&:hover {
			i {color: #fff;}
			text-decoration: none;
			
			.text-sparkline i {color: #fff}

			.tile-footer {
				.percent-change {color: #fff;}
			}
			.tile-heading .pull-right {color: #fff;}
		}
	}
	//Mixin
	.info-tile-variant(@color, @text-color:#fff) {
		.tile-heading 	{background: @color;}
		.tile-body 	{background: @color;}
		.tile-body-alt {background: @color;}
		.tile-footer 	{background: @color;}
		color: @text-color !important;
		&:hover {
			.tile-heading 	{background: darken(@color,5%);}
			.tile-body 	{background: darken(@color,5%);}
			.tile-body-alt {background: darken(@color,5%);}
			.tile-footer 	{background: darken(@color,5%);}
			color: @text-color;
		}


		.progress {
			background: #0f9fa7 !important;
			border-bottom-right-radius: @border-radius-base;
			border-bottom-left-radius: @border-radius-base;
			.progress-bar {
				background: #11ebf9 !important;
				border-bottom-left-radius: @border-radius-base;
			}
		}
	}

	.info-tile {
		&.tile-info 			{.info-tile-variant(@brand-info);}
		&.tile-success 		{.info-tile-variant(@brand-success);}
		&.tile-danger 			{.info-tile-variant(@brand-danger);}
		&.tile-warning 		{.info-tile-variant(@brand-warning);}
		&.tile-primary 		{.info-tile-variant(@brand-primary);}
		&.tile-inverse 		{.info-tile-variant(@brand-inverse);}
		&.tile-midnightblue 	{.info-tile-variant(@brand-midnightblue)}
		&.tile-sky 			{.info-tile-variant(@brand-teal);}
		&.tile-orange 			{.info-tile-variant(@brand-orange)}; 
		&.tile-indigo 			{.info-tile-variant(@brand-indigo)}; 
		&.tile-green 			{.info-tile-variant(@brand-green);}
		&.tile-blue 			{.info-tile-variant(@brand-blue);}
		&.tile-magenta  		{.info-tile-variant(@brand-pink);}
		&.tile-purple  		{.info-tile-variant(@brand-purple);}
		&.tile-brown  			{.info-tile-variant(@brand-brown);}
		&.tile-grape			{.info-tile-variant(@brand-lime);}
		&.tile-toyo			{.info-tile-variant(@brand-amber);}
		&.tile-alizarin		{.info-tile-variant(@brand-deeporange);}
		&.tile-facebook		{.info-tile-variant(@brand-facebook);}
		&.tile-twitter			{.info-tile-variant(@brand-twitter);}
		&.tile-dribbble		{.info-tile-variant(@brand-dribbble);}
		&.tile-vimeo			{.info-tile-variant(@brand-vimeo);}
	}


// Sparkline Tile
	.tile-sparkline {
		background: #fff;
		border: 1px solid @border-darker;
		border-radius: @border-radius-base;
		position: relative;
		margin-bottom: 24px;

		.tile-sparkline-heading {
			padding: 16px;
			h2 {
				font-size: @font-size-h2;
				margin: 0;
				font-weight: 400;
				float: none;
			}
			.tile-sparkline-subheading {
				margin: 8px 0 0;
				float: none;
				line-height: 1em;
				color: @gray;
				font-weight: 400;
				font-size: @font-size-small;
			}
			.label {
				position: absolute;
				top: 16px;
				right: 16px;
			}
			.week {
				position: absolute;
				top: 48px;
				float: none;
				right: 16px;
				text-transform: none !important;
				color: @gray-light !important;
				font-size: @font-size-small;
				i {font-size: @font-size-small !important;}

			}
		}
		.tile-sparkline-body {
			padding: 24px;

			.tabular {
				margin: 8px 0 0;
				padding: 0 4px;
				.tabular-cell {
					width: 14.285714285714285714285714285714%;

					.week-day {
						color: @gray-lighter;
						font-size: @font-size-small;
						position: relative;
					}
					.sun {margin-left: -2px; left: 0}
					.mon {margin-left: -3px; left: 16.67%}
					.tue {margin-left: -4px; left: 33.33%}
					.wed {margin-left: -4px; left: 50%}
					.thu {margin-left: -4px; left: 66.67%}
					.fri {margin-left: -4px; left: 83.33%}
					.sat {margin-left: -4px; left: 100%}
				}
			}

		}
		.tile-sparkline-footer {
			padding: 16px;
			background: @gray-50;
			font-size: @font-size-small;
			border-top: 1px solid @border-lighter;
			border-radius: 0 0 @border-radius-base @border-radius-base;
		}
	}










// Addons to Tiles


	//EasyPieChart in Tile
		.info-tile .tile-body .easypiechart {
			margin: 0 auto;
			height: 80px;
			line-height: 80px;
			width: 80px;

			.percent {
				width: 80px;
				line-height: 80px;
				font-size: @font-size-large;
				font-weight: 400;
				text-transform: uppercase;
				color: #fff;
			}
		}


	// Sparkline in Body
		.info-tile .tile-body {
			.sparkline {width: 96px; margin: 0 auto; padding: 0px;}
			.text-centered {
				.info-sparkline {
					font-size: 0;
					margin: 16px 0;
				}
			}
		}


	// Progressbar in Footer
		//Style
		.info-tile .tile-footer.tile-progressbar {
			padding: 0 !important;
			height: 32px !important;
			position: relative;
			border-radius: 0 0 @border-radius-base @border-radius-base;
			.progress {
				height: 32px;
				border-radius: 0 0 @border-radius-base @border-radius-base;
			}
			span {
				padding: 0 12px;
				height: 32px;
				line-height: 32px;
				position: absolute;
				&.progress-text-left {left: 0;}
				&.progress-text-right {right: 0;}
			}
		}

		//Mixin
		.tile-progressbar-variant(@filled, @unfilled, @text-color:#fff) {
			.tile-footer.tile-progressbar.progress {
				background: @unfilled !important;
				.progress-bar {background: @filled !important}

				span {
					color: @text-color;
				}
			}
		}

		.info-tile {
			&.tile-info {.tile-progressbar-variant(@cyan-A400,@cyan-700);}

		}


		// Sparkline in Footer
			//Style
			.info-tile .tile-footer.tile-sparklines {
				padding: 0 !important;
				position: relative;
				border-bottom-right-radius: @border-radius-base;
				border-bottom-left-radius: @border-radius-base;
				.peity {
					width: 100% !important;
					border-bottom-right-radius: @border-radius-base !important;
		    		border-bottom-left-radius: @border-radius-base !important;
				}
				span {
					padding: 0 8px;
					height: 32px;
					line-height: 32px;
					position: absolute;
					
					&.spark-text-left {left: 0;}
					&.spark-text-right {right: 0px;}
				}
			}

			//Mixin
			.tile-sparkline-variant(@text-color:#fff) {
				.tile-footer.tile-sparklines {
					span {
						color: @text-color;
					}
				}
			}

			.info-tile[class*="tile-"] { //all tile
				.tile-sparkline-variant();
			}
	



// Alt tile Variant with only one color
	.info-tile.tile-alt {
		&.tile-info 			{.one-color-tile-variant(@brand-info, darken(@brand-info, 20%)) 			;}
		&.tile-white 			{.one-color-tile-variant(#fff, #fff) 			;}
		&.tile-success 			{.one-color-tile-variant(@brand-success, darken(@brand-info, 20%)) 			;}
		&.tile-danger 			{.one-color-tile-variant(@brand-danger, darken(@brand-info, 20%)) 			;}
		&.tile-warning 			{.one-color-tile-variant(@brand-warning, darken(@brand-info, 20%)) 			;}
		&.tile-primary 			{.one-color-tile-variant(@brand-primary, darken(@brand-info, 20%)) 			;}
		&.tile-inverse 			{.one-color-tile-variant(@brand-inverse, darken(@brand-info, 20%)) 			;}
		&.tile-midnightblue 	{.one-color-tile-variant(@brand-midnightblue, darken(@brand-info, 20%)) 	;}
		&.tile-sky 				{.one-color-tile-variant(@brand-teal, darken(@brand-info, 20%)) 				;}
		&.tile-orange 			{.one-color-tile-variant(@brand-orange, darken(@brand-info, 20%)) 			;}
		&.tile-indigo 			{.one-color-tile-variant(@brand-indigo, darken(@brand-info, 20%)) 			;}
		&.tile-green 			{.one-color-tile-variant(@brand-green, darken(@brand-info, 20%)) 			;}
		&.tile-blue 			{.one-color-tile-variant(@brand-blue, darken(@brand-info, 20%)) 			;}
		&.tile-magenta  		{.one-color-tile-variant(@brand-pink, darken(@brand-info, 20%)) 			;}
		&.tile-purple  			{.one-color-tile-variant(@brand-purple, darken(@brand-info, 20%)) 			;}
		&.tile-brown  			{.one-color-tile-variant(@brand-brown, darken(@brand-info, 20%)) 			;}
		&.tile-grape			{.one-color-tile-variant(@brand-lime, darken(@brand-info, 20%)) 			;}
		&.tile-toyo				{.one-color-tile-variant(@brand-amber, darken(@brand-info, 20%)) 			;}
		&.tile-alizarin			{.one-color-tile-variant(@brand-deeporange, darken(@brand-info, 20%)) 		;}
		&.tile-facebook			{.one-color-tile-variant(@brand-facebook, darken(@brand-info, 20%)) 		;}
		&.tile-twitter			{.one-color-tile-variant(@brand-twitter, darken(@brand-info, 20%)) 			;}
		&.tile-dribbble			{.one-color-tile-variant(@brand-dribbble, darken(@brand-info, 20%)) 		;}
		&.tile-vimeo			{.one-color-tile-variant(@brand-vimeo, darken(@brand-info, 20%)) 			;}
	}

	.one-color-tile-variant(@color, @hovercolor) {
		.tile-heading, .tile-body, .tile-footer {background: @color !important;}
		&:hover {
			.tile-heading, .tile-body, .tile-footer {background: @hovercolor;}
		}
	}