@use "../variables" as vars;
@use "../functions" as func;

.badge {
  padding: 0;
  padding-left: func.units(3);
  padding-right: func.units(3);
  border: none;
  font-weight: func.font-weight(vars.$badge-font-weight);
  color: func.color(vars.$badge-default-text-color);
  background: func.color(vars.$badge-default-background-color);
  text-align: center;
  display: inline-block;
  border-radius: func.border-radius('small');
  font-size: func.font-size(vars.$badge-font-size);
  line-height: func.units(vars.$badge-line-height, 'rem');

  &.badge-info {
    color: func.color(vars.$badge-info-text-color);
    background-color: func.color(vars.$badge-info-background-color);
  }

  &.badge-success {
    color: func.color(vars.$badge-success-text-color);
    background-color: func.color(vars.$badge-success-background-color);
  }

  &.badge-warning {
    color: func.color(vars.$badge-warning-text-color);
    background-color: func.color(vars.$badge-warning-background-color);
  }

  &.badge-error {
    color: func.color(vars.$badge-error-text-color);
    background-color: func.color(vars.$badge-error-background-color);
  }
}