:root {
    --item-width: 210px;
    --item-height: 390px;
    --item-padding: 20px;
    --item-skeleton: linear-gradient(
        #fff var(--item-height),
        transparent 0
    );

    --picture-height: 175px;
    --picture-width: 120px;
    --picture-position: center var(--item-padding);
    --picture-skeleton: linear-gradient(
        #eee var(--picture-height),
        transparent 0
    );

    --title-height: 15px;
    --title-width: 85%;
    --title-position: center calc(var(--picture-height) + var(--title-height) + 15px);
    --title-skeleton: linear-gradient(
        #eee var(--title-height),
        transparent 0
    );

    --author-height: 15px;
    --author-width: 70%;
    --author-position: center calc(var(--picture-height) + var(--title-height) + var(--author-height) + (15px * 2));
    --author-skeleton: linear-gradient(
        #eee var(--title-height),
        transparent 0
    );

    --rating-height: 15px;
    --rating-width: 50%;
    --rating-position: center calc(var(--picture-height) + var(--title-height) + var(--author-height) + var(--rating-height) + (15px * 3));
    --rating-skeleton: linear-gradient(
        #eee var(--title-height),
        transparent 0
    );

    --type-height: 15px;
    --type-width: 30%;
    --type-position: center calc(var(--picture-height) + var(--title-height) + var(--author-height) + var(--rating-height) + var(--type-height) + (15px * 4));
    --type-skeleton: linear-gradient(
        #eee var(--title-height),
        transparent 0
    );

    --price-height: 15px;
    --price-width: 40%;
    --price-position: center calc(var(--picture-height) + var(--title-height) + var(--author-height) + var(--rating-height) + var(--type-height) + var(--price-height) + (15px * 5));
    --price-skeleton: linear-gradient(
        #eee var(--title-height),
        transparent 0
    );

    --blur-width: 150px;
    --blur-size: var(--blur-width) var(--item-height);
}

.skeleton-product-card {
    width: var(--item-width);
    height: var(--item-height);
}

.skeleton-product-card:empty::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;

    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255, 0),
            rgba(255,255,255,0.6),
            rgba(255,255,255, 0)
        ),
        var(--picture-skeleton),
        var(--title-skeleton),
        var(--author-skeleton),
        var(--rating-skeleton),
        var(--type-skeleton),
        var(--price-skeleton),
        var(--item-skeleton);
    ;
    background-size:
        var(--blur-size),
        var(--picture-width) var(--picture-height),
        var(--title-width) var(--title-height),
        var(--author-width) var(--author-height),
        var(--rating-width) var(--rating-height),
        var(--type-width) var(--type-height),
        var(--price-width) var(--price-height),
        100% 100%
    ;
    background-position:
        -150% 0,
        var(--picture-position),
        var(--title-position),
        var(--author-position),
        var(--rating-position),
        var(--type-position),
        var(--price-position),
        0 0
    ;
    background-repeat: no-repeat;
    animation: loadingProd 1.5s infinite;
}

@keyframes loadingProd {
    to {
        background-position:
            350% 0,
            var(--picture-position),
            var(--title-position),
            var(--author-position),
            var(--rating-position),
            var(--type-position),
            var(--price-position),
            0 0
        ;
    }
}


[v-cloak] {
  display: none;
}