// core
.p-skeleton {
    overflow: hidden;
}

.p-skeleton::after {
    content: '';
    animation: p-skeleton-animation 1.2s infinite;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: translateX(-100%);
    z-index: 1;
}

.p-skeleton.p-skeleton-circle {
    border-radius: 50%;
}

.p-skeleton-none::after {
    animation: none;
}

@keyframes p-skeleton-animation {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(100%);
    }
}

// theme
.p-skeleton {
    background-color: $skeletonBg;
    border-radius: $borderRadius;

    &:after {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), $skeletonAnimationBg, rgba(255, 255, 255, 0));
    }
}