/*! rtl:begin:ignore */
@import '../../style/themes/index';
@import './mixin.less';
@badge-prefix-cls: ~'@{kd-prefix}-badge';
.@{badge-prefix-cls} {
  position: relative;
  display: inline-block;
  line-height: 1;
  font-size: @badge-font-size-base;

  &-count {
    z-index: auto;
    min-width: @badge-size-base;
    height: @badge-size-base;
    color: @badge-color-text;
    font-weight: @badge-font-weight;
    font-size: @font-size-small;
    line-height: @badge-size-base;
    white-space: nowrap;
    text-align: center;
    background: @badge-color-background;
    border-radius: calc(@badge-size-base / 2);
  }

  &-count-sm {
    min-width: @badge-size-small;
    height: @badge-size-small;
    padding: 0;
    font-size: @badge-font-size-small;
    line-height: @badge-size-small;
    border-radius: calc(@badge-size-small / 2);
  }

  &-dot {
    z-index: auto;
    width: @badge-size-dot;
    min-width: @badge-size-dot;
    height: @badge-size-dot;
    background: @badge-color-background;
    border-radius: 100%;
  }

  &-dot,
  &-custom-component,
  &-count {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    transform-origin: 100% 0%;
  }

  &-multiple-words {
    padding: 0 4px;
  }

  &-status {
    line-height: inherit;
    vertical-align: baseline;
    &-text {
      margin-left: 8px;
      color: @badge-color-text-primary;
      font-size: @badge-font-size-base;
    }
    &-dot {
      position: relative;
      top: -1px;
      display: inline-block;
      width: @badge-size-status;
      height: @badge-size-status;
      vertical-align: middle;
      border-radius: 50%;
    }
    &-success {
      background-color: @badge-color-success;
    }
    &-processing {
      background-color: @badge-color-ongoing;
      &::after {
        position: absolute;
        top: -1px;
        left: -1px;
        width: 100%;
        height: 100%;
        border: 1px solid @badge-color-ongoing;
        border-radius: 50%;
        animation: antStatusProcessing 1.2s infinite ease-in-out;
        content: '';
      }
    }
    &-error {
      background-color: @badge-color-error;
    }
    &-default {
      background-color: @badge-color-default;
    }
    &-warning {
      background-color: @badge-color-warning;
    }
  }

  &-not-a-wrapper {
    &:not(.@{badge-prefix-cls}-status) {
      vertical-align: middle;
    }

    .@{badge-prefix-cls}-custom-component,
    .@{badge-prefix-cls}-count {
      position: relative;
      top: auto;
      display: block;
      transform-origin: 50% 50%;
      transform: none;
    }
  }
}

@keyframes antStatusProcessing {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.@{badge-prefix-cls}-rtl {
  direction: rtl;
  &.@{badge-prefix-cls} {
    .@{badge-prefix-cls}-dot,
    .@{badge-prefix-cls}-custom-component,
    .@{badge-prefix-cls}-count {
      position: absolute;
      left: 0;
      right: auto;
      transform: translate(-50%, -50%);
    }
  }
}
/*! rtl:end:ignore */