.mess-loading{display:grid;gap:.25em;grid-template-columns:1fr 1fr;margin:0 auto;width:-moz-max-content;width:max-content;--color-1:currentColor;--color-2:currentColor;--color-3:currentColor}.mess-loading span{aspect-ratio:1;display:block;width:1em;--offset: calc(100% + .25em) ;--offset-inverted: calc(-100% - .25em) }.mess-loading span[data-index="1"]{animation:loading 2s infinite;animation-delay:.125s;background:var(--color-1);--x-1:0;--y-1:0;--x-2:var(--offset);--y-2:0;--x-3:var(--offset);--y-3:var(--offset);--x-4:0;--y-4:var(--offset)}.mess-loading span[data-index="2"]{animation:loading 2s infinite;background:var(--color-2);--x-1:0;--y-1:0;--x-2:0;--y-2:var(--offset);--x-3:var(--offset-inverted);--y-3:var(--offset);--x-4:var(--offset-inverted);--y-4:0}.mess-loading span[data-index="3"]{animation:loading 2s infinite;animation-delay:.25s;background:var(--color-3);--x-1:0;--y-1:0;--x-2:0;--y-2:var(--offset-inverted);--x-3:var(--offset);--y-3:var(--offset-inverted);--x-4:var(--offset);--y-4:0}@keyframes loading{0%{transform:translate(var(--x-1),var(--y-1))}12.5%{transform:translate(var(--x-2),var(--y-2))}25%{transform:translate(var(--x-2),var(--y-2))}37.5%{transform:translate(var(--x-3),var(--y-3))}50%{transform:translate(var(--x-3),var(--y-3))}62.5%{transform:translate(var(--x-4),var(--y-4))}75%{transform:translate(var(--x-4),var(--y-4))}87.5%{transform:translate(var(--x-1),var(--y-1))}to{transform:translate(var(--x-1),var(--y-1))}}