@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

.clr-defaultV2 {
	@bg: #F3F3FE;
	@frame: #ffffff;
	@text: #2c3345;
	.thumb-color(@bg, @frame, @text);
}

.clr-blueV2 {
	@bg: #83D0E4;
	@frame: #F0FCFF;
	@text: #264B67;
	.thumb-color(@bg, @frame, @text);
}

.clr-redV2 {
	@bg: #FB6F41;
	@frame: #FFDF79;
	@text: #6A1B00;
	.thumb-color(@bg, @frame, @text);
}

.clr-brownV2 {
	@bg: #5A4B44;
	@frame: #EFE8D4;
	@text: #321F16;
	.thumb-color(@bg, @frame, @text);
}

.clr-greenV2 {
	@bg: #B3D37A;
	@frame: #F4FFDF;
	@text: #566638;
	.thumb-color(@bg, @frame, @text);
}

.clr-darkV2 {
	@bg: #11111B;
	@frame: #424756;
	@text: #FFFFFF;
	.thumb-color(@bg, @frame, @text);
}

.clr-pinkV2 {
	@bg: #FF97BC;
	@frame: #FFF8FA;
	@text: #962D53;
	.thumb-color(@bg, @frame, @text);
}
.clr-darkBlueV2 {
	@bg: #2462B9;
	@frame: #E4EFFF;
	@text: #12458D;
	.thumb-color(@bg, @frame, @text);
}
.clr-purpleV2 {
	@bg: #7C56BD;
	@frame: #F7F2FF;
	@text: #412A68;
	.thumb-color(@bg, @frame, @text);
}
.clr-clearV2 {
	@bg: #303339;
	@frame: #303339;
	@text: #FFFFFF;
	.thumb-color(@bg, @frame, @text);
}

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