.tag {
  display: inline-block;
  padding: var(--padding-xs) var(--padding-sm);
  margin-right: 1em;
  line-height: 1em;
  box-sizing: border-box;
  text-align: center;
  background: var(--hl-sm);
  border: 1px solid rgba(0, 0, 0, 0.07);
  white-space: nowrap;

  &.tag--superscript {
    position: absolute;
    font-size: 0.6em;
    bottom: 0.9em;
    left: -0.6em;
  }

  &:last-child {
    margin-right: 0;
  }

  &.tag--small {
    padding: var(--padding-xxs) var(--padding-xs);
    margin-right: var(--padding-xs);
    font-size: var(--font-size-xs);
  }

  &.tag--no-bg {
    background: transparent;
    border: 0;
  }

  &.tag--outlined {
    border: 1px solid;
  }
}
