.tu-skeleton__line {
  width: 100%;
}
.tu-skeleton__line-row {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tu-skeleton__line-row-item {
  height: 16px;
  background: var(--tu-color-base-bg, rgba(128, 128, 128, 0.22));
  margin-top: 15px;
}

.tu-skeleton__shape {
  background: var(--tu-color-base-bg, rgba(128, 128, 128, 0.22));
  border-radius: var(--tu-border-radius, 2px);
}

.tu-skeleton.is-animation .tu-skeleton__line-row-item {
  background: linear-gradient(90deg, var(--tu-color-line, rgba(128, 128, 128, 0.18)) 25%, var(--tu-color-hover-bg, rgba(125, 125, 125, 0.1)) 37%, var(--tu-color-line, rgba(128, 128, 128, 0.18)) 63%);
  background-size: 400% 100% !important;
  animation: tu-skeleton-circle 2.5s ease-in-out infinite;
}

.tu-skeleton.is-animation .tu-skeleton__shape {
  background: linear-gradient(90deg, var(--tu-color-line, rgba(128, 128, 128, 0.18)) 25%, var(--tu-color-hover-bg, rgba(125, 125, 125, 0.1)) 37%, var(--tu-color-line, rgba(128, 128, 128, 0.18)) 63%);
  background-size: 400% 100% !important;
  animation: tu-skeleton-circle 2.5s ease-in-out infinite;
}

.tu-skeleton--mini .tu-skeleton__shape {
  width: 24px;
  height: 24px;
}

.tu-skeleton--small .tu-skeleton__shape {
  width: 28px;
  height: 28px;
}

.tu-skeleton--medium .tu-skeleton__shape {
  width: 32px;
  height: 32px;
}

.tu-skeleton--large .tu-skeleton__shape {
  width: 36px;
  height: 36px;
}

@keyframes tu-skeleton-circle {
  0% {
    background-position: 200% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}