/* Base styles needed for the extracted components */
.clr-picker {
  display: flex; /* Changed from none to flex as per request */
  flex-wrap: wrap;
  position: absolute; /* Use relative or static if embedding directly */
  width: 200px; /* Default width */
  z-index: 1; /* Adjusted from 1000 */
  background-color: rgba(0,0,0,0.9);
  justify-content: flex-end;
  direction: ltr;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05), 0 5px 20px rgba(0, 0, 0, 0.1);
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
}

.clr-gradient {
  position: relative;
  width: 100%;
  height: 100px;
  margin-bottom: 15px;
  border-radius: 3px 3px 0 0;
  /* background-image is set dynamically via JS */
  cursor: pointer;
  box-sizing: border-box;
}

.clr-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  box-shadow: 0 0 0 1px black, 0 0 0 2px #fff;
  border-radius: 50%;
  background-color: currentColor;
  cursor: pointer;
  box-sizing: border-box;
}

/* Generic Slider Styles */
.clr-picker input[type='range'] {
  box-sizing: border-box;
  position: absolute;
  width: calc(100% + 32px); /* Allows thumb to reach edges */
  height: 16px;
  left: -16px;
  top: -4px; /* Vertically center relative to the 8px track */
  margin: 0;
  background-color: transparent;
  opacity: 0; /* Hide the native slider */
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.clr-picker input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 16px; /* Clickable area */
}

.clr-picker input[type='range']::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  -webkit-appearance: none;
}

.clr-picker input[type='range']::-moz-range-track {
  width: 100%;
  height: 16px;
  border: 0;
}

.clr-picker input[type='range']::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
}

/* Hue Slider Specifics */
.clr-hue {
  background-image: linear-gradient(
    to right,
    #f00 0%,
    #ff0 16.66%,
    #0f0 33.33%,
    #0ff 50%,
    #00f 66.66%,
    #f0f 83.33%,
    #f00 100%
  );
  position: relative;
  width: calc(100% - 16px);
  height: 10px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 2px;
  box-sizing: border-box;
}

.clr-hue div {
  /* Hue Marker */
  position: absolute;
  width: 6px;
  height: 18px;
  left: 0;
  top: 50%;
  margin-left: -3px;
  transform: translateY(-50%);
  background-color: rgba(255,255,255,0.05);
  border-radius: 2px;
  box-shadow: 0 0 0 2px #000, 0 0 0 3px white;
  pointer-events: none;
  box-sizing: border-box;
}

.clr-hue:hover div, .clr-hue:focus-visible div {
  box-shadow: 0 0 0 2px #000, 0 0 0 3px #1e90ff;
}

/* Color Input Specifics */
input.clr-color {
  order: 1; /* Position relative to siblings */
  width: calc(100% - 16px); /* Takes remaining space minus margins */
  height: 32px;
  margin: 15px 8px 8px 8px; /* Top L/R Bottom */
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  color: white;
  background-color: rgba(127,127,127,0.3);
  font-family: sans-serif;
  font-size: 14px;
  text-align: center;
  box-shadow: none;
  box-sizing: border-box;
}

input.clr-color:focus {
  outline: none;
  border: 1px solid #1e90ff;
}

/* Accessibility focus styles (subset) */
.clr-marker:focus {
  outline: none;
}
.clr-keyboard-nav .clr-marker:focus,
.clr-keyboard-nav .clr-hue input:focus + div,
.clr-keyboard-nav .clr-alpha input:focus + div {
  outline: none;
  box-shadow: 0 0 0 2px #1e90ff, 0 0 2px 2px #fff;
}