/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.wp-afterbuy-widget-item:empty {

    width: 100%;
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 80%),
    linear-gradient(#eeeeee 130px, transparent 0),
    linear-gradient(#eeeeee 15px, transparent 0),
    linear-gradient(#eeeeee 15px, transparent 0),
    linear-gradient(#eeeeee 35px, transparent 0),
    linear-gradient(#eeeeee 15px, transparent 0);

    background-repeat: no-repeat;

    background-size: 50px 100%, /* highlight */
    calc(100% - 50px) 200px,
    calc(100% - 50px) 200px,
    calc(100% - 75px) 200px,
    calc(100% - 150px) 200px,
    calc(100% - 100px) 200px;

    background-position: 0 0, /* highlight */
    25px 25px,
    25px 179px,
    25px 196px,
    25px 283px,
    25px 330px;

    animation: shine 2s infinite;
}

@keyframes shine {
    to {
        background-position: 200% 0, /* move highlight to right */
        25px 25px,
        25px 179px,
        25px 196px,
        25px 283px,
        25px 330px;
    }
}