/*!
 * color.css - http://kodester.com/
 * Version - 2.5.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2026 Kasanova
 */

/* =====================================================
   TEMA MERAH — #dd2027
   ===================================================== */
[data-color="red"] {
  --grn:  #dd2027;
  --grn2: #e8333a;
  --grn3: #b51a20;
  --grng:  rgba(221, 32, 39, 0.10);
  --grng2: rgba(221, 32, 39, 0.06);
}

/* =====================================================
   TEMA ORANYE — #dd7120
   ===================================================== */
[data-color="orange"] {
  --grn:  #dd7120;
  --grn2: #e8823a;
  --grn3: #b55a19;
  --grng:  rgba(221, 113, 32, 0.10);
  --grng2: rgba(221, 113, 32, 0.06);
}

/* =====================================================
   TEMA UNGU — #4d20dd
   ===================================================== */
[data-color="purple"] {
  --grn:  #4d20dd;
  --grn2: #6035e8;
  --grn3: #3c18b0;
  --grng:  rgba(77, 32, 221, 0.10);
  --grng2: rgba(77, 32, 221, 0.06);
}

/* =====================================================
   TEMA BIRU — #208add
   ===================================================== */
[data-color="blue"] {
  --grn:  #208add;
  --grn2: #359de8;
  --grn3: #186eb0;
  --grng:  rgba(32, 138, 221, 0.10);
  --grng2: rgba(32, 138, 221, 0.06);
}

/* =====================================================
   TEMA PINK — #dd2090
   ===================================================== */
[data-color="pink"] {
  --grn:  #dd2090;
  --grn2: #e8339e;
  --grn3: #b01870;
  --grng:  rgba(221, 32, 144, 0.10);
  --grng2: rgba(221, 32, 144, 0.06);
}

/* =====================================================
   WIDGET PILIHAN WARNA DI LEFTBAR
   ===================================================== */

.color-switcher {
  margin-bottom: 18px;
}

/* Baris dot — satu baris, tidak boleh wrap */
.color-opts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Wrapper tiap dot — untuk custom tooltip */
.color-dot-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom tooltip — nama warna saja, tanpa kode hex */
.color-dot-wrap::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) scale(.85);
  background: var(--bg);
  color: var(--tx);
  border: 1px solid var(--br);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: capitalize;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  z-index: 99;
}

.color-dot-wrap:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Tombol bulat tiap warna */
.color-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  outline: none;
  position: relative;
  display: block;
}

.color-dot:hover {
  transform: scale(1.2);
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

.color-dot:focus-visible {
  outline: 2px solid var(--grn);
  outline-offset: 3px;
}

/* State aktif */
.color-dot.active {
  border-color: #fff;
  transform: scale(1.1);
}

/* Warna tiap dot */
.color-dot[data-color="green"]  { background: #088755; }
.color-dot[data-color="red"]    { background: #dd2027; }
.color-dot[data-color="orange"] { background: #dd7120; }
.color-dot[data-color="purple"] { background: #4d20dd; }
.color-dot[data-color="blue"]   { background: #208add; }
.color-dot[data-color="pink"]   { background: #dd2090; }

/* Centang aktif di dalam dot */
.color-dot.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E") center/10px no-repeat;
}