@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

.skeleton-demo-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
}

.skeleton-demo-col {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  min-width:      0;
}

.skeleton-demo-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  width:          100%;
  max-width:      20rem;
  padding:        var(--surface-padding-sm);
  border:         var(--surface-border-width) solid var(--surface-border);
  border-radius:  var(--radius-surface);
  background:     var(--surface-bg);
}

.skeleton-demo-media {
  aspect-ratio: 16 / 9;
  width:        100%;
  height:       auto;
}

.skeleton-demo-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  width:          100%;
  max-width:      20rem;
}

.skeleton-demo-table {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  width:          100%;
  max-width:      28rem;
}

.skeleton-demo-table > div {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:                   var(--space-4);
}

.skeleton-demo-text {
  display:   grid;
  gap:       var(--space-4);
  width:     100%;
  max-width: 28rem;
  font-size: var(--text-body);
}

.skeleton-demo-avatar {
  display:         grid;
  place-items:     center;
  width:           var(--space-12);
  height:          var(--space-12);
  border-radius:   var(--radius-full);
  background:      var(--accent-soft);
  color:           var(--accent-deep);
  font-weight:     var(--weight-strong);
}

.skeleton-demo-name {
  margin:      0;
  font-size:   var(--text-ui);
  font-weight: var(--weight-strong);
}

.skeleton-demo-meta {
  margin:    0;
  color:     var(--ink-dim);
  font-size: var(--text-caption);
}

.skeleton-demo-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--space-4);
  width:          100%;
  max-width:      24rem;
}

.skeleton-demo-sentence {
  margin:    0;
  font-size: var(--text-body);
}

.skeleton-demo-measure {
  max-width: 32rem;
}