/**
 * @package         Regular Labs Library
 * @version         18.2.10140
 * 
 * @author          Peter van Westen <info@regularlabs.com>
 * @link            http://www.regularlabs.com
 * @copyright       Copyright © 2018 Regular Labs All Rights Reserved
 * @license         http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
 */
/**
 * BASED ON:
 * jQuery MiniColors: A tiny color picker built on jQuery
 * Copyright Cory LaViska for A Beautiful Site, LLC. (http://www.abeautifulsite.net/)
 * Dual-licensed under the MIT and GPL Version 2 licenses
 */
@import "init.less";

.minicolors {
	position: relative;
	display:  inline-block;
	z-index:  11;
}

.minicolors-focus {
	z-index: 12;
}

.minicolors.minicolors-theme-default .minicolors-input {
	margin:       0;
	border:       solid 1px #cccccc;
	font:         14px sans-serif;
	width:        65px;
	height:       16px;
	.border-radius(0);
	.box-shadow(~"inset 0 2px 4px rgba(0, 0, 0, .04)");
	padding:      2px;
	margin-right: -1px;
}

.minicolors-theme-default.minicolors .minicolors-input {
	vertical-align: middle;
	outline:        none;
}

.minicolors-theme-default.minicolors-swatch-left .minicolors-input {
	margin-left:  -1px;
	margin-right: auto;
}

.minicolors-theme-default.minicolors-focus .minicolors-input,
.minicolors-theme-default.minicolors-focus .minicolors-swatch {
	border-color: #999999;
}

.minicolors-hidden {
	position: absolute;
	left:     -9999em;
}

.minicolors-swatch {
	position:       relative;
	width:          20px;
	height:         20px;
	text-align:     left;
	background:     url(../images/minicolors.png) -80px 0;
	border:         solid 1px #cccccc;
	vertical-align: middle;
	display:        inline-block;
}

.minicolors-swatch SPAN {
	position:   absolute;
	width:      100%;
	height:     100%;
	background: none;
	.box-shadow(~"inset 0 9px 0 rgba(255, 255, 255, .1)");
	display:    inline-block;
}

// Panel
.minicolors-panel {
	position:   absolute;
	top:        26px;
	left:       0;
	width:      173px;
	height:     152px;
	background: white;
	border:     solid 1px #cccccc;
	.box-shadow(~"0 0 20px rgba(0, 0, 0, .2)");
	display:    none;
}

.minicolors-position-top .minicolors-panel {
	top: -156px;
}

.minicolors-position-left .minicolors-panel {
	left: -83px;
}

.minicolors-position-left.minicolors-with-opacity .minicolors-panel {
	left: -104px;
}

.minicolors-with-opacity .minicolors-panel {
	width: 194px;
}

.minicolors .minicolors-grid {
	position:   absolute;
	top:        1px;
	left:       1px;
	width:      150px;
	height:     150px;
	background: url(../images/minicolors.png) -120px 0;
	cursor:     crosshair;
}

.minicolors .minicolors-grid-inner {
	position:   absolute;
	top:        0;
	left:       0;
	width:      150px;
	height:     150px;
	background: none;
}

.minicolors-slider-saturation .minicolors-grid {
	background-position: -420px 0;
}

.minicolors-slider-saturation .minicolors-grid-inner {
	background: url(../images/minicolors.png) -270px 0;
}

.minicolors-slider-brightness .minicolors-grid {
	background-position: -570px 0;
}

.minicolors-slider-brightness .minicolors-grid-inner {
	background: black;
}

.minicolors-slider-wheel .minicolors-grid {
	background-position: -720px 0;
}

.minicolors-slider,
.minicolors-opacity-slider {
	position:   absolute;
	top:        1px;
	left:       152px;
	width:      20px;
	height:     150px;
	background: white url(../images/minicolors.png) 0 0;
	cursor:     crosshair;
}

.minicolors-slider-saturation .minicolors-slider {
	background-position: -60px 0;
}

.minicolors-slider-brightness .minicolors-slider {
	background-position: -20px 0;
}

.minicolors-slider-wheel .minicolors-slider {
	background-position: -20px 0;
}

.minicolors-opacity-slider {
	left:                173px;
	background-position: -40px 0;
	display:             none;
}

.minicolors-with-opacity .minicolors-opacity-slider {
	display: block;
}

// Pickers
.minicolors-grid .minicolors-picker {
	position:    absolute;
	top:         70px;
	left:        70px;
	width:       10px;
	height:      10px;
	border:      solid 1px black;
	.border-radius(10px);
	margin-top:  -6px;
	margin-left: -6px;
	background:  none;
}

.minicolors-grid .minicolors-picker span {
	position: absolute;
	top:      0;
	left:     0;
	width:    6px;
	height:   6px;
	.border-radius(6px);
	border:   solid 2px white;
}

.minicolors-picker {
	position:   absolute;
	top:        0;
	left:       0;
	width:      18px;
	height:     2px;
	background: white;
	border:     solid 1px black;
	margin-top: -2px;
}

// Inline controls
.minicolors-inline .minicolors-input,
.minicolors-inline .minicolors-swatch {
	display: none;
}

.minicolors-inline .minicolors-panel {
	position: relative;
	top:      auto;
	left:     auto;
	display:  inline-block;
}

// Bootstrap Theme (theme: 'bootstrap')

// Input styles
.minicolors-theme-bootstrap .minicolors-input {
	padding:          4px 6px;
	padding-left:     30px;
	background-color: white;
	border:           1px solid #cccccc;
	.border-radius(3px);
	color:            #555555;
	font-family:      Arial, 'Helvetica Neue', Helvetica, sans-serif;
	font-size:        14px;
	height:           19px;
	margin:           0;
	.box-shadow(~"inset 0 1px 1px rgba(0, 0, 0, 0.075)");
}

// When the input has focus
.minicolors-theme-bootstrap.minicolors-focus .minicolors-input {
	border-color: #6fb8f1;
	.box-shadow(~"0 0 10px #6fb8f1");
	outline:      none;
}

// Swatch styles
.minicolors-theme-bootstrap .minicolors-swatch {
	position: absolute;
	left:     4px;
	top:      4px;
	z-index:  12;
}

// Handle swatch position (left = default / right)
.minicolors-theme-bootstrap.minicolors-swatch-position-right .minicolors-input {
	padding-left:  6px;
	padding-right: 30px;
}

.minicolors-theme-bootstrap.minicolors-swatch-position-right .minicolors-swatch {
	left:  auto;
	right: 4px;
}

// Panel styles
.minicolors-theme-bootstrap .minicolors-panel {
	top:     28px;
	z-index: 13;
}

// Handle panel positions (top / left)
.minicolors-theme-bootstrap.minicolors-position-top .minicolors-panel {
	top: -154px;
}

.minicolors-theme-bootstrap.minicolors-position-left .minicolors-panel {
	left: -63px;
}

// Don't forget to adjust the left position in case the opacity slider is visible!
.minicolors-theme-bootstrap.minicolors-position-left.minicolors-with-opacity .minicolors-panel {
	left: -84px;
}