@keyframes fade-in{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

@keyframes slide-left{
  from{
    transform:translateX(120%);
  }
  to{
    transform:translateX(0);
  }
}

@keyframes slide-right{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(120%);
  }
}

@keyframes slide-down{
  from{
    transform:translateY(0);
  }
  to{
    transform:translateY(120%);
  }
}

@keyframes slide-up{
  from{
    transform:translateY(120%);
  }
  to{
    transform:translateY(0);
  }
}

@keyframes show-up{
  from{
    bottom:0;
  }
  to{
    bottom:15px;
  }
}

@keyframes fade-out{
  from{
    opacity:1;
  }
  to{
    opacity:0;
  }
}

@keyframes vanish{
  from{
    bottom:15px;
  }
  to{
    bottom:0;
  }
}

@keyframes linear-indeterminate{
  0%{
    transform:translateX(-100%);
  }
  60%{
    transform:translateX(105%);
  }
  100%{
    transform:translateX(105%);
  }
}

@keyframes circle-indeterminate{
  0%{
    stroke-dashoffset:400;
    transform:rotate(-0.25turn);
  }
  50%{
    transform:rotate(0.75turn);
    stroke-dashoffset:0;
  }
  100%{
    stroke-dashoffset:400;
    transform:rotate(2.75turn);
  }
}

@keyframes circle-indeterminate-small{
  0%{
    stroke-dashoffset:200;
    transform:rotate(-0.25turn);
  }
  50%{
    transform:rotate(0.75turn);
    stroke-dashoffset:0;
  }
  100%{
    stroke-dashoffset:200;
    transform:rotate(2.75turn);
  }
}

@keyframes shimmer{
  from{
    transform:translateX(-100%);
  }
  to{
    transform:translateX(100%);
  }
}

.vtmn-skeleton{
  display:inline-block;
  block-size:0.0625rem;
  position:relative;
  overflow:hidden;
  background-color:hsl(210, 14.3%, 94.5%);
}

.vtmn-skeleton::after{
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background-image:linear-gradient(
    90deg,
    hsl(
        0
          0%
          100% / 0%
      )
      0,
    hsl(
        0
          0%
          100% / 30%
      )
      10%,
    hsl(
        0
          0%
          100% / 60%
      )
      40%,
    hsl(
        0
          0%
          100% / 60%
      )
      60%,
    hsl(
        0
          0%
          100% / 30%
      )
      90%,
    hsl(
      0
        0%
        100% / 0%
    )
  );
  animation:shimmer 1.5s ease-in-out infinite;
  content:'';
}

.vtmn-skeleton_line{
  block-size:0.5rem;
  border-radius:8px;
}

.vtmn-skeleton_avatar{
  inline-size:2rem;
  block-size:100%;
  aspect-ratio:1;
  border-radius:50%;
}