@property --shimmer-track-height{syntax:"<length>";inherits:true;initial-value:200px}@property --shimmer-angle{syntax:"<angle>";inherits:true;initial-value:15deg}@theme inline{@keyframes tw-shimmer { from { background-position: 100% 0; }}}@utility shimmer{--_gradient-width: calc(var(--_spread) + var(--shimmer-track-height)*tan(var(--shimmer-angle))); --_active-distance: calc(var(--shimmer-track-width,200px) + var(--_gradient-width)); --_duration: var(--shimmer-duration,calc(var(--_active-distance)/var(--_speed)/1px*1000)); --_repeat-delay: var(--shimmer-repeat-delay,calc(20000/var(--_speed))); --_repeat-delay-px: calc(var(--_repeat-delay)*var(--_active-distance)/var(--_duration)); --_xy-offset-px: calc((var(--shimmer-x,0) + var(--shimmer-y,0)*tan(var(--shimmer-angle)))*1px); --_bg-width: calc(100% + var(--shimmer-track-width,100%) + var(--_gradient-width) + var(--_repeat-delay-px)); --_position: calc(var(--shimmer-track-width,(100% - var(--_gradient-width) - var(--_repeat-delay-px))/2) + var(--_gradient-width)/2 + var(--_repeat-delay-px) - var(--_xy-offset-px));&:not(.shimmer-bg){ --_speed: var(--shimmer-speed,200); --_spread: var(--shimmer-spread,calc(4ch + 80px)); --_bg: currentColor; --_fg: var(--shimmer-color,oklch(from currentColor l c h/calc(alpha*.2))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }@variant dark {&:not(.shimmer-bg){ --_fg: var(--shimmer-color,oklch(from currentColor max(.8,calc(l + .4))c h/calc(alpha + .4))); }}@-moz-document url-prefix(){&:not(.shimmer-bg){ --_duration: var(--shimmer-duration,calc(375000/var(--_speed))); }}--_mix-96: color-mix(in oklch,var(--_fg),var(--_bg)96%); --_mix-83: color-mix(in oklch,var(--_fg),var(--_bg)83%); --_mix-67: color-mix(in oklch,var(--_fg),var(--_bg)67%); --_mix-50: color-mix(in oklch,var(--_fg),var(--_bg)50%); --_mix-33: color-mix(in oklch,var(--_fg),var(--_bg)33%); --_mix-17: color-mix(in oklch,var(--_fg),var(--_bg)17%); --_mix-4: color-mix(in oklch,var(--_fg),var(--_bg)4%); background: linear-gradient(calc(90deg + var(--shimmer-angle)),var(--_bg)calc(var(--_position) - var(--_spread)*.5),var(--_mix-96)calc(var(--_position) - var(--_spread)*.44),var(--_mix-83)calc(var(--_position) - var(--_spread)*.37),var(--_mix-67)calc(var(--_position) - var(--_spread)*.31),var(--_mix-50)calc(var(--_position) - var(--_spread)*.25),var(--_mix-33)calc(var(--_position) - var(--_spread)*.19),var(--_mix-17)calc(var(--_position) - var(--_spread)*.12),var(--_mix-4)calc(var(--_position) - var(--_spread)*.06),var(--_fg)var(--_position),var(--_mix-4)calc(var(--_position) + var(--_spread)*.06),var(--_mix-17)calc(var(--_position) + var(--_spread)*.12),var(--_mix-33)calc(var(--_position) + var(--_spread)*.19),var(--_mix-50)calc(var(--_position) + var(--_spread)*.25),var(--_mix-67)calc(var(--_position) + var(--_spread)*.31),var(--_mix-83)calc(var(--_position) + var(--_spread)*.37),var(--_mix-96)calc(var(--_position) + var(--_spread)*.44),var(--_bg)calc(var(--_position) + var(--_spread)*.5))0 0/var(--_bg-width)100% no-repeat; animation: tw-shimmer 1s linear 0s infinite backwards; animation-duration: calc((var(--_duration) + var(--_repeat-delay))*1ms);}@utility shimmer-bg{--_speed: var(--shimmer-speed,1000); --_spread: var(--shimmer-spread,480px); --_bg: transparent; --_fg: var(--shimmer-color,oklch(from currentColor 0 c h/.06)); @-moz-document url-prefix(){&.shimmer { --_duration: var(--shimmer-duration,calc(1500000/var(--_speed))); }}@variant dark { --_fg: var(--shimmer-color,oklch(from currentColor 0 c h/.3)); }}@utility shimmer-speed-*{--shimmer-speed: --value(number);}@utility shimmer-duration-*{--shimmer-duration: --value(integer);}@utility shimmer-repeat-delay-*{--shimmer-repeat-delay: --value(integer);}@utility shimmer-invert{&:not(.shimmer-bg){ --shimmer-color: oklch(from currentColor min(calc(l - .4),.2)c h/calc(alpha + .4)); @variant dark { --shimmer-color: oklch(from currentColor l c h/calc(alpha*.2)); }}}@utility shimmer-color-*{--alpha: 100%; --alpha: calc(--modifier(integer)*1%); --shimmer-color: --alpha(--value(--color,[color])/var(--alpha,100%));}@utility shimmer-spread-*{--shimmer-spread: calc(--value(integer)*1px);}@utility shimmer-angle-*{--shimmer-angle: calc(--value(integer)*1deg);}@utility shimmer-container{container-type: inline-size;&.shimmer { --shimmer-track-width: 100cqw; --shimmer-track-height: max(100cqh,50cqw,200px); }}