.el-message {
    overflow: visible;

    &__badge {
        animation: el-message-badge .42s;
        padding: 4px 8px;
        position: absolute;
        box-shadow: 0 1px 3px rgba(#000, .2), 0 1px 1px rgba(#000, .14), 0 2px 1px -1px rgba(#000, .12);
        background-color: $--color-danger;
        color: $--color-white;
        border-radius: 4px;
        top: -10px;
        left: -10px;
        font-size: 12px;
        line-height: 12px;
    }

    &__progress {
        z-index: -1;
        position: absolute;
        height: 3px;
        bottom: 0;
        left: 10px;
        right: 10px;
        animation: el-message-progress linear;
        background-color: currentColor;
        opacity: .3;
        transform-origin: 0 50%;
        transform: scaleX(0);
    }
}

@keyframes el-message-badge {
    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)
    }
    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)
    }
    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)
    }
    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)
    }
    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)
    }
}

@keyframes el-message-progress {
    0% {
        transform: scaleX(1)
    }
    100% {
        transform: scaleX(0)
    }
}