/* ==========================================================================
   Tag — Carbon tag
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  min-height: 1.5rem;
  padding: 0 var(--cds-spacing-03);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--cds-layer-accent);
  color: var(--cds-text-primary);
}

.tag::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
}

.tag--live {
  background: var(--cds-green-10);
  color: var(--cds-green-60);
}

.tag--beta {
  background: var(--cds-blue-10);
  color: var(--cds-blue-70);
}

.tag--coming-soon {
  background: var(--cds-gray-20);
  color: var(--cds-gray-70);
}

.tag--blue {
  background: var(--cds-blue-10);
  color: var(--cds-blue-70);
}

.tag--green {
  background: var(--cds-green-10);
  color: var(--cds-green-60);
}

.tag--red {
  background: var(--cds-red-10);
  color: var(--cds-red-60);
}

.tag--yellow {
  background: var(--cds-yellow-10);
  color: var(--cds-yellow-60);
}

.tag--purple {
  background: var(--cds-purple-10);
  color: var(--cds-purple-60);
}

.tag--cyan {
  background: var(--cds-cyan-10);
  color: var(--cds-cyan-60);
}

.tag--gray {
  background: var(--cds-gray-20);
  color: var(--cds-gray-70);
}

.tag--plain::before {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tag--live,
  :root:not([data-theme="light"]) .tag--green {
    background: #044317;
    color: var(--cds-green-40);
  }
  :root:not([data-theme="light"]) .tag--beta,
  :root:not([data-theme="light"]) .tag--blue {
    background: var(--cds-blue-80);
    color: var(--cds-blue-20);
  }
  :root:not([data-theme="light"]) .tag--coming-soon,
  :root:not([data-theme="light"]) .tag--gray {
    background: var(--cds-gray-80);
    color: var(--cds-gray-30);
  }
  :root:not([data-theme="light"]) .tag--red {
    background: #750e13;
    color: #ffb3b8;
  }
  :root:not([data-theme="light"]) .tag--yellow {
    background: #483700;
    color: #fddc69;
  }
  :root:not([data-theme="light"]) .tag--purple {
    background: #491d8b;
    color: #e8daff;
  }
  :root:not([data-theme="light"]) .tag--cyan {
    background: #003a6d;
    color: #bae6ff;
  }
}