commerce/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss

@import '../../../../styles/utilities';

.skeletonParagraph {
    @apply overflow-hidden;
    margin: 0 1.6rem;

    .row {
        display: inline-block;
        height: 2rem;
        width: 100%;
        position: relative;
        overflow: hidden;
        background-color: #DDDBDD;
      
        &::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transform: translateX(-100%);
            background-image: linear-gradient(
                90deg,
                rgba(#fff, 0) 0,
                rgba(#fff, 0.2) 20%,
                rgba(#fff, 0.5) 60%,
                rgba(#fff, 0)
            );
            animation: shimmer 2s infinite;
            content: '';
        }
    }
    
    .lastRow {
        display: inline-block;
        height: 2rem;
        width: 80%;
        position: relative;
        overflow: hidden;
        background-color: #DDDBDD;
      
        &::after {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            transform: translateX(-100%);
            background-image: linear-gradient(
                90deg,
                rgba(#fff, 0) 0,
                rgba(#fff, 0.2) 20%,
                rgba(#fff, 0.5) 60%,
                rgba(#fff, 0)
            );
            animation: shimmer 2s infinite;
            content: '';
        }
    }
}

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