:root {
  --animate-duration: 1s;
}

sl-skeleton-chart {
  display: flex;
  align-items: end;
  justify-content: center;
}
sl-skeleton-chart .chart-bars {
  display: flex;
  align-items: end;
  gap: 16px;
  height: 100%;
  width: 100%;
}
sl-skeleton-chart .chart-bar {
  flex: 1;
}
sl-skeleton-chart.horizontal {
  align-items: center;
}
sl-skeleton-chart.horizontal .chart-bars {
  flex-direction: column;
  align-items: start;
  width: 100%;
}
sl-skeleton-chart.horizontal .chart-bar {
  width: auto;
  height: 1.5rem;
}
sl-skeleton-chart.pie {
  position: relative;
}
sl-skeleton-chart.pie .labels {
  position: absolute;
  width: 50%;
  top: 38%;
  left: 38%;
}
sl-skeleton-chart.pie .pie-skeleton {
  display: block;
  margin-top: 4px;
  padding-left: 13%;
}
sl-skeleton-chart.pie .animated .wave {
  transform-box: view-box;
  transform: translateX(-100%);
  animation: ske-wave 1.4s linear infinite;
}
@keyframes ske-wave {
  to {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  sl-skeleton-chart.pie .animated .wave {
    animation: none !important;
  }
}