@use '@justeat/fozzie/src/scss/fozzie' as f;

$skeleton-loader-heading-height        : f.spacing(f);
$skeleton-loader-text-height           : f.spacing(d);
$skeleton-loader-bone-background-color : f.$color-skeleton-02;
$skeleton-loader-image-height          : f.spacing(i);

@keyframes loading {
    100% {
        transform: translateX(100%);
    }
}

.c-text,
.c-image,
.c-heading {
    background-color: $skeleton-loader-bone-background-color;
    overflow: hidden;
    position: relative;
    vertical-align: top;

    &:after {
        background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3), hsla(0, 0%, 100%, 0));
        animation: loading 1.5s infinite;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        transform: translateX(-100%);
        z-index: 1;
    }
}

