@import "../styles/base/fn.wxss";

.@{wuxClassNamePrefix}-skeleton-paragraph {
    position: relative;
    overflow: hidden;

    &__row {
        height: 16px;
        background: #f2f2f2;
        width: 100%;
        margin-top: 16px;

        &:first-child {
            margin-top: 0;
        }

        &:nth-child(4n + 1) {
            width: 80%;
        }

        &:nth-child(4n + 2) {
            width: 100%;
        }

        &:nth-child(4n + 3) {
            width: 70%;
        }

        &:nth-child(4n + 4) {
            width: 85%;
        }
    }

    &--rounded &__row {
        border-radius: 4px;
    }

    &--active &__row {
        background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
        animation: loading 1.4s ease infinite;
        background-size: 400% 100%;
    }
}

@keyframes loading {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}