.app-mobile-toast{
    *, *::before, *::after{
        box-sizing: border-box;
    }

    position: fixed;
    flex-direction: column;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
    max-width: 70%;
    min-height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    padding: 16px;
    box-sizing: content-box;
    color: #fff;
    font-size: 14px;
    z-index: 999;
    .app-mobile-toast-icon {
        position: relative;

        &.fail {
            &:before {
                content: ' ';
                display: block;
                position: absolute;
                top: -9px;
                left: -3px;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #fff;
            }

            &:after {
                content: ' ';
                display: block;
                position: absolute;
                top: 5px;
                left: -2px;
                width: 4px;
                height: 24px;
                background: #fff;
                border-radius: 4px;
            }
        }

        &.success {
            &:before {
                content: ' ';
                display: block;
                position: absolute;
                top: 8px;
                left: -10px;
                width: 1px;
                height: 21px;
                border: 2px #fff solid;
                background: #fff;
                transform: rotate(
                    138deg
                );
            }

            &:after{
                content: ' ';
                display: block;
                position: absolute;
                top: -10px;
                left: 9px;
                width: 1px;
                height: 42px;
                border: 2px #fff solid;
                background: #fff;
                transform: rotate(
                    222deg
                );
            }
        }

        &.loading {
            animation: app-mobile-toast-loading linear .6s infinite;
            width: 24px;
            height: 24px;

            &+div{
                margin-top: 13px;
            }

            &:before {
                content: ' ';
                display: block;
                position: absolute;
                width: 24px;
                height: 24px;
                border: 2px #fff solid;
                border-radius: 50%;
                clip-path: polygon(0 0, 65% 0, 100% 100%, 0 100%);
            }

            &:after{
                content: ' ';
                display: block;
                position: absolute;
                left: 10px;
                top: -2px;
                width: 8px;
                height: 8px;
                border: 2px #fff solid;
                border-left-width: 0;
                border-bottom-width: 0;
                transform: rotate(66deg);
            }
        }
    }

    .app-mobile-toast-content{
        margin-top: 36px;
    }


}

@keyframes app-mobile-toast-loading {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}