.token {
  background: var(--input-bg);
  border-radius: 99px;
  display: inline-flex;
  font-size: $font-tiny;
  font-weight: $bold;
  line-height: 1.4;
  text-align: center;
  padding: $unit-three-fourth ($unit * 1.5);
  user-select: none;

  &.chargeAttack.on {
    background: var(--charge-attack-bg);
    color: var(--charge-attack-text);
  }

  &.fullAuto.on,
  &.autoSummon.on {
    background: var(--full-auto-bg);
    color: var(--full-auto-text);
  }

  &.autoGuard.on {
    background: var(--auto-guard-bg);
    color: var(--auto-guard-text);
  }

  &.off {
    color: var(--text-secondary);
  }
}