$dotSize: 8px;
.atom-badge {
    position: relative;
    display: inline-block;
    font-size: 100%;
    vertical-align: super;
    &__dot {
        display: inline-block;
        vertical-align: top;
        z-index: 2;
        width: $dotSize;
        height: $dotSize;
        border-radius: 100%;
        &--fixed {
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(100%, 0);
        }
    }
    &__content {
        height: $big; // 如果不指定高度, 那么父容器的flex属性会影响到badge定位
        line-height: $big;
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
        padding: 0 $gutter/3;
        border-radius: $big;
        color: $sub;
        font-size: $small;
        &--fixed {
            position: absolute;
            top: -5px;
            transform: translate(100%, 0);
            right: 0;
        }
    }
}

@each $key,
$value in $theme_colors {
    // @debug $key;
    .atom-badge--#{$key} {
        .atom-badge__dot {
            background: $value;
        }
        .atom-badge__content {
            background: $value;
        }
    }
}