@import './token.less';

@badge-prefix-cls: ~'@{prefix}-badge';

.@{badge-prefix-cls} {
  position: relative;
  display: inline-block;
  line-height: 1;

  &-number,
  &-dot,
  &-text,
  &-custom-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    border-radius: @badge-size-count-height;
    transform: translate(50%, -50%);
    transform-origin: 100% 0%;
  }

  &-custom-dot {
    background-color: var(~'@{mo-cssvars-prefix}-color-bg-2');
  }

  &-number,
  &-text {
    min-width: @badge-size-count-height;
    height: @badge-size-count-height;
    padding: 0 @badge-padding-count-horizontal;
    color: @badge-color-count-text;
    font-weight: @badge-font-count-weight;
    font-size: @badge-font-count-size;
    line-height: @badge-size-count-height;
    background-color: @badge-color-count-bg;
    box-shadow: 0 0 0 2px var(~'@{mo-cssvars-prefix}-color-bg-2');
  }

  &-dot {
    width: @badge-size-dot-width;
    height: @badge-size-dot-width;
    background-color: @badge-color-count-bg;
    border-radius: @radius-circle;
    box-shadow: 0 0 0 2px var(~'@{mo-cssvars-prefix}-color-bg-2');
  }

  &-no-children &-dot,
  &-no-children &-number,
  &-no-children &-text {
    position: relative;
    top: unset;
    right: unset;
    display: inline-block;
    transform: none;
  }

  &-status-wrapper {
    display: inline-flex;
    align-items: center;
  }

  &-status-dot {
    display: inline-block;
    width: @badge-size-dot-width;
    height: @badge-size-dot-width;
    border-radius: @radius-circle;
  }

  &-status-normal {
    background-color: @badge-color-dot-bg_default;

    &::after {
      border-color: @badge-color-dot-bg_default;
      animation: ~'@{prefix}-animation' 1.2s ease-in-out infinite;
    }
  }

  &-status-processing {
    background-color: @badge-color-dot-bg_processing;

    &::after {
      border-color: @badge-color-dot-bg_processing;
      animation: ~'@{prefix}-animation' 1.2s ease-in-out infinite;
    }
  }

  &-status-success {
    background-color: @badge-color-dot-bg_success;

    &::after {
      border-color: @badge-color-dot-bg_success;
      animation: ~'@{prefix}-animation' 1.2s ease-in-out infinite;
    }
  }

  &-status-warning {
    background-color: @badge-color-dot-bg_warning;

    &::after {
      border-color: @badge-color-dot-bg_warning;
      animation: ~'@{prefix}-animation' 1.2s ease-in-out infinite;
    }
  }

  &-status-danger {
    background-color: @badge-color-dot-bg_error;

    &::after {
      border-color: @badge-color-dot-bg_error;
      animation: ~'@{prefix}-animation' 1.2s ease-in-out infinite;
    }
  }

  @colors: red, orangered, orange, gold, lime, green, cyan, moblue, purple,
    pinkpurple, magenta, gray;

  .for(@data, @i: 1) when(@i =< length(@data)) {
    @color-name: extract(@data, @i);

    @color: ~'badge-@{color-name}-color-dot-bg';

    &-color-@{color-name} {
      background-color: @@color;

      &::after {
        border-color: @@color;
        animation: ~'@{prefix}-animation' 1.2s ease-in-out infinite;
      }
    }
    .for(@data, (@i + 1));
  }

  .for(@colors);

  .@{badge-prefix-cls}-status-text {
    margin-left: @badge-margin-status-text-left;
    color: @badge-color-status-text;
    font-size: @badge-font-status-text-size;
    line-height: @line-height-base;
  }

  &-number-text {
    display: inline-block;
    animation: ~'@{prefix}-badge-scale' @transition-duration-5 @transition-timing-function-overshoot;
  }

  &-animation {
    &::after {
      position: absolute;
      box-sizing: border-box;
      width: @badge-size-dot-width;
      height: @badge-size-dot-width;
      border-style: solid;
      border-width: 1px;
      border-radius: 50%;
      content: '';
    }
  }
}

@keyframes ~'@{prefix}-badge-scale' {
  from {
    transform: scale(0, 0);
  }

  to {
    transform: scale(1, 1);
  }
}

@keyframes ~'@{prefix}-animation' {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }

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

.badge-zoom-enter-active {
  animation: zoom-in 0.1s;
}

.badge-zoom-leave-active {
  animation: zoom-in 0.1s reverse;
}

@keyframes zoom-in {
  0% {
    transform: translate(50%, -50%) scale(0.2, 0.2);
    transform-origin: center;
  }

  100% {
    transform: translate(50%, -50%) scale(1, 1);
    transform-origin: center;
  }
}