@use "../../../styles/tokens/color";
@use "../../../styles/tools/convert";

@keyframes skeletonKeyframes {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 0.8;
  }

  70% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

$skeleton-base: (
  background-color: var(--color-surface-subtle),
  border-radius: convert.to-rem(5px),
);

$skeleton-overlay: (
  border-radius: convert.to-rem(5px),
  background-color: var(--color-surface-moderate),
  animation: 1.5s skeletonKeyframes linear infinite,
);