.skeleton {
    container-name: skeleton-container;
    container-type: inline-size;
    cursor: progress;
    width: 100%;
}

.skeleton__avatar,
.skeleton__button,
.skeleton__image,
.skeleton__text,
.skeleton__textbox {
    background: var(--skeleton-background, var(--color-loading-fill));
    width: 100%;
}
.skeleton__avatar {
    border-radius: var(--avatar-border-radius, 50%);
    height: 48px;
    width: 48px;
}

.skeleton__button {
    border-radius: var(--btn-border-radius, 20px);
    height: 40px;
}

.skeleton__button--small {
    border-radius: var(--btn-border-radius, 16px);
    height: 32px;
}

.skeleton__button--large {
    border-radius: var(--btn-border-radius, 24px);
    height: 48px;
}

.skeleton__text {
    border-radius: var(--text-border-radius, 3px);
    height: 16px;
    width: calc(100% - var(--spacing-300));
}

.skeleton__text:after {
    height: 16px;
    margin-top: calc(16px + var(--spacing-100));
}

.skeleton__text--large {
    height: 24px;
}

.skeleton__text--large:after {
    height: 24px;
    margin-top: calc(24px + var(--spacing-100));
}

.skeleton__text--multiline {
    margin-bottom: var(--spacing-300);
    position: relative;
    width: calc(100% - var(--spacing-300));
}

.skeleton__text--multiline:after {
    background: inherit;
    content: "";
    position: absolute;
    width: calc(100% - var(--spacing-700));
}

.skeleton__text--large.skeleton__text--multiline {
    margin-bottom: var(--spacing-400);
}

.skeleton__textbox {
    border-radius: var(--textbox-border-radius, var(--border-radius-50));
    height: 48px;
}

.skeleton__image {
    border-radius: var(--image-border-radius, var(--border-radius-50));
    height: 100%;
    max-width: none;
}
.skeleton__image:after {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}

span.skeleton__avatar,
span.skeleton__button,
span.skeleton__image,
span.skeleton__text,
span.skeleton__textbox {
    display: inline-block;
}

span.skeleton__avatar:not(:last-child),
span.skeleton__button:not(:last-child),
span.skeleton__image:not(:last-child),
span.skeleton__text:not(:last-child),
span.skeleton__textbox:not(:last-child) {
    margin-inline-end: var(--spacing-100);
}

div.skeleton__avatar:not(:last-child),
div.skeleton__button:not(:last-child),
div.skeleton__image:not(:last-child),
div.skeleton__text:not(:last-child),
div.skeleton__textbox:not(:last-child) {
    margin-block-end: var(--spacing-150);
}

.skeleton--on-secondary {
    --skeleton-background: var(--color-loading-fill-on-secondary);
}

@media screen and (max-width: 512px) {
    .skeleton {
        --skeleton-background: var(--color-loading-shimmer);
    }
    .skeleton--on-secondary {
        --skeleton-background: var(--color-loading-shimmer-on-secondary);
    }
}
.skeleton--purple {
    --skeleton-background: var(--color-loading-ai-gradient-purple-subtle);
}

.skeleton--green {
    --skeleton-background: var(--color-loading-ai-gradient-green-subtle);
}

.skeleton--blue {
    --skeleton-background: var(--color-loading-ai-gradient-blue-subtle);
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes loading-frames {
        0% {
            background-position: 0 0;
        }
        50% {
            background-position: 45% 0;
        }
        to {
            background-position: 90% 0;
        }
    }
    @keyframes fade-in {
        0% {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    .skeleton__avatar,
    .skeleton__button,
    .skeleton__image,
    .skeleton__text,
    .skeleton__textbox {
        animation:
            fade-in 0.5s forwards,
            loading-frames 833ms linear 667ms 6;
        animation-fill-mode: both;
        background-size: 200%;
    }
}
@container skeleton-container (width > 79px) {
    .skeleton__image {
        border-radius: var(--image-border-radius, var(--border-radius-100));
    }
}
[dir="rtl"] .skeleton__avatar,
[dir="rtl"] .skeleton__button,
[dir="rtl"] .skeleton__image,
[dir="rtl"] .skeleton__text,
[dir="rtl"] .skeleton__textbox {
    animation-direction: normal, reverse;
}
[dir="rtl"] .skeleton__text--multiline:after {
    left: var(--spacing-700);
}