.circle-counter {
  user-select: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: $spacer;
  height: $spacer;
  background-color: $gray-lighter;
  border-radius: 50%;
  font-size: $font-size-h6;
}

.circle-counter.sm {
  width: $spacing-md;
  height: $spacing-md;
  font-size: $font-size-sm;
}

.circle-counter.lg {
  width: $spacing-md*2;
  height: $spacing-md*2;
  font-size: $font-size-lg;
}

.circle-counter.success {
  background-color: $success;
  color: $white;
}

.circle-counter.danger {
  background-color: $danger;
  color: $white;
}

.circle-counter.inprogress {
  background-color: $primary;
  color: $white;
}