@keyframes shimmer {
  from {
    background-position: -200% center;
  }
  to {
    background-position: 200% center;
  }
}

.skeleton {
  background-color: var(--bg-inset);
  display: block;
}

.shimmer {
  background-image: linear-gradient(
    90deg,
    var(--bg-inset) 25%,
    color-mix(in srgb, var(--bg-inset) 60%, transparent) 50%,
    var(--bg-inset) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

.text {
  height: 12px;
  border-radius: 4px;
  width: 100%;
}

.textGroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.circular {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.rectangular {
  border-radius: var(--radius-sm);
  width: 100%;
  height: 80px;
}
