@import "../lib.less";
@import "../variables/components/badge.less";

.@{veui-prefix}-badge {
    position: relative;
    display: inline-flex;
    align-items: center;

    // 依赖button组件的样式
    .veui-button {
        padding: @veui-badge-padding-y @veui-badge-padding-x;
        border-radius: @veui-badge-button-border-radius;
        line-height: @veui-badge-button-line-height;
    }

    &-main {
        .absolute(0, 0, _, _);
        transform: translate(50%, -50%);
        z-index: 1;
    }

    &-standalone &-main {
        position: static;
        transform: none;
    }

    &-enter,
    &-leave-to {
        transform: translate(50%, -50%) scale(0);
    }

    &-enter-to,
    &-leave {
        transform: translate(50%, -50%) scale(1);
    }

    &-enter-active,
    &-leave-active {
        .veui-transition(transform);
        transform-origin: 50% 50%;
    }

    &-standalone-label {
        margin-left: @veui-badge-label-spacing-status;
    }

    &-label {
        .centered-line(@veui-badge-label-height);
        .padding(_, @veui-badge-label-padding-x);
        min-width: @veui-badge-label-min-width;
        font-size: @veui-badge-font-size;
        color: @veui-badge-font-color;
        border-radius: @veui-badge-label-height / 2;
        text-align: center;
    }

    &-dot {
        .size(@veui-badge-dot-size);
        border-radius: 50%;
    }

    &-aux {
        background-color: @veui-badge-background-color-aux;
    }

    &-info {
        background-color: @veui-badge-background-color-info;
    }

    &-success {
        background-color: @veui-badge-background-color-success;
    }

    &-warning {
        background-color: @veui-badge-background-color-warning;
    }

    &-error {
        background-color: @veui-badge-background-color-error;
    }
}