/* Stacked notifications, after Fulldev UI's toaster. The controller measures the stack and writes
   the offsets; collapsed toasts behind the front one show only their edge. */
[data-slot='toast-viewport'] {
  --toast-gap: 0.75rem;
  --toast-collapsed-peek: 0.75rem;

  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1100;
  width: min(24rem, calc(100vw - 2rem));
  height: var(--toast-stack-size, 0);
  pointer-events: none;
  outline: none;
}
[data-slot='toast-item'] {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: calc(1000 - var(--toast-index, 0));
  border-radius: var(--radius-2xl);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow:
    0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent),
    var(--shadow-lg);
  opacity: 0;
  transform: translate3d(0, calc(var(--toast-lift, -1) * -100%), 0);
  transform-origin: bottom;
  pointer-events: auto;
  outline: none;
  user-select: none;
  transition:
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
    height 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Keeps the pointer on the stack between toasts, so hovering it keeps it expanded. */
[data-slot='toast-item']::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: calc(var(--toast-gap, 0px) + 1px);
}
[data-slot='toast-item']:focus-visible {
  box-shadow: var(--focus-ring);
}
[data-slot='toast-item'][data-mounted='true'] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-slot='toast-item'][data-mounted='true'][data-expanded='true'] {
  height: var(--toast-initial-height);
  transform: translate3d(0, calc(var(--toast-offset, 0px) * var(--toast-lift, -1)), 0);
}
[data-slot='toast-item'][data-mounted='true'][data-expanded='false'][data-front='false'] {
  height: var(--toast-front-height);
  transform: translate3d(0, calc(var(--toast-collapsed-offset-y, 0px) * var(--toast-lift, -1)), 0)
    scale(calc(1 - var(--toast-index, 0) * 0.05));
}
[data-slot='toast-item'][data-expanded='false'][data-front='false'][data-open] > * {
  opacity: 0;
}
[data-slot='toast-item'][data-visible='false'] {
  opacity: 0;
  pointer-events: none;
}
[data-slot='toast-item'][data-removed='true'] {
  opacity: 0;
}
[data-slot='toast-item'][data-removed='true'][data-front='true'] {
  transform: translate3d(0, calc(var(--toast-lift, -1) * -100%), 0);
}
[data-slot='toast-item'][data-swiping='true'] {
  transition: none;
  transform: translate3d(var(--toast-swipe-amount-x, 0), var(--toast-swipe-amount-y, 0), 0);
}
[data-slot='toast-item'][data-removed='true'][data-swipe-out='true'] {
  transform: translate3d(var(--toast-swipe-end-x, 0), var(--toast-swipe-end-y, 0), 0);
}
[data-slot='toast-content'] {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  min-height: calc(var(--spacing) * 16);
  padding: calc(var(--spacing) * 4);
  overflow: hidden;
  transition: opacity 200ms;
}
/* The title and description beside the toast's icon. */
.toast-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spacing);
  min-width: 0;
}
[data-slot='toast-title'] {
  font-size: 0.875rem;
  font-weight: 500;
}
[data-slot='toast-description'] {
  color: var(--muted-foreground);
  font-size: 0.875rem;
}
[data-slot='toast-description']:empty,
[data-slot='toast-action']:empty {
  display: none;
}
[data-slot='toast-close'] {
  flex-shrink: 0;
  color: var(--muted-foreground);
}
[data-slot='toast-close']:hover {
  color: var(--foreground);
}
@media (prefers-reduced-motion: reduce) {
  [data-slot='toast-item'],
  [data-slot='drawer-popup'],
  [data-slot='drawer-backdrop'] {
    transition-duration: 0ms;
  }
}