.erda-badge {
  &.only-dot {
    background-color: transparent !important;
    padding: 0 4px 0 0 !important;
    .erda-badge-status-dot {
      margin-right: 0 !important;
    }
  }
  .erda-badge-status-text {
    word-break: keep-all;
  }
  .erda-badge-status-dot {
    border-radius: 50%;
    position: relative;
  }
  .erda-badge-status-breath {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid;
    border-radius: 50%;
  }

  &.badge-breathing {
    .erda-badge-status-breath {
      animation: erdaStatusProcessing 1.2s infinite ease-in-out;
    }
  }

  &.badge-breathing-2 {
    .erda-badge-status-breath {
      animation-delay: 0.4s;
    }
  }

  &.badge-breathing-3 {
    .erda-badge-status-breath {
      animation-delay: 0.8s;
    }
  }

  &.badge-default {
    font-size: 14px;
    line-height: 24px;
    padding: 0 8px;
    .erda-badge-status-dot {
      width: 6px;
      height: 6px;
      margin-right: 4px;
    }
  }
  &.badge-small {
    font-size: 12px;
    line-height: 20px;
    padding: 0 8px;
    .erda-badge-status-dot {
      width: 4px;
      height: 4px;
      margin-right: 2px;
    }
  }

  &.erda-badge-status-processing {
    color: $color-info;
    background-color: $color-info-bg;
    .erda-badge-status-dot {
      background-color: $color-info;
    }
    &.badge-hover-active:hover {
      background-color: $color-info;
      color: $white;
    }
  }

  &.erda-badge-status-error {
    color: $color-error;
    background-color: $color-error-bg;
    .erda-badge-status-dot {
      background-color: $color-error;
    }
    &.badge-hover-active:hover {
      background-color: $color-error;
      color: $white;
    }
  }

  &.erda-badge-status-success {
    color: $color-success;
    background-color: $color-success-bg;
    .erda-badge-status-dot {
      background-color: $color-success;
    }
    &.badge-hover-active:hover {
      background-color: $color-success;
      color: $white;
    }
  }

  &.erda-badge-status-warning {
    color: $color-warning;
    background-color: $color-warning-bg;
    .erda-badge-status-dot {
      background-color: $color-warning;
    }
    &.badge-hover-active:hover {
      background-color: $color-warning;
      color: $white;
    }
  }
  &.erda-badge-status-default {
    color: $color-default;
    background-color: $color-default-bg;
    .erda-badge-status-dot {
      background-color: $color-default;
    }
    &.badge-hover-active:hover {
      background-color: $color-default;
      color: $white;
    }
  }

  &.badge-hover-active:hover {
    .erda-badge-status-dot {
      display: none;
    }
  }

  @keyframes erdaStatusProcessing {
    0% {
      transform: scale(0.8);
      opacity: 0.8;
    }

    to {
      transform: scale(2.4);
      opacity: 0;
    }
  }
}
