leptonic-skeleton {
    --width: 100%;
    --height: initial;
    --el-width: 0; // Must be set dynamically using leptos.

    display: flex;
    background:
        linear-gradient(0.25turn, transparent, var(--skeleton-animation-highlight-color), transparent),
        linear-gradient(var(--skeleton-background-color), var(--skeleton-background-color));
    background-repeat: no-repeat;
    background-position: calc(var(--el-width) * -1) 0, 0 0;
    padding: var(--skeleton-padding);
    border-radius: var(--skeleton-border-radius);
    width: var(--width);
    height: var(--height);
    justify-content: center;
    align-items: center;
    cursor: var(--skeleton-cursor);

    &[data-animated] {
        animation: loading 1.5s infinite;
    }

    @keyframes loading {
        to {
            background-position: var(--el-width) 0, 0 0;
        }
    }
}