.tag {
  padding: var(--fx-p-4) var(--fx-p-16);
  border-radius: 100px;
  width: fit-content;
  white-space: nowrap;
  display: flex;
  align-items: center;

  &.positive {
    background-color: var(--bg-status-positive);
    color: var(--text-status-positive);
  }

  &.informative {
    background-color: var(--bg-status-informative);
    color: var(--text-status-informative);
  }

  &.warning {
    background-color: var(--bg-status-warning);
    color: var(--text-status-warning);
  }

  &.special {
    background-color: var(--bg-status-special);
    color: var(--text-status-special);
  }

  &.negative {
    background-color: var(--bg-status-error);
    color: var(--text-status-error);
  }

  &.neutral {
    background-color: var(--bg-subtle);
    color: var(--text-tertiary);
  }

  &.ghost {
    color: var(--text-utility);
    border: 1px solid var(--border-default);
  }

  &.small {
    padding: var(--fx-p-4) var(--fx-p-8);
  }

  /* Matches the breakpoint `typography.js` swaps the mobile variants at. */
  @media (width < 500px) {
    &.shrink-on-mobile {
      padding: var(--fx-p-4) var(--fx-p-8);
    }
  }
}