@keyframes tf-load-wave{to{background-position:-200% 0}}

html.tf-content-loading .tf-load-text,
html.tf-content-loading .tf-load-media,
html.tf-content-loading .tf-load-pill{
    color:transparent!important;
    text-shadow:none!important;
    border-color:transparent!important;
    background-color:hsl(var(--muted))!important;
    background-image:linear-gradient(100deg,transparent 25%,hsl(var(--background)/.55) 45%,transparent 65%)!important;
    background-size:200% 100%!important;
    animation:tf-load-wave 1.05s linear infinite!important;
    box-shadow:none!important;
    caret-color:transparent!important;
}
html.tf-content-loading .tf-load-text{border-radius:.3rem!important}
html.tf-content-loading .tf-load-pill{border-radius:9999px!important}
html.tf-content-loading .tf-load-media{border-radius:inherit!important;object-position:-9999px -9999px!important}
html.tf-content-loading .tf-load-text>svg,
html.tf-content-loading .tf-load-pill>svg,
html.tf-content-loading .tf-load-media>*{visibility:hidden!important}
html.tf-content-loading .tf-load-table{position:relative;overflow:hidden;min-height:9rem}
html.tf-content-loading .tf-load-table>*{visibility:hidden!important}
html.tf-content-loading .tf-load-table:after{
    content:"";position:absolute;inset:.75rem;border-radius:.35rem;
    background:repeating-linear-gradient(to bottom,hsl(var(--muted)) 0 .7rem,transparent .7rem 2rem),linear-gradient(100deg,transparent 25%,hsl(var(--background)/.55) 45%,transparent 65%);
    background-size:100% 100%,200% 100%;animation:tf-load-wave 1.05s linear infinite
}
@media(prefers-reduced-motion:reduce){
    html.tf-content-loading .tf-load-text,
    html.tf-content-loading .tf-load-media,
    html.tf-content-loading .tf-load-pill,
    html.tf-content-loading .tf-load-table:after{animation:none!important;background-image:none!important}
}