:root {
  --vt-label-green:  #166534;  --vt-label-green-soft:  #dcfce7;
  --vt-label-red:    #b91c1c;  --vt-label-red-soft:    #fee2e2;
  --vt-label-orange: #c2410c;  --vt-label-orange-soft: #ffedd5;
  --vt-label-yellow: #854d0e;  --vt-label-yellow-soft: #fef9c3;
  --vt-label-blue:   #1d4ed8;  --vt-label-blue-soft:   #dbeafe;
  --vt-label-teal:   #0f766e;  --vt-label-teal-soft:   #ccfbf1;
  --vt-label-pink:   #be185d;  --vt-label-pink-soft:   #fce7f3;
  --vt-label-gray:   #475569;  --vt-label-gray-soft:   #e2e8f0;
}

[data-bs-theme="dark"] {
  --vt-label-green:  #86efac;  --vt-label-green-soft:  #12301f;
  --vt-label-red:    #fca5a5;  --vt-label-red-soft:    #3b1717;
  --vt-label-orange: #fdba74;  --vt-label-orange-soft: #3a2210;
  --vt-label-yellow: #fde047;  --vt-label-yellow-soft: #36300f;
  --vt-label-blue:   #93c5fd;  --vt-label-blue-soft:   #16264a;
  --vt-label-teal:   #5eead4;  --vt-label-teal-soft:   #0f302d;
  --vt-label-pink:   #f9a8d4;  --vt-label-pink-soft:   #3b1628;
  --vt-label-gray:   #cbd5e1;  --vt-label-gray-soft:   #2a3242;
}

.vt-label, .vt-label-dot, .vt-label-pick {
  --vt-lc: var(--vt-label-gray);
  --vt-lc-soft: var(--vt-label-gray-soft);
}
:is(.vt-label, .vt-label-dot, .vt-label-pick)[data-color="green"]  { --vt-lc: var(--vt-label-green);  --vt-lc-soft: var(--vt-label-green-soft); }
:is(.vt-label, .vt-label-dot, .vt-label-pick)[data-color="red"]    { --vt-lc: var(--vt-label-red);    --vt-lc-soft: var(--vt-label-red-soft); }
:is(.vt-label, .vt-label-dot, .vt-label-pick)[data-color="orange"] { --vt-lc: var(--vt-label-orange); --vt-lc-soft: var(--vt-label-orange-soft); }
:is(.vt-label, .vt-label-dot, .vt-label-pick)[data-color="yellow"] { --vt-lc: var(--vt-label-yellow); --vt-lc-soft: var(--vt-label-yellow-soft); }
:is(.vt-label, .vt-label-dot, .vt-label-pick)[data-color="blue"]   { --vt-lc: var(--vt-label-blue);   --vt-lc-soft: var(--vt-label-blue-soft); }
:is(.vt-label, .vt-label-dot, .vt-label-pick)[data-color="teal"]   { --vt-lc: var(--vt-label-teal);   --vt-lc-soft: var(--vt-label-teal-soft); }
:is(.vt-label, .vt-label-dot, .vt-label-pick)[data-color="pink"]   { --vt-lc: var(--vt-label-pink);   --vt-lc-soft: var(--vt-label-pink-soft); }

.vt-label {
  display: inline-block; max-width: 100%; vertical-align: middle;
  padding: .1rem .5rem;
  border-radius: var(--vt-r-sm);
  background: var(--vt-lc-soft); color: var(--vt-lc);
  font-size: .72rem; font-weight: 600; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.vt-label-dot {
  display: inline-block; flex: none; vertical-align: middle;
  width: .6rem; height: .6rem; border-radius: 50%;
  background: var(--vt-lc);
}

.vt-label-pick {
  width: 1.75rem; height: 1.75rem; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--vt-lc);
  cursor: pointer;
}
.vt-label-pick.on { box-shadow: 0 0 0 2px var(--vt-surface), 0 0 0 4px var(--vt-lc); }
.vt-label-pick:focus-visible { outline: 2px solid var(--vt-accent); outline-offset: 3px; }