/* Active state data attributes for JavaScript animations */
[data-name="ToastItem"][data-state="Dismissing"] {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity var(--exit-duration) var(--transition-easing), transform var(--exit-duration) var(--transition-easing);
}

[data-name="ToastItem"][data-state="AutoDismissing"] {
  transform: translateY(100vh) !important;
  transition: transform var(--exit-duration) ease-out !important;
}

@keyframes toast___AutoDismissAnimation {
  to {
    transform: translateY(100vh) !important;
  }
}

/* Enter animation for new toasts */
[data-name="ToastItem"][data-state="Entering"] {
  opacity: 0;
  transform: translateY(100%);
  animation: toast___EnterAnimation var(--enter-duration) var(--transition-easing) forwards;
}

/* Auto-dismiss animation for active toasts (after Entering) */
[data-name="ToastItem"]:not([data-state="Entering"]) {
  animation: toast___AutoDismissAnimation 300ms ease-out var(--dismiss-delay) forwards;
}

@keyframes toast___EnterAnimation {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fold direction CSS custom properties */
[data-name="ToastListItem"][data-direction="BottomUp"] {
  --fold-multiplier: -1;
}

[data-name="ToastListItem"][data-direction="TopDown"] {
  --fold-multiplier: 1;
}

[data-name="ToastListItem"] {  
  /* Legacy property for backward compatibility */
  --animation-duration: var(--enter-duration);
  
  /* CSS Counter System */
  counter-reset: toast-index;
  
  /* Reset list styles for semantic ol element */
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-name="ToastItem"] {
  counter-increment: toast-index;
  --stack-index: 0;
  /* Unified transition properties for all toast animations */
  transition: transform var(--stack-duration) var(--transition-easing), 
              opacity var(--exit-duration) var(--transition-easing);
}


/* CSS-based toast limit - hide toasts beyond the 5th most recent */
[data-name="ToastItem"]:nth-last-child(n+6) {
  display: none;
}

/* Set stack index for each toast position */
[data-name="ToastItem"]:not([data-state="Entering"]):nth-last-child(1) { --stack-index: 0; }
[data-name="ToastItem"]:not([data-state="Entering"]):nth-last-child(2) { --stack-index: 1; }
[data-name="ToastItem"]:not([data-state="Entering"]):nth-last-child(3) { --stack-index: 2; }
[data-name="ToastItem"]:not([data-state="Entering"]):nth-last-child(4) { --stack-index: 3; }
[data-name="ToastItem"]:not([data-state="Entering"]):nth-last-child(5) { --stack-index: 4; }

/* Default collapsed state - stacked with scaling */
[data-name="ToastItem"]:not([data-state="Entering"]) {
  transform: translateY(calc(var(--fold-multiplier) * var(--stack-index) * var(--stack-spacing))) 
             scale(calc(1 - var(--stack-index) * var(--scale-factor)));
}

/* Hover state - expanded spacing with no scaling */
[data-name="ToastListItem"]:hover [data-name="ToastItem"]:not([data-state="Entering"]) {
  transform: translateY(calc(var(--fold-multiplier) * var(--stack-index) * var(--expand-spacing))) scale(1);
}