/*
 * Vanilla CSS for our minicolors port.
 *
 * Derived from jquery-minicolors v2.1.10 (Cory LaViska, MIT). The original
 * shipped a giant base64 sprite for picker icons and IE 6/7 fallbacks. We
 * keep just the bootstrap-theme look, with CSS gradients instead of the
 * sprite, and SVG cursors for the pickers.
 */

/* ---- Wrapper / input ---- */
.minicolors {
	position: relative;
	display: inline-block;
}

/* Bootstrap theme — dimensions copied from jquery-minicolors v2.1.10 so we
 * line up pixel-for-pixel with the original reference. */
.minicolors-theme-bootstrap .minicolors-swatch {
	position: absolute;
	z-index: 2;
	top: 3px;
	left: 3px;
	width: 28px;
	height: 28px;
	display: inline-block;
	border: 1px solid #ced4da;
	border-radius: 3px;
	cursor: pointer;
	overflow: hidden;
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
		linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
	background-size: 8px 8px;
	background-position: 0 0, 4px 4px;
}

.minicolors-theme-bootstrap .minicolors-swatch-color {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

.minicolors-theme-bootstrap .minicolors-input {
	float: none;
	padding-left: 44px;
}

/* ---- Panel ---- */
.minicolors-panel {
	position: absolute;
	width: 173px;
	height: 152px;
	background: #fff;
	border: 1px solid #ccc;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
	z-index: 99999;
	display: none;
	margin-top: 2px;
	padding: 6px;
	box-sizing: content-box;
}

.minicolors.minicolors-focus .minicolors-panel {
	display: block;
}

/* Position variants — match jquery-minicolors API */
.minicolors-position-top .minicolors-panel { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 2px; }
.minicolors-position-right .minicolors-panel { right: 0; }
.minicolors-position-bottom .minicolors-panel { top: 100%; bottom: auto; }
.minicolors-position-left .minicolors-panel { left: 0; }

/* ---- Hue slider (vertical strip on the right of the grid) ---- */
.minicolors-slider {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 20px;
	height: 150px;
	cursor: ns-resize;
	background: linear-gradient(
		to top,
		#f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%
	);
}

/* ---- SV grid (square on the left) ---- */
.minicolors-grid {
	position: relative;
	width: 150px;
	height: 150px;
	cursor: crosshair;
	background-color: #f00;
}

.minicolors-grid-inner {
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
		linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

/* ---- Pickers ---- */
.minicolors-grid .minicolors-picker {
	position: absolute;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1px solid #000;
	box-shadow: 0 0 0 1px #fff;
	margin: -6px 0 0 -6px;
	pointer-events: none;
}

.minicolors-grid .minicolors-picker > div {
	display: none;
}

.minicolors-slider .minicolors-picker {
	position: absolute;
	left: -2px;
	width: 24px;
	height: 6px;
	margin-top: -3px;
	border: 1px solid #000;
	box-shadow: 0 0 0 1px #fff;
	pointer-events: none;
	box-sizing: border-box;
}

/* sprite stand-in: noop so the class doesn't conflict with anything */
.minicolors-sprite {
	/* intentionally empty — original used a sprite, our pickers draw themselves */
}

.minicolors-input[disabled] + .minicolors-panel,
.minicolors-input[readonly] + .minicolors-panel {
	display: none !important;
}