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

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

.toast-demo-options {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-2) var(--space-4);
  font-size:   var(--text-ui);
}

.toast-demo-options label {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-2);
}

.toast-demo-log {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  color:       var(--ink-dim);
  min-height:  1lh;
  overflow-wrap: anywhere;
}

.toast-demo-custom {
  font-size: var(--text-ui);
}

.toast-demo-headless {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  gap:            var(--space-1) var(--space-3);
  padding:        var(--space-3) var(--space-4);
  background:     var(--accent);
  color:          var(--accent-ink);
  border-radius:  var(--radius-overlay);
  box-shadow:     var(--overlay-shadow);
  font-size:      var(--text-ui);
}

.toast-demo-headless span {
  flex: 1 1 12rem;
}

/* Updates and data: pulse each time the toast is updated in place. */
.toast.pulse-on-update[data-updated] {
  animation: toast-demo-pulse var(--duration-enter) var(--ease-enter);
}

@keyframes toast-demo-pulse {
  50% { scale: 1.03; }
}