@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';

.#{$hashClassName} {
  &.cn-ui-m-badge {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    white-space: nowrap;

    &--auto {
      margin-right: $m-s-4;
    }

    .cn-ui-m-badge {
      &--custom {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      }

      &-content {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: $m-s-6;
        border-radius: $m-radius;
        background-color: $m-color-error;
        /* 这里如果使用 border 的话，边框颜色会跟红点颜色溶到一起 */
        box-shadow: 0 $m-s-2 $m-s-4 0 rgba(236, 62, 62, 0.5);

        &--auto {
          position: absolute;
          right: 0;
          top: 0;
          transform: translate(50%, -50%);
        }

        &--normal {
          padding-left: $m-s-4;
          padding-right: $m-s-4;
        }

        &--dot {
          background-color: $m-color-error;
          border-radius: 100%;
          min-width: $m-s-6;
          height: $m-s-6;
          width: $m-s-6;
        }

        &--inline {
          margin: 0 $m-s-4;
          box-shadow: none;
        }

        &--inline-secondary {
          margin: 0 $m-s-4;
          background-color: $m-color-bg-dark;
          box-shadow: none;
        }
      }

      // 文字
      &-text {
        color: $m-color-bg-white;
        font-size: $m-font-size-caption2;
        line-height: $m-font-size-body-1;
      }
    }
  }
}