/* =====================================================
   SHARED COLOR EXPERIMENT STYLES
   ===================================================== */

code {
  font-family: consolas, monospace;
  color: #333;
}
.kd-rgb-tool,
.kd-hsl-tool,
.kd-hex-tool,
.kd-hwb-tool {
  width: 100%;
  margin: 30px 0;
}
.kd-rgb-tool h3,
.kd-hsl-tool h3,
.kd-hex-tool h3,
.kd-hwb-tool h3 {
  margin: 0 0 20px;
}

/* =====================================================
   PREVIEW
   ===================================================== */

.kd-rgb-preview,
.kd-hsl-preview,
.kd-hex-preview,
.kd-hwb-preview {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #fff !important;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%) !important;
  background-size: 20px 20px !important;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0 !important;
}
.kd-rgb-preview-color,
.kd-hsl-preview-color,
.kd-hex-preview-color,
.kd-hwb-preview-color {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
}


/* =====================================================
   OUTPUT VALUES
   ===================================================== */

.kd-rgb-output,
.kd-hsl-output,
.kd-hex-output,
.kd-hwb-output {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 35px;
  width: 100%;
  margin: 22px 0 28px;
  text-align: center;
}
.kd-rgb-output-item,
.kd-hsl-output-item,
.kd-hex-output-item,
.kd-hwb-output-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}
.kd-rgb-output-item strong,
.kd-hsl-output-item strong,
.kd-hex-output-item strong,
.kd-hwb-output-item strong {
  font-weight: 600;
}
.kd-rgb-output-item code,
.kd-hsl-output-item code,
.kd-hex-output-item code,
.kd-hwb-output-item code {
  white-space: nowrap;
}
/* Divider */
.kd-rgb-divider,
.kd-hsl-divider,
.kd-hex-divider,
.kd-hwb-divider {
  width: 1px;
  height: 28px;
  background: #ccc;
}

/* =====================================================
   CONTROLS
   ===================================================== */

.kd-rgb-controls,
.kd-hsl-controls,
.kd-hex-controls,
.kd-hwb-controls {
  display: grid !important;
  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;
  gap: 30px;
  width: 100%;
  padding-top: 25px;
  border-top: 1px solid #ddd;
}
.kd-rgb-control,
.kd-hsl-control,
.kd-hex-control,
.kd-hwb-control {
  min-width: 0;
}
/* Control headings */
.kd-rgb-control-head,
.kd-hsl-control-head,
.kd-hex-control-head,
.kd-hwb-control-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 8px;
}
.kd-rgb-control-head label,
.kd-hsl-control-head label,
.kd-hex-control-head label,
.kd-hwb-control-head label {
  margin: 0;
  font-weight: 600;
}
.kd-rgb-control-head code,
.kd-hsl-control-head code,
.kd-hex-control-head code,
.kd-hwb-control-head code {
  min-width: 45px;
  text-align: right;
}
/* Sliders */
.kd-rgb-control input[type="range"],
.kd-hsl-control input[type="range"],
.kd-hex-control input[type="range"],
.kd-hwb-control input[type="range"] {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
/* Slider min/max */
.kd-rgb-range,
.kd-hsl-range,
.kd-hex-range,
.kd-hwb-range {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 6px;
  font-size: 14px;
}

/* =====================================================
   RGB NOTE
   ===================================================== */

.kd-rgb-note {
  margin-top: 28px;
  margin-bottom: 28px;
  padding: 12px 15px;
  text-align: center;
  background: #f7f7f7;
  border: 1px solid #ddd;
}

/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 991px) {
  .kd-rgb-controls,
  .kd-hsl-controls,
  .kd-hex-controls,
  .kd-hwb-controls {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 575px) {
  .kd-rgb-output,
  .kd-hsl-output,
  .kd-hex-output,
  .kd-hwb-output {
    flex-direction: column;
    gap: 8px;
  }
  .kd-rgb-divider,
  .kd-hsl-divider,
  .kd-hex-divider,
  .kd-hwb-divider {
    display: none;
  }
  .kd-rgb-controls,
  .kd-hsl-controls,
  .kd-hex-controls,
  .kd-hwb-controls {
    grid-template-columns: 1fr !important;
    gap: 22px;
  }
}