.badge {
  --bg: unset;
  --border-radius: 20px;
  --color: var(--grey-3);
  --display: inline-block;
  --pb: 0.5em;
  --pl: 0.5em;
  --pr: 0.5em;
  --pt: 0.5em;
  --border: 1px solid var(--color);

  background: var(--bg);
  border: var(--border);
  border-radius: var(--border-radius);
  color: var(--color);

  display: var(--display);
  padding-bottom: var(--pb);
  padding-left: var(--pl);
  padding-right: var(--pr);
  padding-top: var(--pt);

  &.badge-clickable {
    cursor: pointer;
  }

  &.badge-fill {
    --bg: var(--grey-3);
    --border: none;
    --color: var(--c-secondary);
  }

  &.badge-wide {
    --pl: 1em;
    --pr: 1em;
  }
}