.tag {
  --horizontal-padding: 10px;
  align-self: flex-start;
  background: transparent;
  color: var(--theme-foreground-neutral);
  display: inline-block;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag a {
  text-decoration: none;
}
.tag span {
  transition: color 0.3s ease;
}
.tag--medium {
  --horizontal-padding: 12px;
}
.tag .tag__hashtag {
  padding-right: 2px;
}
.tag--pill {
  background: var(--theme-accent-background);
  border-radius: 999px;
  color: var(--theme-accent-foreground);
  padding: 4px var(--horizontal-padding);
}
.tag--pill .tag__hashtag {
  color: var(--theme-accent-foreground-neutral);
}
.tag--pill-inverted {
  background: var(--theme-accent-foreground);
  border-radius: 999px;
  color: var(--theme-accent-background);
  padding: 4px var(--horizontal-padding);
}
.tag--pill-inverted .tag__hashtag {
  color: var(--theme-accent-background-neutral);
}
.tag--pill-shade {
  background: var(--theme-accent-background-shade);
  border-radius: 999px;
  color: var(--theme-accent-background);
  padding: 4px var(--horizontal-padding);
}
.tag--pill-shade .tag__hashtag {
  color: var(--theme-accent-background-neutral);
}
.tag--label,
.tag--label .tag__hashtag,
.tag--padded-label,
.tag--padded-label .tag__hashtag {
  color: var(--theme-foreground-neutral);
}
.tag--padded-label {
  padding: 4px var(--horizontal-padding);
}
@media (hover: hover) and (pointer: fine) {
  .tag a:hover span {
    color: var(--theme-foreground);
  }
}