/*
 * Tags
 *
 * BEM-style component classes for category/status pills like
 * "In progress", "High priority". Emitted by the `span_with_colour`
 * helper in app/helpers/styles_helper.rb, or written directly in ERB.
 *
 * Usage:
 *   class="tag tag--slate tag--rounded-md tag--sm"   (default tag)
 *   class="tag tag--red tag--rounded-full tag--xs"   (red tag with full rounding, xs size)
 *
 * Colour, radius, and size each contribute their own modifier class,
 * so they stack on a single element.
 *
 * Kept in sync with `TEXT_COLOURS` in app/helpers/styles_helper.rb —
 * if you add a colour there, add a `.tag--<name>` rule here too.
 */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border: 1px solid transparent;
  font-weight: 500;
}

.task-category-badge {
  border-radius: var(--radius-md);
}

/* ------------------------------------------------------------------ */
/* Rounded modifiers                                                  */
/* ------------------------------------------------------------------ */

.tag--rounded-full {
  border-radius: var(--radius-pill);
}

.tag--rounded-md {
  border-radius: var(--radius-md);
}

/* ------------------------------------------------------------------ */
/* Size modifiers                                                     */
/* ------------------------------------------------------------------ */

.tag--xs {
  font-size: 0.75rem;
}

.tag--sm {
  font-size: 0.875rem;
}

.tag--lg {
  font-size: 1.125rem;
}

.tag--xl {
  font-size: 1.25rem;
}

/* ------------------------------------------------------------------ */
/* Colour modifiers — bg/border/text per palette entry                */
/* ------------------------------------------------------------------ */

.tag--red {
  background-color: rgb(var(--palette-red-100));
  border-color: rgb(var(--palette-red-200));
  color: rgb(var(--palette-red-800));
}

.tag--green {
  background-color: rgb(var(--palette-green-100));
  border-color: rgb(var(--palette-green-200));
  color: rgb(var(--palette-green-800));
}

.tag--yellow {
  background-color: rgb(var(--palette-yellow-100));
  border-color: rgb(var(--palette-yellow-200));
  color: rgb(var(--palette-yellow-800));
}

.tag--blue {
  background-color: rgb(var(--palette-blue-100));
  border-color: rgb(var(--palette-blue-200));
  color: rgb(var(--palette-blue-800));
}

.tag--indigo {
  background-color: rgb(var(--palette-indigo-100));
  border-color: rgb(var(--palette-indigo-200));
  color: rgb(var(--palette-indigo-800));
}

.tag--purple {
  background-color: rgb(var(--palette-purple-100));
  border-color: rgb(var(--palette-purple-200));
  color: rgb(var(--palette-purple-800));
}

.tag--pink {
  background-color: rgb(var(--palette-pink-100));
  border-color: rgb(var(--palette-pink-200));
  color: rgb(var(--palette-pink-800));
}

.tag--orange {
  background-color: rgb(var(--palette-orange-100));
  border-color: rgb(var(--palette-orange-200));
  color: rgb(var(--palette-orange-800));
}

.tag--teal {
  background-color: rgb(var(--palette-teal-100));
  border-color: rgb(var(--palette-teal-200));
  color: rgb(var(--palette-teal-800));
}

.tag--cyan {
  background-color: rgb(var(--palette-cyan-50));
  border-color: rgb(var(--palette-cyan-200));
  color: rgb(var(--palette-cyan-800));
}

.tag--gray {
  background-color: var(--color-surface-subtle);
  border-color: var(--color-border);
  color: var(--color-ink-light);
}

/* White uses gray-200 for the border so the chip stays visible on white surfaces. */
.tag--white {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-ink-light);
}

/* Black inverts: white border + white text on black background. */
.tag--black {
  background-color: var(--color-ink);
  border-color: var(--color-surface);
  color: var(--color-ink-inverted);
}

.tag--amber {
  background-color: rgb(var(--palette-amber-100));
  border-color: rgb(var(--palette-amber-200));
  color: rgb(var(--palette-amber-800));
}

.tag--lime {
  background-color: rgb(var(--palette-lime-100));
  border-color: rgb(var(--palette-lime-200));
  color: rgb(var(--palette-lime-800));
}

.tag--emerald {
  background-color: rgb(var(--palette-emerald-100));
  border-color: rgb(var(--palette-emerald-200));
  color: rgb(var(--palette-emerald-800));
}

.tag--rose {
  background-color: rgb(var(--palette-rose-100));
  border-color: rgb(var(--palette-rose-200));
  color: rgb(var(--palette-rose-800));
}

.tag--sky {
  background-color: rgb(var(--palette-sky-100));
  border-color: rgb(var(--palette-sky-200));
  color: rgb(var(--palette-sky-800));
}

.tag--violet {
  background-color: rgb(var(--palette-violet-100));
  border-color: rgb(var(--palette-violet-200));
  color: rgb(var(--palette-violet-800));
}

.tag--fuchsia {
  background-color: rgb(var(--palette-fuchsia-100));
  border-color: rgb(var(--palette-fuchsia-200));
  color: rgb(var(--palette-fuchsia-900));
}

.tag--slate {
  background-color: var(--color-surface-subtle);
  border-color: var(--color-border);
  color: var(--color-ink);
}

.color-dot--red       { background-color: var(--color-danger); }
.color-dot--green     { background-color: var(--color-success); }
.color-dot--yellow    { background-color: var(--color-warning); }
.color-dot--blue      { background-color: var(--color-info); }
.color-dot--indigo    { background-color: var(--color-brand); }
.color-dot--purple    { background-color: var(--color-accent); }
.color-dot--pink      { background-color: rgb(var(--palette-pink-500)); }
.color-dot--orange    { background-color: rgb(var(--palette-orange-500)); }
.color-dot--teal      { background-color: rgb(var(--palette-teal-500)); }
.color-dot--cyan      { background-color: rgb(var(--palette-cyan-500)); }
.color-dot--gray      { background-color: var(--color-ink-lighter); }
.color-dot--white     { background-color: var(--color-border-medium); }
.color-dot--black     { background-color: var(--color-ink); }
.color-dot--amber     { background-color: rgb(var(--palette-amber-500)); }
.color-dot--lime      { background-color: rgb(var(--palette-lime-500)); }
.color-dot--emerald   { background-color: rgb(var(--palette-emerald-500)); }
.color-dot--rose      { background-color: rgb(var(--palette-rose-500)); }
.color-dot--sky       { background-color: rgb(var(--palette-sky-500)); }
.color-dot--violet    { background-color: rgb(var(--palette-violet-500)); }
.color-dot--fuchsia   { background-color: rgb(var(--palette-fuchsia-500)); }
.color-dot--slate     { background-color: var(--color-ink-light); }