:root {
  --aunt-skeleton-avatar-size: calc(32 * var(--aunt-hd));
  --aunt-skeleton-avatar-background-color: var(--aunt-active-color);
  --aunt-skeleton-border-radius: var(--aunt-border-radius-m);
  --aunt-skeleton-title-width: 40%;
  --aunt-skeleton-row-height: calc(16 * var(--aunt-hd));
  --aunt-skeleton-row-background-color: var(--aunt-active-color);
  --aunt-skeleton-row-margin-top: var(--aunt-padding-sm);
  --aunt-skeleton-animation-duration: 1.2s;
}
.aunt-skeleton {
  display: flex;
}
.aunt-skeleton__avatar {
  flex-shrink: 0;
  width: var(--aunt-skeleton-avatar-size);
  height: var(--aunt-skeleton-avatar-size);
  margin-right: var(--aunt-padding-md);
  background-color: var(--aunt-skeleton-avatar-background-color);
}
.aunt-skeleton__content {
  width: 100%;
}
.aunt-skeleton__title {
  width: var(--aunt-skeleton-title-width);
  margin: 0;
}
.aunt-skeleton__row,
.aunt-skeleton__title {
  height: var(--aunt-skeleton-row-height);
  background-color: var(--aunt-skeleton-row-background-color);
}
.aunt-skeleton__row:not(:first-child) {
  margin-top: calc(10 * var(--aunt-hd));
}
.aunt-skeleton--animate {
  animation: aunt-skeleton-blink var(--aunt-skeleton-animation-duration) ease-in-out infinite;
}
.aunt-skeleton--square {
  border-radius: var(--aunt-skeleton-border-radius);
}
.aunt-skeleton--round {
  border-radius: var(--aunt-border-radius-max);
}
@keyframes aunt-skeleton-blink {
  50% {
    opacity: 0.6;
  }
}