@keyframes skeleton-loading {
    0% {
        background-color: var(--neutral-background-strong);
    }
    50% {
        background-color: var(--neutral-background-medium);
    }
    100% {
        background-color: var(--neutral-background-strong);
    }
}

.delay-1 {
    animation-delay: 0.1s;
}

.delay-2 {
    animation-delay: 0.2s;
}

.delay-3 {
    animation-delay: 0.3s;
}

.delay-4 {
    animation-delay: 0.4s;
}

.delay-5 {
    animation-delay: 0.5s;
}

.delay-6 {
    animation-delay: 0.6s;
}

.skeleton {
    animation-name: skeleton-loading;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    border-radius: var(--radius-l);

    &.block {
        width: 100%;
        height: 100%;
    }

    &.line {
        &.h-xs {
            height: var(--static-space-8);
        }
        &.h-s {
            height: var(--static-space-12);
        }
        &.h-m {
            height: var(--static-space-16);
        }
        &.h-l {
            height: var(--static-space-20);
        }
        &.h-xl {
            height: var(--static-space-24);
        }

        &.w-xs {
            width: 25%;
        }
        &.w-s {
            width: 33%;
        }
        &.w-m {
            width: 50%;
        }
        &.w-l {
            width: 75%;
        }
        &.w-xl {
            width: 100%;
        }
    }

    &.circle {
        border-radius: var(--radius-999);

        &.w-xs {
            width: var(--static-space-20);
            height: var(--static-space-20);
        }
        &.w-s {
            width: var(--static-space-24);
            height: var(--static-space-24);
        }
        &.w-m {
            width: var(--static-space-32);
            height: var(--static-space-32);
        }
        &.w-l {
            width: var(--static-space-40);
            height: var(--static-space-40);
        }
        &.w-xl {
            width: var(--static-space-160);
            height: var(--static-space-160);
        }
    }
}