@import './variables.scss';
@import '~@alifd/next/lib/core/style/_global';
@import '~@alifd/next/lib/core/style/_motion';
@import '~@alifd/next/lib/badge/scss/variable';
@import '~@alifd/next/lib/badge/scss/mixin';

// medium时的尺寸
.#{$css-prefix}badge-medium {
  &.#{$css-prefix}badge-not-overflow {
    .#{$css-prefix}badge-count {
      height: $b-design-badge-medium-size;
      width: $b-design-badge-medium-size;
      top: -$b-design-badge-medium-top;
      border-radius: $b-design-badge-medium-top;

      .#{$css-prefix}badge-scroll-number-only span {
        height: $b-design-badge-medium-size;
        line-height: 19px;
      }
    }
  }
  &.#{$css-prefix}badge-overflow .#{$css-prefix}badge-count {
    height: $b-design-badge-medium-size;
    border-radius: $b-design-badge-medium-top;
    line-height: 19px;
    top: -$b-design-badge-medium-top;
  }
}

//small时的尺寸
.#{$css-prefix}badge-small {
  .#{$css-prefix}badge-count {
    top: -$b-design-badge-small-top;
    .#{$css-prefix}badge-scroll-number-only span {
      line-height: 15px;
      margin-left: -2px; // 增加边框之后需要把数字移动
    }
  }
  &.#{$css-prefix}badge-not-overflow .#{$css-prefix}badge-count {
    width: $b-design-badge-small-size;
  }

  &.#{$css-prefix}badge-overflow .#{$css-prefix}badge-count {
    line-height: 15px;
  }
}

// 不同尺寸通用样式
.#{$css-prefix}badge-overflow .#{$css-prefix}badge-count {
  padding-left: $b-design-badge-overflow-padding;
  padding-right: $b-design-badge-overflow-padding;
}

// 不同状态下样式
// dot 形状
.#{$css-prefix}badge-success .#{$css-prefix}badge-dot {
  border-radius: $b-design-badge-small-top;
  background-color: $b-design-badge-success-color;
  .#{$css-prefix}icon::before {
    display: none;
  }
}

.#{$css-prefix}badge-warning .#{$css-prefix}badge-dot {
  border-radius: $b-design-badge-small-top;
  background-color: $b-design-badge-warning-color;
  .#{$css-prefix}icon::before {
    display: none;
  }
}

.#{$css-prefix}badge-error .#{$css-prefix}badge-dot {
  border-radius: $b-design-badge-small-top;
  background-color: $b-design-badge-error-color;
  .#{$css-prefix}icon::before {
    display: none;
  }
}

// icon样式
.#{$css-prefix}badge-error svg,
.#{$css-prefix}badge-warning svg,
.#{$css-prefix}badge-success svg {
  width: $b-design-badge-small-size;
  height: $b-design-badge-small-size;
}

.#{$css-prefix}badge {
  .#{$css-prefix}badge-dot {
    border: 1px solid #fff;
  }
  .#{$css-prefix}badge-count {
    border: 1px solid #fff;
  }
}