/* toast — guşə bildiriş yığını + sətir daxili banner. */

.toast-demo {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* --- Sətir daxili, davamlı banner */
.toast-demo__banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
}

.toast-demo__banner--warning { background: var(--warning-subtle); color: var(--warning); }
.toast-demo__banner--danger { background: var(--danger-subtle); color: var(--danger); }

.toast-demo__banner .icon { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.1em; }

.toast-demo__banner-text { flex: 1; font-size: var(--size-sm); color: var(--text); }
.toast-demo__banner-title { font-weight: var(--weight-semibold); margin: 0 0 var(--space-1); }
.toast-demo__banner-body { margin: 0; color: var(--text-muted); }

.toast-demo__banner-dismiss {
  flex: none;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
}
.toast-demo__banner-dismiss .icon { width: 1rem; height: 1rem; }

/* --- Guşə toast yığını */
.toast-demo__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 22rem;
}

.toast-demo__toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.toast-demo__toast-icon { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.1em; }
.toast-demo__toast--success .toast-demo__toast-icon { color: var(--success); }
.toast-demo__toast--warning .toast-demo__toast-icon { color: var(--warning); }
.toast-demo__toast--danger .toast-demo__toast-icon { color: var(--danger); }

.toast-demo__toast-body { flex: 1; min-width: 0; }
.toast-demo__toast-title { margin: 0; font-size: var(--size-sm); font-weight: var(--weight-semibold); color: var(--text); }
.toast-demo__toast-text { margin: var(--space-1) 0 0; font-size: var(--size-xs); color: var(--text-muted); }

.toast-demo__toast-close {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.toast-demo__toast-close:hover { background: var(--hover-veil); color: var(--text); }
.toast-demo__toast-close .icon { width: 0.85rem; height: 0.85rem; }