@layer veneer.components{@media (prefers-reduced-motion:no-preference){:is(svg[data-act~=hover]:hover,:hover>svg[data-act~=hover],svg[data-act~=focus]:focus-visible,:focus-visible>svg[data-act~=focus],svg[data-act~=press]:active,:active>svg[data-act~=press],svg[data-act~=on]) [data-a=bell]{transform-box:view-box;transform-origin:12px 2px;animation:kerf-bell calc(.64s*var(--veneer-motion-scale,1)) ease-out}:is(svg[data-act~=hover]:hover,:hover>svg[data-act~=hover],svg[data-act~=focus]:focus-visible,:focus-visible>svg[data-act~=focus],svg[data-act~=press]:active,:active>svg[data-act~=press],svg[data-act~=on]) [data-a=bell][data-t=v]{animation-name:kerf-bell-v;animation-timing-function:step-end}:is(svg[data-act~=hover]:hover,:hover>svg[data-act~=hover],svg[data-act~=focus]:focus-visible,:focus-visible>svg[data-act~=focus],svg[data-act~=press]:active,:active>svg[data-act~=press],svg[data-act~=on]) [data-a=check]{animation:kerf-check calc(.32s*var(--veneer-motion-scale,1)) ease-out}:is(svg[data-act~=hover]:hover,:hover>svg[data-act~=hover],svg[data-act~=focus]:focus-visible,:focus-visible>svg[data-act~=focus],svg[data-act~=press]:active,:active>svg[data-act~=press],svg[data-act~=on]) [data-a=check][data-t=v]{animation-name:kerf-check-v;animation-timing-function:steps(6,end)}}[data-a=check] path{stroke-dasharray:1}@media (prefers-reduced-motion:no-preference){:is(svg[data-act~=hover]:hover,:hover>svg[data-act~=hover],svg[data-act~=focus]:focus-visible,:focus-visible>svg[data-act~=focus],svg[data-act~=press]:active,:active>svg[data-act~=press],svg[data-act~=on]) [data-a=refresh]{transform-box:view-box;transform-origin:12px 12px;animation:kerf-refresh calc(.72s*var(--veneer-motion-scale,1)) ease-out}:is(svg[data-act~=hover]:hover,:hover>svg[data-act~=hover],svg[data-act~=focus]:focus-visible,:focus-visible>svg[data-act~=focus],svg[data-act~=press]:active,:active>svg[data-act~=press],svg[data-act~=on]) [data-a=refresh][data-t=v]{animation-name:kerf-refresh-v;animation-timing-function:steps(4,end)}svg[data-act~=on] [data-a=refresh]{animation-timing-function:linear;animation-iteration-count:infinite;animation-play-state:var(--veneer-loop-play,running)}svg[data-act~=on] [data-a=refresh][data-t=v]{animation-timing-function:steps(4,end)}:is(svg[data-act~=hover]:hover,:hover>svg[data-act~=hover],svg[data-act~=focus]:focus-visible,:focus-visible>svg[data-act~=focus],svg[data-act~=press]:active,:active>svg[data-act~=press],svg[data-act~=on]) [data-a=trash]{transform-box:view-box;transform-origin:3px 6px;animation:kerf-trash calc(.42s*var(--veneer-motion-scale,1)) ease-out}:is(svg[data-act~=hover]:hover,:hover>svg[data-act~=hover],svg[data-act~=focus]:focus-visible,:focus-visible>svg[data-act~=focus],svg[data-act~=press]:active,:active>svg[data-act~=press],svg[data-act~=on]) [data-a=trash][data-t=v]{animation-name:kerf-trash-v;animation-timing-function:step-end}}}@keyframes kerf-bell{0%,to{transform:none}20%{transform:rotate(14deg)}45%{transform:rotate(-11deg)}70%{transform:rotate(6deg)}}@keyframes kerf-bell-v{0%,to{transform:none}20%,60%{transform:translate(1.5px)}40%,80%{transform:translate(-1.5px)}}@keyframes kerf-check{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes kerf-check-v{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@keyframes kerf-refresh{to{transform:rotate(360deg)}}@keyframes kerf-refresh-v{to{transform:rotate(360deg)}}@keyframes kerf-trash{0%,to{transform:none}45%{transform:translateY(-1.5px)rotate(-7deg)}}@keyframes kerf-trash-v{0%,to{transform:none}25%,75%{transform:translateY(-1.5px)}}