@import '../../style/index.less';

@du-prefix-status: ~"@{du-prefix}-status";

.@{du-prefix-status} {
    display: inline-block;
    .@{du-prefix-status}-type {
        position: relative;
        &::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 5px;
            border-radius: 50%;
        }
        &.@{du-prefix-status}-type-success {
            color: @green;
            &::before {
                background: @green;
            }
        }
        &.@{du-prefix-status}-type-error {
            color: @red;
            &:before {
                background: @red;
            }
        }
        &.@{du-prefix-status}-type-warning {
            color: @yellow;
            &:before {
                background: @yellow;
            }
        }
        &.@{du-prefix-status}-type-unavailable {
            color: @gray;
            &:before {
                background: @gray;
            }
        }
        &.@{du-prefix-status}-type-pending {
            padding-left: 36px;
            position: relative;
            &::before {
                position: absolute;
                background-color: @blue;
                left: 18px;
                top: 50%;
                margin-top: -5px;
                animation: du-animation-before 2s;
                animation-iteration-count: infinite;
            }
            &::after {
                position: absolute;
                content: "";
                display: inline-block;
                width: 10px;
                height: 10px;
                left: 2px;
                top: 50%;
                margin-top: -5px;
                border-radius: 50%;
                background-color: @yellow;
                animation: du-animation-after 2s;
                animation-iteration-count: infinite;
            }
        }
    }

    @keyframes du-animation-before {
        0% {
            left: 18px;
        }
        50% {
            left: 2px;
        }
        100% {
            left: 18px;
        }
    }
    @keyframes du-animation-after {
        0% {
            left: 2px;
        }
        50% {
            left: 18px;
        }
        100% {
            left: 2px;
        }
    }
}