@import '../../styles/variables';

.Badge {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  text-transform: uppercase;
  color: $white;
  border-radius: 2px;
  background-color: $action-color;
  font-size: 10px;
  line-height: 1.5;

  //Size
  &_large {
    padding: 1px 10px;
    border-radius: $border-radius;
    font-size: $font-small;
  }

  //Color
  &_warning {
    background-color: $warning-color;
  }

  &_danger {
    background-color: $error-color;
  }

  &_success {
    background-color: $success-color;
  }

  &_clear {
    background-color: transparent;
    color: $black;
  }

  &__icon {
    margin-right: 4px;
    color: $brand-color;
  }
}