/* styles/customize-modal/customize-modal-colors.css
   SpinChoice — Wheel color boxes (checkbox + color pill like screenshot)
*/

/* Row that holds the color items */
.scColorRow{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* Each item = checkbox + pill */
.scColorItem{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

/* --- Checkbox (square) --- */
.scColorCheck{
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.18);
  display: grid;
  place-items: center;
  cursor: pointer;
  outline: none;
}

html[data-theme="light"] .scColorCheck{
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.6);
}

/* Checkmark */
.scColorCheck::after{
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  opacity: 0;
  margin-top: -1px;
}

.scColorCheck:checked{
  background: #3b82f6; /* blue fill like screenshot */
  border-color: rgba(255,255,255,0.25);
}
.scColorCheck:checked::after{
  opacity: 1;
}

/* --- Color pill button --- */
.scColorPill{
  --swatch: #3b82f6;

  width: 58px;
  height: 32px;
  border-radius: 9px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--swatch);
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.14);

  cursor: pointer;
}

/* When checkbox is focused, show a subtle focus ring on pill too */
.scColorCheck:focus-visible + .scColorPill{
  outline: 2px solid rgba(255,255,255,0.22);
  outline-offset: 2px;
}
html[data-theme="light"] .scColorCheck:focus-visible + .scColorPill{
  outline: 2px solid rgba(15,23,42,0.18);
}

/* Palette icon inside the pill */
.scColorIcon{
  width: 16px;
  height: 16px;
  opacity: 0.92;

  /* if you use inline SVG */
  fill: rgba(255,255,255,0.92);
}

/* If you want icon to be black on very light swatches (optional),
   add .is-icon-dark to the pill in HTML. */
.scColorPill.is-icon-dark .scColorIcon{
  fill: rgba(0,0,0,0.75);
  opacity: 0.85;
}

/* Disabled/empty grey pills like screenshot */
.scColorItem.is-disabled .scColorCheck{
  opacity: 0.35;
  cursor: not-allowed;
}
.scColorItem.is-disabled .scColorPill{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  box-shadow: none;
  cursor: not-allowed;
}
.scColorItem.is-disabled .scColorIcon{
  fill: rgba(255,255,255,0.35);
  opacity: 0.55;
}

html[data-theme="light"] .scColorItem.is-disabled .scColorPill{
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.10);
}
html[data-theme="light"] .scColorItem.is-disabled .scColorIcon{
  fill: rgba(0,0,0,0.35);
}
/* hide real <input type="color">, we open it via JS */
.scColorItem{ position: relative; }
.scColorPicker{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}