/* HTML: <div class="loader"></div> */
/* .loader { */
/*   width: 200px; */
/*   height: 28px; */
/*   --_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000); */
/*   background: */
/*     var(--_g) 50%  0, */
/*     var(--_g) 100% 0; */
/*   background-size: 12px 12px; */
/*   position: relative; */
/*   animation: l23-0 1.5s linear infinite; */
/* } */
/* .loader:before { */
/*   content: ""; */
/*   position: absolute; */
/*   height: 12px; */
/*   aspect-ratio: 1; */
/*   border-radius: 50%; */
/*   background: #000; */
/*   left:0; */
/*   top:0; */
/*   animation:  */
/*     l23-1 1.5s linear infinite, */
/*     l23-2 0.5s cubic-bezier(0,200,.8,200) infinite; */
/* } */
/* @keyframes l23-0 { */
/*   0%,31%  {background-position: 50% 0   ,100% 0} */
/*   33%     {background-position: 50% 100%,100% 0} */
/*   43%,64% {background-position: 50% 0   ,100% 0} */
/*   66%     {background-position: 50% 0   ,100% 100%} */
/*   79%     {background-position: 50% 0   ,100% 0} */
/*   100%    {transform:translateX(calc(-100%/3))} */
/* } */
/* @keyframes l23-1 { */
/*   100% {left:calc(100% + 7px)} */
/* } */
/* @keyframes l23-2 { */
/*   100% {top:-0.1px} */
/* } */

.loader {
  width: 60px;
  margin: 44px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#6ab023 0 0);
  background: var(--c), var(--c), var(--c);
  animation: 
    l18-1 1s infinite,
    l18-2 1s infinite;
}
@keyframes l18-1 {
 0%,100% {background-size:20% 100%}
 33%,66% {background-size:20% 20%}
}
@keyframes l18-2 {
 0%,33%   {background-position: 0    0,50% 50%,100% 100%}
 66%,100% {background-position: 100% 0,50% 50%,0    100%}
}

.disabled-preview {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}