@import '../animation/variables.scss';

$name: 'ivue-badge';

:root {
  // 数值
  --#{$name}-count-size: 20px;
  --#{$name}-count-padding: 0 6px;
  --#{$name}-count-font-size: 12px;

  // 小红点
  --#{$name}-dot-size: 8px;
  --#{$name}-dot-position-top: -4px;
  --#{$name}-dot-position-right: -8px;

  // 状态
  --#{$name}-status-dot-size: 6px;
  --#{$name}-status-font-size: 14px;

  // color
  --#{$name}-blue: #1890ff;
  --#{$name}-green: #52c41a;
  --#{$name}-red: #f5222d;
  --#{$name}-yellow: #fadb14;
  --#{$name}-pink: #eb2f96;
  --#{$name}-orange: #fa8c16;
  --#{$name}-gold: #faad14;
  --#{$name}-lime: #a0d911;
  --#{$name}-cyan: #13c2c2;
  --#{$name}-purple: #722ed1;
  --#{$name}-dot-color: rgba(255, 97, 127, 0.5);
}

$colors: (
  'blue',
  'green',
  'red',
  'yellow',
  'pink',
  'orange',
  'gold',
  'lime',
  'cyan',
  'purple'
);

.#{$name} {
  position: relative;
  display: inline-block;

  // 数值
  &-count {
    position: absolute;
    transform: translateX(50%);
    transform-origin: -10% center;
    top: -10px;
    right: 0;
    padding: var(--#{$name}-count-padding);
    min-width: var(--#{$name}-count-size);
    height: var(--#{$name}-count-size);
    border-radius: 10px;
    font-size: var(--#{$name}-count-font-size);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: var(--ivue-white-color);
    transition: all $ivue-transition-default;
    z-index: 10;

    &--custom {
      background: transparent;
      padding: 0;
      color: inherit;
      border-color: transparent;
      box-shadow: none;
      height: auto;
    }

    &--alone {
      top: auto;
      position: relative;
      transform: translateX(0);
    }
  }

  // 小红点
  &-dot {
    position: absolute;
    transform: translateX(-50%);
    transform-origin: 0 center;
    top: var(--#{$name}-dot-position-top);
    right: var(--#{$name}-dot-position-right);
    width: var(--#{$name}-dot-size);
    height: var(--#{$name}-dot-size);
    border-radius: 100%;
    box-shadow: 0 0 2px 1px var(--#{$name}-dot-color);
    transform-origin: 0 center;
    transition: $ivue-transition-default;
    z-index: 10;
  }

  // 状态
  &-status {
    display: flex;
    align-items: center;

    &--dot {
      position: relative;
      width: var(--#{$name}-status-dot-size);
      height: var(--#{$name}-status-dot-size);
      border-radius: 50%;
    }

    &--text {
      color: var(--ivue-title-color);
      font-size: var(--#{$name}-status-font-size);
      margin-left: var(--#{$name}-status-dot-size);
    }

    // success
    &--success {
      background-color: var(--ivue-success-color);
    }

    // error
    &--error {
      background-color: var(--ivue-error-color);
    }

    // default
    &--default {
      background-color: var(--ivue-default-color);
    }

    // processing
    &--processing {
      background-color: var(--ivue-primary-color);

      &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid var(--ivue-primary-color);
        animation: aniStatusProcessing 1.2s infinite var(--ivue-ease-in-out);
      }
    }

    // warning
    &--warning {
      background-color: var(--ivue-warning-color);
    }

    @each $_color, $color in $colors {
      .ivue-badge-status--#{$_color} {
        background-color: var(--#{$name}-#{$_color});
      }
    }
  }
}

.#{$name}-fade-enter-active,
.#{$name}-fade-leave-active {
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
}

.#{$name}-fade-enter-from,
.#{$name}-fade-leave-to {
  transform: scale(0) rotate(-45deg);
}

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

  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}