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

.tooltip-demo-toolbar {
  display:       inline-flex;
  gap:           var(--space-1);
  padding:       var(--space-1);
  border:        var(--control-border-width) solid var(--control-border);
  border-radius: var(--radius-control);
}

.tooltip-demo-track {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           min(100%, var(--container-md));
  height:          var(--space-16);
  border:          var(--control-border-width) dashed var(--control-border);
  border-radius:   var(--radius-surface);
  color:           var(--ink-dim);
  font-size:       var(--text-ui);
}

.tooltip-demo-track.is-area {
  height: var(--space-32);
}

.tooltip-demo-wrap {
  display:       inline-flex;
  border-radius: var(--radius-control);
}

.tooltip-demo-wrap:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.tooltip-demo-log {
  text-align: center;
}

.tooltip-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) {
  .tooltip-demo-rtl {
    display:               grid;
    grid-template-columns: 1fr;
    width:                 100%;
    gap:                   var(--space-3);
  }

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

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

.tooltip-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);
}

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

.tooltip-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);
}

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

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

.tooltip-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. */
.tooltip-demo-inset {
  display:         flex;
  justify-content: center;
  justify-self:    stretch;
}

/* Taller than the room above or below a short viewport. */
.tooltip-demo-tall {
  display:    block;
  min-height: var(--space-48);
}