/* =============================================================================
   TAGS
   Classes: .tag, .tag-link, .tag-neutral
   Figma: Tag (Scheme = Brand | Neutral)
   Colors mirror the semantic tokens Figma binds on the Tag component —
   there are no tag color tokens in the Components collection (known gap).
============================================================================= */

/* ─── .tag (Brand scheme) ───
   Type it on the element that is the label itself (Text module, Button-less
   Code module). For terms rendered by Divi/ACF, put it on the term element,
   not on its parent. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--tag-padding);
  border-style: solid;
  border-width: var(--tag-border);
  border-color: var(--border-on-light);
  border-radius: var(--tag-radius);
  background-color: var(--background-brand-primary);
  color: var(--text-brand-on-primary);
  text-decoration: none;
}

.tag a {
  color: inherit;
  text-decoration: none;
}

/* ─── .tag-link ─── a tag that links somewhere: adds the arrow icon */
.tag-link::after {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  background-color: currentColor;
  -webkit-mask: url("../assets/arrow.svg") center / contain no-repeat;
  mask: url("../assets/arrow.svg") center / contain no-repeat;
}

/* ─── .tag-neutral (Neutral scheme) ─── */
.tag-neutral {
  border-width: var(--stroke-border);
  background-color: var(--background-neutral-light);
  color: var(--text-on-light-primary);
}