@import "../styles/_base.less";

.l-badge {
  position      : relative;
  display       : inline-block;
  line-height   : 1;
  vertical-align: middle;

  &-content {
    max-width          : 650rpx;
    left               : 70%;
    background-color   : #ff474b;
    color              : #fff;
    position           : absolute;
    font-size          : 20rpx;
    display            : inline-block;
    white-space        : nowrap;
    text-overflow      : ellipsis;
    overflow           : hidden;
    text-align         : center;
    box-sizing         : border-box;
    z-index            : 10;
    letter-spacing     : .5rpx;

    &-horn {
      height       : 28rpx;
      min-width    : 54rpx;
      padding      : 0 8rpx;
      border-radius: 14rpx 14rpx 14rpx 0rpx;
      line-height  : 28rpx;
      top          : -10rpx;
    }

    &-circle {
      height       : 32rpx;
      min-width    : 32rpx;
      padding      : 0 10rpx;
      border-radius: 16rpx;
      line-height  : 32rpx;
      top          : -10rpx;
    }
  }

  &-dot {
    height          : 16rpx;
    width           : 16rpx;
    transform       : translateX(50%);
    border-radius   : 50%;
    background-color: #ff474b;
    position        : absolute;
    top             : -4rpx;
    right           : 0rpx;
  }
}