@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;

  &.badge-large {
    font-size: func.font-size(vars.$badge-large-font-size);
    line-height: func.units(vars.$badge-large-line-height, 'rem');
  }

  &.badge-small {
    font-size: func.font-size(vars.$badge-small-font-size);
    line-height: func.units(vars.$badge-small-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);
  }
}