.fi-async-column-skeleton {
    display: inline-block;
    min-width: 4rem;
    height: 0.875rem;
    border-radius: 0.25rem;
    background: linear-gradient(90deg, rgb(0 0 0 / 6%) 25%, rgb(0 0 0 / 12%) 37%, rgb(0 0 0 / 6%) 63%);
    background-size: 400% 100%;
    animation: fi-async-column-shimmer 1.4s ease infinite;
}

.dark .fi-async-column-skeleton {
    background: linear-gradient(90deg, rgb(255 255 255 / 8%) 25%, rgb(255 255 255 / 16%) 37%, rgb(255 255 255 / 8%) 63%);
    background-size: 400% 100%;
}

@keyframes fi-async-column-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/*
 * The color every non-skeleton loader draws with: neutral by default, or the
 * Filament palette color when ->loaderColor() adds fi-color fi-color-{name}
 * (Filament's own utility class, which defines --color-50 ... --color-950).
 */
.fi-async-column-spinner,
.fi-async-column-dots,
.fi-async-column-bar {
    --fi-async-column-loader-color: rgb(0 0 0 / 40%);
}

.dark :is(.fi-async-column-spinner, .fi-async-column-dots, .fi-async-column-bar) {
    --fi-async-column-loader-color: rgb(255 255 255 / 50%);
}

:is(.fi-async-column-skeleton, .fi-async-column-spinner, .fi-async-column-dots, .fi-async-column-bar).fi-color {
    --fi-async-column-loader-color: var(--color-500);
}

.dark :is(.fi-async-column-skeleton, .fi-async-column-spinner, .fi-async-column-dots, .fi-async-column-bar).fi-color {
    --fi-async-column-loader-color: var(--color-400);
}

/* After the .dark rule above, which it must override when both match. */
.fi-async-column-skeleton.fi-color {
    background-image: linear-gradient(
        90deg,
        color-mix(in oklab, var(--fi-async-column-loader-color) 15%, transparent) 25%,
        color-mix(in oklab, var(--fi-async-column-loader-color) 30%, transparent) 37%,
        color-mix(in oklab, var(--fi-async-column-loader-color) 15%, transparent) 63%
    );
}

.fi-async-column-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    border: 2px solid color-mix(in oklab, var(--fi-async-column-loader-color) 25%, transparent);
    border-top-color: var(--fi-async-column-loader-color);
    border-radius: 9999px;
    animation: fi-async-column-spin 0.8s linear infinite;
}

@keyframes fi-async-column-spin {
    to { transform: rotate(360deg); }
}

.fi-async-column-dots {
    display: inline-flex;
    gap: 0.25rem;
    vertical-align: middle;
}

.fi-async-column-dots > span {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--fi-async-column-loader-color);
    opacity: 0.3;
    animation: fi-async-column-dot 1s ease-in-out infinite;
}

.fi-async-column-dots > span:nth-child(2) { animation-delay: 0.16s; }
.fi-async-column-dots > span:nth-child(3) { animation-delay: 0.32s; }

@keyframes fi-async-column-dot {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

.fi-async-column-bar {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 4rem;
    height: 0.25rem;
    vertical-align: middle;
    border-radius: 9999px;
    background: color-mix(in oklab, var(--fi-async-column-loader-color) 25%, transparent);
}

.fi-async-column-bar::after {
    content: '';
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 40%;
    border-radius: inherit;
    background: var(--fi-async-column-loader-color);
    animation: fi-async-column-slide 1.2s ease-in-out infinite;
}

@keyframes fi-async-column-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .fi-async-column-skeleton,
    .fi-async-column-spinner,
    .fi-async-column-bar::after { animation: none; }

    .fi-async-column-dots > span { animation: none; opacity: 0.6; }
}

[data-async-column-error="1"] .fi-async-column-retry {
    text-decoration: underline;
    cursor: pointer;
}