@import "global";

// Thumbnail styling

.color-select {
	li {
		.bg-clip(content);
		.box-shadow(0 3px 9px fade(black, 15%));
		display: inline-block;
		width: 40px;
		height: 40px;
		margin-bottom: 8px;
		margin-right: 6px;
		border-width: 4px;
		border-style: solid;
		text-transform: uppercase;
		cursor: pointer;
	
		text-align: center;
		font-size: 18px;
		font-weight: normal;
		line-height: 32px;
		.fa-check {
			display: none;
		}
		&:last-child {
			margin-right: 0;
 		}
	}

	.clr-clear {
		.box-shadow(none);
		color: fade(black, 20%);
		font-weight: bold;
		border: 3px dashed fade(black, 15%);
		background-color: transparent;

		&:hover {
			color: fade(black, 50%);
			border-color: fade(black, 30%);
		}
	}
	
	.selected-scheme { 
		position: relative;

		span,
		.fa-times {
			display: none;
		}

		.fa-check {
			font-size: 21px;
			display: inline-block;
		}
	}
}

// 3.4 - Mixin for thumbnails in sidebar

.thumb-color(@clr-bg, @clr-frame, @clr-text) {
	border-color: @clr-bg;
	background-color: @clr-frame;
	color:@clr-text;
}


// 3.5 - Color Scheme Thumbnails

// 3.5.1 - Default
.clr-default {
	@bg: #f1f1f1;
	@frame: #fff;
	@text: #555;
	.thumb-color(@bg, @frame, @text);
}

// 3.5.2 - Warm
.clr-warm {
	@bg: #EB6841;
	@frame: #EDC951;
	@text: #6A4A3C;
	.thumb-color(@bg, @frame, @text);
}

// 3.5.3 - Natural
.clr-natural {
	@bg: #948C75;
	@frame: #D9CEB2;
	@text: #7A6A53;
	.thumb-color(@bg, @frame, @text);
}

// 3.5.4 - Fresh
.clr-fresh {
	@bg: #8FBE00;
	@frame: #F9F2E7;
	@text: #3E4E1A;
	.thumb-color(@bg, @frame, @text);
}

// 3.5.5 - Air
.clr-air {
	@bg: #69D2E7;
	@frame: #D5EEF3;
	@text: #3E4E1A;
	.thumb-color(@bg, @frame, @text);
}

// 3.5.6 - Candy
.clr-candy {
	@bg: #D1F2A5;
	@frame: #EFFAB4;
	@text: #F56991;
	.thumb-color(@bg, @frame, @text);
}

// 3.5.7 - Romance
.clr-romance {
	@bg: #F88F79;
	@frame: #F6AA93;
	@text: #8C2318;
	.thumb-color(@bg, @frame, @text);
}

.clr-dark {
	@bg: #3e3e3e;
	@frame: #4e4e4e;
	@text: #cccccc;
	.thumb-color(@bg, @frame, @text);
}

.sidebarOverlay{
	background-color: #4f4f4f;
	position: absolute;
	top: 55px;
	width: 100%;
	z-index: 100;
	padding-right:30px;
	bottom: 0;
}