.skeleton-placeholder {
  visibility: hidden;
}

.skeleton-placeholder.is-skeleton-visible {
  visibility: visible;
}

.skeleton-bar {
  display: inline-block;
  width: var(--skeleton-width, 8rem);
  height: 1em;
  border-radius: var(--radius-control);
  background: linear-gradient(100deg, color-mix(in oklch, var(--color-muted) 13%, transparent) 25%, color-mix(in oklch, var(--color-muted) 24%, transparent) 45%, color-mix(in oklch, var(--color-muted) 13%, transparent) 65%);
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.1s linear infinite;
}

.account-phone-skeleton {
  --skeleton-width: 9rem;
}

.account-name-skeleton {
  --skeleton-width: 7rem;
}

.account-index.is-account-loading :is(#display-name, .display-name-actions, .field-note, .account-danger-zone) {
  visibility: hidden;
}

.friends-skeleton-list {
  min-height: 9rem;
}

.friends-skeleton-list .skeleton-bar {
  width: min(80%, 12rem);
}

.friends-skeleton-list .friend-answer-guess .skeleton-bar {
  width: min(70%, 10rem);
}

@keyframes skeleton-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-bar {
    animation: none;
  }
}