.custom-color-picker{
  position:absolute;
  z-index:99999;
  width:280px;
  padding:14px;
  border:1px solid #dbe3ef;
  border-radius:12px;
  background:#ffffff;
  box-shadow:0 18px 45px rgba(15,23,42,.18);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.custom-color-picker[hidden]{
  display:none;
}

.custom-color-picker__panel{
  width:100%;
}

.custom-color-picker__area{
  position:relative;
  width:100%;
  height:170px;
  margin-bottom:12px;
  overflow:hidden;
  border-radius:8px;
  background:#ff0000;
  cursor:crosshair;
  touch-action:none;
}

.custom-color-picker__white,
.custom-color-picker__black{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.custom-color-picker__white{
  background:
    linear-gradient(
      to right,
      #ffffff,
      rgba(255,255,255,0)
    );
}

.custom-color-picker__black{
  background:
    linear-gradient(
      to top,
      #000000,
      rgba(0,0,0,0)
    );
}

.custom-color-picker__cursor{
  position:absolute;
  z-index:2;
  width:14px;
  height:14px;
  border:2px solid #ffffff;
  border-radius:50%;
  box-shadow:
    0 0 0 1px rgba(15,23,42,.55),
    0 2px 6px rgba(15,23,42,.25);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.custom-color-picker__hue{
  position:relative;
  width:100%;
  height:18px;
  margin-bottom:14px;
  border-radius:999px;
  background:
    linear-gradient(
      to right,
      #ff0000 0%,
      #ffff00 16.66%,
      #00ff00 33.33%,
      #00ffff 50%,
      #0000ff 66.66%,
      #ff00ff 83.33%,
      #ff0000 100%
    );
  cursor:pointer;
  touch-action:none;
}

.custom-color-picker__hue-cursor{
  position:absolute;
  top:50%;
  width:10px;
  height:24px;
  border:2px solid #ffffff;
  border-radius:5px;
  background:transparent;
  box-shadow:
    0 0 0 1px rgba(15,23,42,.45),
    0 2px 5px rgba(15,23,42,.2);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.custom-color-picker__preview-row{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  align-items:center;
  margin-bottom:12px;
}

.custom-color-picker__preview{
  width:42px;
  height:42px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#000000;
}

.custom-color-picker__hex-wrap{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:0 10px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#ffffff;
}

.custom-color-picker__hex-wrap span{
  flex:0 0 auto;
  margin-right:2px;
  color:#64748b;
  font-size:14px;
  font-weight:700;
}

.custom-color-picker__hex{
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:#0f172a;
  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;
  font-size:14px;
  text-transform:lowercase;
}

.custom-color-picker__rgb{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.custom-color-picker__rgb label{
  display:grid;
  grid-template-columns:18px 1fr;
  align-items:center;
  gap:4px;
  min-width:0;
  min-height:38px;
  padding:0 7px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#ffffff;
}

.custom-color-picker__rgb span{
  color:#64748b;
  font-size:11px;
  font-weight:700;
}

.custom-color-picker__rgb input{
  width:100%;
  min-width:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:#0f172a;
  font-size:13px;
  text-align:right;
}

.custom-color-picker__rgb input::-webkit-outer-spin-button,
.custom-color-picker__rgb input::-webkit-inner-spin-button{
  margin:0;
  -webkit-appearance:none;
}

[data-color-picker]{
  cursor:pointer;
}

@media (max-width:400px){

  .custom-color-picker{
    width:min(280px,calc(100vw - 20px));
  }

  .custom-color-picker__area{
    height:150px;
  }

}