.badge {
  display: block;
  border-radius: 50%;
  font-size: 11px;
  height: 18px;
  width: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 18px;
  color: var(--color-heading);
  background: var(--color-third);

  &.color-primary {
    background: white;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
  }

  &.color-secondary {
    background: white;
    border: 1px solid var(--color-secondary);
    color: var(--color-secondary);
  }

  &.color-third {
    background: white;
    border: 1px solid var(--color-third);
    color: var(--color-third);
  }

  &.reversed {
    &.color-primary {
      background: var(--color-primary);
      border: 1px solid var(--color-primary);
      color: white;
    }

    &.color-secondary {
      background: var(--color-secondary);
      border: 1px solid var(--color-secondary);
      color: white;
    }

    &.color-third {
      background: var(--color-third);
      border: 1px solid var(--color-third);
      color: white;
    }
  }
}