<template>
    <div class="we-no-result">
        <div class="loading-container LTR">
            <div class="📦"></div>
            <div class="📦"></div>
            <div class="📦"></div>
            <div class="📦"></div>
            <div class="📦"></div>
        </div>
        <div class="Fa"> {{ textFa }} </div>
        <div class="En"> {{ textEn }} </div>
    </div>

</template>

<script>
    export default {
        props: {
            src:                { default: '/images/Global/Animated/Loading.gif' },
            textFa:             { default: " درحال دریافت اطلاعات... لطفا شکیبا باشید " },
            textEn:             { default: " GATHERING DATA, PLEASE BE PATIENT " },

        },
    };
</script>
<style lang="scss">
    :root {
        --duration: 1.5s;
        --container-size: 250px;
        --box-size: 33px;
        --box-border-radius: 15%;
        --color-1: #D81B60;
        --color-2: #C2185B;
        --color-3: #AD1457;
        --color-4: #880E4F;
    }


    .loading-container {
        width: var(--container-size);
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        align-items: center;
        position: relative;
        margin: 0 auto;
        padding-bottom: 20px;
    }

    .📦 {
        width: var(--box-size);
        height: var(--box-size);
        position: relative;
        display: block;
        -webkit-transform-origin: -50% center;
        transform-origin: -50% center;
        border-radius: var(--box-border-radius);
    }
    .📦:after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background-color: lightblue;
        border-radius: var(--box-border-radius);
        box-shadow: 0px 0px 10px 0px rgba(183, 100, 143, 0.4);
    }
    .📦:nth-child(1) {
        -webkit-animation: slide var(--duration) ease-in-out infinite alternate;
        animation: slide var(--duration) ease-in-out infinite alternate;
    }
    .📦:nth-child(1):after {
        -webkit-animation: color-change var(--duration) ease-in-out infinite alternate;
        animation: color-change var(--duration) ease-in-out infinite alternate;
    }
    .📦:nth-child(2) {
        -webkit-animation: flip-1 var(--duration) ease-in-out infinite alternate;
        animation: flip-1 var(--duration) ease-in-out infinite alternate;
    }
    .📦:nth-child(2):after {
        -webkit-animation: squidge-1 var(--duration) ease-in-out infinite alternate;
        animation: squidge-1 var(--duration) ease-in-out infinite alternate;
    }
    .📦:nth-child(3) {
        -webkit-animation: flip-2 var(--duration) ease-in-out infinite alternate;
        animation: flip-2 var(--duration) ease-in-out infinite alternate;
    }
    .📦:nth-child(3):after {
        -webkit-animation: squidge-2 var(--duration) ease-in-out infinite alternate;
        animation: squidge-2 var(--duration) ease-in-out infinite alternate;
    }
    .📦:nth-child(4) {
        -webkit-animation: flip-3 var(--duration) ease-in-out infinite alternate;
        animation: flip-3 var(--duration) ease-in-out infinite alternate;
    }
    .📦:nth-child(4):after {
        -webkit-animation: squidge-3 var(--duration) ease-in-out infinite alternate;
        animation: squidge-3 var(--duration) ease-in-out infinite alternate;
    }
    .📦:nth-child(5) {
        -webkit-animation: flip-4 var(--duration) ease-in-out infinite alternate;
        animation: flip-4 var(--duration) ease-in-out infinite alternate;
    }
    .📦:nth-child(5):after {
        -webkit-animation: squidge-4 var(--duration) ease-in-out infinite alternate;
        animation: squidge-4 var(--duration) ease-in-out infinite alternate;
    }
    .📦:nth-child(2):after {
        background-color: var(--color-1);
    }
    .📦:nth-child(3):after {
        background-color: var(--color-2);
    }
    .📦:nth-child(4):after {
        background-color: var(--color-3);
    }
    .📦:nth-child(5):after {
        background-color: var(--color-4);
    }

    @-webkit-keyframes slide {
        0% {
            background-color:  var(--color-1);
            -webkit-transform: translatex(0vw);
            transform: translatex(0vw);
        }
        100% {
            background-color: var(--color-2);
            -webkit-transform: translatex(calc(var(--container-size) - (var(--box-size) * 1.25)));
            transform: translatex(calc(var(--container-size) - (var(--box-size) * 1.25)));
        }
    }

    @keyframes slide {
        0% {
            background-color:  var(--color-1);
            -webkit-transform: translatex(0vw);
            transform: translatex(0vw);
        }
        100% {
            background-color: var(--color-2);
            -webkit-transform: translatex(calc(var(--container-size) - (var(--box-size) * 1.25)));
            transform: translatex(calc(var(--container-size) - (var(--box-size) * 1.25)));
        }
    }
    @-webkit-keyframes color-change {
        0% {
            background-color: var(--color-1);
        }
        100% {
            background-color: var(--color-2);
        }
    }
    @keyframes color-change {
        0% {
            background-color: var(--color-1);
        }
        100% {
            background-color: var(--color-2);
        }
    }
    @-webkit-keyframes flip-1 {
        0%, 15% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
        35%, 100% {
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }
    }
    @keyframes flip-1 {
        0%, 15% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
        35%, 100% {
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }
    }
    @-webkit-keyframes squidge-1 {
        5% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        15% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
        25%, 20% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(0.8) scaley(1.4);
            transform: scalex(0.8) scaley(1.4);
        }
        55%, 100% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        40% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
    }
    @keyframes squidge-1 {
        5% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        15% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
        25%, 20% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(0.8) scaley(1.4);
            transform: scalex(0.8) scaley(1.4);
        }
        55%, 100% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        40% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
    }
    @-webkit-keyframes flip-2 {
        0%, 30% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
        50%, 100% {
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }
    }
    @keyframes flip-2 {
        0%, 30% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
        50%, 100% {
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }
    }
    @-webkit-keyframes squidge-2 {
        20% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        30% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
        40%, 35% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(0.8) scaley(1.4);
            transform: scalex(0.8) scaley(1.4);
        }
        70%, 100% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        55% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
    }
    @keyframes squidge-2 {
        20% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        30% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
        40%, 35% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(0.8) scaley(1.4);
            transform: scalex(0.8) scaley(1.4);
        }
        70%, 100% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        55% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
    }
    @-webkit-keyframes flip-3 {
        0%, 45% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
        65%, 100% {
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }
    }
    @keyframes flip-3 {
        0%, 45% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
        65%, 100% {
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }
    }
    @-webkit-keyframes squidge-3 {
        35% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        45% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
        55%, 50% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(0.8) scaley(1.4);
            transform: scalex(0.8) scaley(1.4);
        }
        85%, 100% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        70% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
    }
    @keyframes squidge-3 {
        35% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        45% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
        55%, 50% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(0.8) scaley(1.4);
            transform: scalex(0.8) scaley(1.4);
        }
        85%, 100% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        70% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
    }
    @-webkit-keyframes flip-4 {
        0%, 60% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
        80%, 100% {
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }
    }
    @keyframes flip-4 {
        0%, 60% {
            -webkit-transform: rotate(0);
            transform: rotate(0);
        }
        80%, 100% {
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }
    }
    @-webkit-keyframes squidge-4 {
        50% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        60% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
        70%, 65% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(0.8) scaley(1.4);
            transform: scalex(0.8) scaley(1.4);
        }
        100%, 100% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        85% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
    }
    @keyframes squidge-4 {
        50% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        60% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
        70%, 65% {
            -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
            -webkit-transform: scalex(0.8) scaley(1.4);
            transform: scalex(0.8) scaley(1.4);
        }
        100%, 100% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1) scaley(1);
            transform: scalex(1) scaley(1);
        }
        85% {
            -webkit-transform-origin: center top;
            transform-origin: center top;
            -webkit-transform: scalex(1.3) scaley(0.7);
            transform: scalex(1.3) scaley(0.7);
        }
    }


    .we-no-result {
        text-align: center;
        padding: 10px;
        width: 100%;
    }
    .we-no-result img {
        width: 300px;
        border-radius: 150px;
    }
    .we-no-result .Fa {
        font-size: 18px;
    }

    .we-no-result .En {
        direction: ltr;
        font-size: 12px;
        letter-spacing: 5px;
        text-transform: uppercase;
    }
</style>
