@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))); 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() { & { --_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)); @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); }}