@include component-rules($petals--badge-component-name) {
  &--status &-dot,
  &--status &-text {
    display: inline-block;
  }

  &--status &-dot {
    position: relative;
    top: -1px;
    margin-right: 8px;
    vertical-align: middle;
    @include circle(6px);
  }

  &-dot {
    &--default {
      background-color: #d9d9d9;
    }

    &--processing {
      background-color: #1890ff;
    }

    &--success {
      background-color: #52c41a;
    }

    &--error {
      background-color: #f5222d;
    }

    &--warning {
      background-color: #faad14;
    }
  }
}