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

.hover-card-demo-avatar {
  display:         inline-flex;
  flex:            none;
  align-items:     center;
  justify-content: center;
  width:           var(--space-10);
  height:          var(--space-10);
  border-radius:   var(--radius-pill);
  background:      var(--accent-soft);
  color:           var(--ink);
  font-family:     var(--font-ui);
  font-weight:     var(--weight-strong);
  font-size:       var(--text-ui);
}

.hover-card-demo-name {
  font-weight: var(--weight-strong);
}

.hover-card-demo-text {
  margin:    0;
  color:     var(--ink-soft);
  font-size: var(--text-ui);
}

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

.hover-card-demo-prose {
  margin:    0;
  max-width: var(--container-md);
  color:     var(--ink-soft);
}

.hover-card-demo-log {
  text-align: center;
}

.hover-card-demo-rtl {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             var(--space-3);
}

/* On a phone each trigger sits at the edge away from where it opens
   (inline-start opens to the right under rtl, so its trigger sits left). */
@media (max-width: 40rem) {
  .hover-card-demo-rtl {
    display:               grid;
    grid-template-columns: 1fr;
    width:                 100%;
    gap:                   var(--space-3);
  }

  .hover-card-demo-rtl .button {
    justify-self: start;
  }

  .hover-card-demo-rtl > :first-child .button {
    justify-self: end;
  }
}

.hover-card-demo-scroller {
  display:        grid;
  gap:            var(--space-3);
  justify-items:  start;
  align-content:  start;
  width:          100%;
  max-width:      var(--container-xs);
  height:         var(--space-24);
  padding:        var(--space-3);
  overflow-y:     auto;
  border:         var(--surface-border-width) solid var(--surface-border);
  border-radius:  var(--radius-surface);
}

.hover-card-demo-note {
  margin:         0;
  padding-bottom: var(--space-48);
  font-size:      var(--text-ui);
  color:          var(--ink-dim);
}

.hover-card-demo-anchor {
  display:       inline-flex;
  align-items:   center;
  padding:       var(--space-1) var(--space-3);
  border:        var(--control-border-width) dashed var(--control-border);
  border-radius: var(--radius-control);
  color:         var(--ink-dim);
  font-size:     var(--text-ui);
}

.hover-card-demo-column {
  display:       grid;
  justify-items: start;
  gap:           var(--space-3);
  width:         100%;
}

.hover-card-demo-list {
  display:    grid;
  gap:        var(--space-1);
  margin:     0;
  padding:    0;
  list-style: none;
  font-size:  var(--text-ui);
}

.hover-card-demo-row {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-3);
}

.hover-card-demo-boundary {
  display:         flex;
  justify-content: flex-end;
  width:           100%;
  max-width:       var(--container-xs);
  padding:         var(--space-3);
  border:          var(--surface-border-width) dashed var(--surface-border);
  border-radius:   var(--radius-surface);
}

/* The fallbackAxisSide demo sits in the middle, so either inline side has room. */
.hover-card-demo-inset {
  display:         flex;
  justify-content: center;
  justify-self:    stretch;
}

/* Taller than the room above or below a short viewport. */
.hover-card-demo-list.is-tall {
  min-height:    var(--space-48);
  align-content: start;
}