.amplify-badge {
  background-color: var(--amplify-components-badge-background-color);
  border-radius: var(--amplify-components-badge-border-radius);
  color: var(--amplify-components-badge-color);
  display: inline-flex;
  font-size: var(--amplify-components-badge-font-size);
  font-weight: var(--amplify-components-badge-font-weight);
  line-height: var(--amplify-components-badge-line-height);
  padding: var(--amplify-components-badge-padding-vertical)
    var(--amplify-components-badge-padding-horizontal);
  text-align: var(--amplify-components-badge-text-align);
  &--info {
    color: var(--amplify-components-badge-info-color);
    background-color: var(--amplify-components-badge-info-background-color);
  }

  &--error {
    color: var(--amplify-components-badge-error-color);
    background-color: var(--amplify-components-badge-error-background-color);
  }

  &--warning {
    color: var(--amplify-components-badge-warning-color);
    background-color: var(--amplify-components-badge-warning-background-color);
  }

  &--success {
    color: var(--amplify-components-badge-success-color);
    background-color: var(--amplify-components-badge-success-background-color);
  }

  &--small {
    font-size: var(--amplify-components-badge-small-font-size);
    padding: var(--amplify-components-badge-small-padding-vertical)
      var(--amplify-components-badge-small-padding-horizontal);
  }

  &--large {
    font-size: var(--amplify-components-badge-large-font-size);
    padding: var(--amplify-components-badge-large-padding-vertical)
      var(--amplify-components-badge-large-padding-horizontal);
  }
}