/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

#eyedropper-button {
  margin-inline-start: 5px;
  display: block;
}

#eyedropper-button::before {
  background-image: url(chrome://devtools/skin/images/command-eyedropper.svg);
}

/* Mix-in classes */

.colorwidget-checker {
  background-color: #eee;
  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: 12px 12px;
  background-position: 0 0, 6px 6px;
}

.colorwidget-slider-control {
  cursor: pointer;
  box-shadow: 0 0 2px rgba(0,0,0,.6);
  background: #fff;
  border-radius: 10px;
  opacity: .8;
}

.colorwidget-box {
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 2px;
  background-clip: content-box;
}

.colorwidget-colorswatch {
  background-color: transparent;
  color: transparent;
  border: 1px solid transparent;
}

/* Elements */

#colorwidget-tooltip {
  padding: 4px;
}

.colorwidget-container {
  position: relative;
  display: none;
  top: 0;
  left: 0;
  border-radius: 0;
  width: 200px;
  padding: 5px;
}

.colorwidget-show {
  display: inline-block;
}

/* Keep aspect ratio:
http://www.briangrinstead.com/blog/keep-aspect-ratio-with-html-and-css */
.colorwidget-top {
  position: relative;
  width: 100%;
  display: inline-block;
}

.colorwidget-top-inner {
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
}

.colorwidget-contrast {
  color: var(--theme-content-color1);
  padding-top: 4px;
}

.colorwidget-colorswatch, .colorwidget-contrast-ratio, .colorwidget-contrast-grade, .colorwidget-contrast-help {
  display: inline-block;
}

.colorwidget-colorswatch {
  width: 28%;
}

.colorwidget-contrast-ratio {
  font-family: Courier New, Courier, monospace;
  padding-left: 8px;
  width: 26%;
}

.colorwidget-contrast-grade {
  font-family: Courier New, Courier, monospace;
  width: 18%;
}

.colorwidget-contrast-help {
  margin-inline-start: 5px;
}

.colorwidget-contrast-help::before {
  background-image: url(chrome://devtools/skin/images/help.svg);
}

.colorwidget-colorswatch {
  text-align: center;
  color: transparent;
}

.colorwidget-color {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 20%;
}

.colorwidget-hue {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 83%;
}

.colorwidget-fill {
  /* Same as colorwidget-color width */
  margin-top: 85%;
}

.colorwidget-sat, .colorwidget-val {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.colorwidget-dragger, .colorwidget-slider {
  -moz-user-select: none;
}

.colorwidget-alpha {
  position: relative;
  height: 8px;
  margin-top: 3px;
}

.colorwidget-alpha-inner {
  height: 100%;
}

.colorwidget-alpha-handle {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 5px;
  left: 50%;
}

.colorwidget-sat {
  background-image: linear-gradient(to right, #FFF, rgba(204, 154, 129, 0));
}

.colorwidget-val {
  background-image: linear-gradient(to top, #000000, rgba(204, 154, 129, 0));
}

.colorwidget-hue {
  background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.colorwidget-dragger {
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: pointer;
  border-radius: 50%;
  height: 8px;
  width: 8px;
  border: 1px solid white;
  box-shadow: 0 0 2px rgba(0,0,0,.6);
}

.colorwidget-slider {
  position: absolute;
  top: 0;
  height: 5px;
  left: -3px;
  right: -3px;
}

/**
 * Color Widget Editor
 */

.colorwidget-value {
  position: relative;
  margin-top: 8px;
}

/**
 * Color Widget Select
 */

.colorwidget-select {
  width: 100%;
}

.colorwidget-select-spacing {
  letter-spacing: 40px;
}

.colorwidget-select-spacing option {
  letter-spacing: initial;
}

/**
 * Color Widget Inputs
 */

.colorwidget-hidden {
  display: none;
}

.colorwidget-hex,
.colorwidget-rgba,
.colorwidget-hsla {
  width: 200px;
  font-size: 0;
}

.colorwidget-hex-input {
  width: 192px;
}

.colorwidget-rgba-r,
.colorwidget-rgba-g,
.colorwidget-rgba-b,
.colorwidget-rgba-a,
.colorwidget-hsla-h,
.colorwidget-hsla-s,
.colorwidget-hsla-l,
.colorwidget-hsla-a {
  width: 42px;
  margin: 0;
}