.tessa-loader {
  display: inline-block;
  width: var(--tessa-size, 50px);
  aspect-ratio: 190 / 200;
  overflow: hidden;
  background-image: url("/client/public/img/icons/tessa-iso_run_right-trimmed.png");
  background-repeat: no-repeat;
  background-size: 673.684211% auto;
  animation: tessa-run-cycle var(--tessa-speed, 1250ms) step-end infinite;
  vertical-align: middle;
}

.tessa-loader-walk {
  aspect-ratio: 110 / 210;
  background-image: url("/client/public/img/icons/tessa-iso_walk_right-trimmed.png");
  background-size: 1163.636364% auto;
  animation-name: tessa-walk;
}

@keyframes tessa-run-cycle {
  0%      { background-position: 3.4954%  3.7015%; }
  6.25%   { background-position: 26.9266% 3.7015%; }
  12.5%   { background-position: 50.4312% 3.7015%; }
  18.75%  { background-position: 73.9450% 3.7015%; }
  25%     { background-position: 97.4037% 3.7015%; }
  31.25%  { background-position: 3.4404%  34.7694%; }
  37.5%   { background-position: 26.9725% 34.7694%; }
  43.75%  { background-position: 50.4312% 34.7694%; }
  50%     { background-position: 73.9541% 34.7694%; }
  56.25%  { background-position: 97.4954% 34.7694%; }
  62.5%   { background-position: 3.4771%  65.8374%; }
  68.75%  { background-position: 26.9725% 65.8374%; }
  75%     { background-position: 50.4954% 65.8374%; }
  81.25%  { background-position: 73.9541% 65.8374%; }
  87.5%   { background-position: 97.3670% 65.8374%; }
  93.75%  { background-position: 3.4954%  97.2694%; }
  100%    { background-position: 3.4954%  3.7015%; }
}

@keyframes tessa-walk {
  0%       { background-position: 6.1368%  3.9427%; }
  8.3333%  { background-position: 27.9829% 3.9427%; }
  16.6667% { background-position: 49.8632% 3.9427%; }
  25%      { background-position: 71.7863% 3.9427%; }
  33.3333% { background-position: 93.7265% 3.9427%; }
  41.6667% { background-position: 6.2479%  49.8208%; }
  50%      { background-position: 28.0427% 49.8208%; }
  58.3333% { background-position: 49.8803% 49.8208%; }
  66.6667% { background-position: 71.7607% 49.8208%; }
  75%      { background-position: 93.6923% 49.8208%; }
  83.3333% { background-position: 6.2222%  95.6093%; }
  91.6667% { background-position: 28.0769% 95.6093%; }
  100%     { background-position: 6.1368%  3.9427%; }
}
