/** Styles inspired by MUI's Skeleton component: https://mui.com/material-ui/react-skeleton/ **/

[data-skeleton-load]:not(:has(> *)),
[data-skeleton-load]:has(> *) > * {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 3px !important;
    mask-image: radial-gradient(white, black) !important;
}

[data-skeleton-load]:not(:has(> *))::before,
[data-skeleton-load]:has(> *) > *::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    background: var(--wp--preset--color--secondary-pearl, #efefef) !important;
    z-index: 1 !important;
}

[data-skeleton-load]:not(:has(> *))::after,
[data-skeleton-load]:has(> *) > *::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.04), transparent) !important;
    transform: translateX(-100%);
    animation: dp-skeleton-loader-animation 2s linear 0.5s infinite !important;
    z-index: 2 !important;
}

@keyframes dp-skeleton-loader-animation {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(100%);
    }
}