.signet-skeleton {
  background-color: #e0e0e0;
  border-radius: 4px;
}

.signet-skeleton-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-image: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
  background-size: 40px 100%;
  background-repeat: no-repeat;
  background-position: left -40px top 0;
  animation: wave 1s infinite ease-in-out;
}

.signet-skeleton-button {
  width: 80px;
  height: 15px;
  border-radius: 100px;
  background-image: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
  background-size: 80px 100%;
  background-repeat: no-repeat;
  background-position: left -80px top 0;
  animation: wave 1s ease infinite;
}

.signet-skeleton-paragraph {
  width: 200px;
  height: 15px;
  border-radius: 100px;
  background-image: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
  background-size: 80px 100%;
  background-repeat: no-repeat;
  background-position: left -80px top 0;
  animation: wave 1s ease infinite;
}

.signet-skeleton-basic {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.signet-skeleton-avatar {
  display: flex;
  gap: 5px;
}

.signet-skeleton-article {
  display: flex;
  gap: 5px;
}
.signet-skeleton-article .paragraphs {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.signet-skeleton-article .buttons {
  display: flex;
  gap: 5px;
}

@keyframes pulse {
  0% {
    background-color: #e0e0e0;
  }
  50% {
    background-color: #f5f5f5;
  }
  100% {
    background-color: #e0e0e0;
  }
}
@keyframes wave {
  to {
    background-position: right -40px top 0;
  }
}