// Toast Component
// Inspired by shadcn/ui with stacking support
// Reuses alert component styles for consistency

/**
 * @section Toast Container
 */

/** @public Toast container - fixed top-right */
.toast-container {
  position: fixed;
  top: var(--spacing-6);
  right: var(--spacing-6);
  z-index: 9999;
  width: 100%;
  max-width: 420px;
  pointer-events: none;
  /* Allow absolutely positioned (hidden) overflow to sit on top without shifting layout */
}

@media (max-width: 640px) {
  .toast-container {
    left: var(--spacing-4);
    right: var(--spacing-4);
    max-width: unset;
  }
}

/**
 * @section Toast Base
 */

/** @public Toast notification */
.toast {
  position: relative;
  pointer-events: auto;
  display: flex;
  gap: var(--spacing-3);
  align-items: flex-start;
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: var(--shadow-lg);
  min-height: 48px;
  margin-bottom: var(--spacing-3);
  
  // Smooth transitions for all state changes
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s ease;

  // Entry animation
  animation: toast-slide-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  &:hover {
    box-shadow: var(--shadow-xl);
  }

  // Exit animation
  &.toast-exit {
    animation: toast-slide-out 0.25s ease-in forwards;
  }

  /* When JS hides overflow toasts it sets absolute + opacity 0; ensure no layout flicker */
  &.toast-hidden {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .dark &,
  [data-theme="dark"] & {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
  }
}

/** @public Toast icon container */
.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/** @public Toast content wrapper */
.toast-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
}

/** @public Toast title */
.toast-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: hsl(var(--foreground));

  .dark &,
  [data-theme="dark"] & {
    color: hsl(var(--foreground));
  }
}

/** @public Toast description text */
.toast-description {
  font-size: 14px;
  line-height: 1.4;
  color: hsl(var(--muted-foreground));

  .dark &,
  [data-theme="dark"] & {
    color: hsl(var(--muted-foreground));
  }
}

/** @public Toast close button */
.toast-close {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  border-radius: var(--radius-sm);
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.15s, background-color 0.15s;

  &:hover {
    opacity: 1;
    background: hsl(var(--accent) / 0.1);
  }

  .dark &,
  [data-theme="dark"] & {
    color: hsl(var(--muted-foreground));

    &:hover {
      background: hsl(var(--accent) / 0.15);
    }
  }
}

/** @public Toast action button container */
.toast-action {
  margin-top: var(--spacing-2);
  
  .btn {
    height: auto;
    padding: var(--spacing-1) var(--spacing-3);
    font-size: 13px;
  }
}

/**
 * @section Toast Variants
 */

/** @public Default toast */
.toast-default {
  background: hsl(var(--card));
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));

  .toast-icon {
    color: hsl(var(--foreground));
  }

  .dark &,
  [data-theme="dark"] & {
    background: hsl(var(--card));
    border-color: hsl(var(--border));
  }
}

/** @public Success toast */
.toast-success {
  border-color: hsl(var(--success));
  // Light mode: light green background
  background-color: hsl(142.1 76.2% 92%);
  color: hsl(142.1 76.2% 25%);

  .toast-icon {
    color: hsl(142.1 76.2% 25%);
  }

  .toast-title {
    color: hsl(142.1 76.2% 25%);
  }

  .toast-description {
    color: hsl(142.1 76.2% 28%);
  }

  .dark &,
  [data-theme="dark"] & {
    background-color: hsl(142.1 76.2% 12%);
    color: hsl(142.1 76.2% 80%);
    border-color: hsl(var(--success) / 0.6);

    .toast-icon {
      color: hsl(142.1 76.2% 80%);
    }

    .toast-title {
      color: hsl(142.1 76.2% 80%);
    }

    .toast-description {
      color: hsl(142.1 76.2% 70%);
    }
  }
}

/** @public Error/destructive toast */
.toast-error,
.toast-destructive {
  border-color: hsl(var(--destructive));
  // Light mode: light red background
  background-color: hsl(0 84.2% 95%);
  color: hsl(0 84.2% 30%);

  .toast-icon {
    color: hsl(0 84.2% 30%);
  }

  .toast-title {
    color: hsl(0 84.2% 30%);
  }

  .toast-description {
    color: hsl(0 84.2% 35%);
  }

  .dark &,
  [data-theme="dark"] & {
    background-color: hsl(0 84.2% 15%);
    color: hsl(0 84.2% 85%);
    border-color: hsl(var(--destructive) / 0.6);

    .toast-icon {
      color: hsl(0 84.2% 85%);
    }

    .toast-title {
      color: hsl(0 84.2% 85%);
    }

    .toast-description {
      color: hsl(0 84.2% 75%);
    }
  }
}

/** @public Warning toast */
.toast-warning {
  border-color: hsl(var(--warning));
  // Light mode: light yellow/orange background
  background-color: hsl(38 92% 90%);
  color: hsl(38 92% 25%);

  .toast-icon {
    color: hsl(38 92% 25%);
  }

  .toast-title {
    color: hsl(38 92% 25%);
  }

  .toast-description {
    color: hsl(38 92% 28%);
  }

  .dark &,
  [data-theme="dark"] & {
    background-color: hsl(38 92% 15%);
    color: hsl(38 92% 80%);
    border-color: hsl(var(--warning) / 0.6);

    .toast-icon {
      color: hsl(38 92% 80%);
    }

    .toast-title {
      color: hsl(38 92% 80%);
    }

    .toast-description {
      color: hsl(38 92% 70%);
    }
  }
}

/** @public Info toast */
.toast-info {
  border-color: hsl(var(--info));
  // Light mode: light blue background
  background-color: hsl(221.2 83.2% 92%);
  color: hsl(221.2 83.2% 30%);

  .toast-icon {
    color: hsl(221.2 83.2% 30%);
  }

  .toast-title {
    color: hsl(221.2 83.2% 30%);
  }

  .toast-description {
    color: hsl(221.2 83.2% 35%);
  }

  .dark &,
  [data-theme="dark"] & {
    background-color: hsl(221.2 83.2% 15%);
    color: hsl(221.2 83.2% 80%);
    border-color: hsl(var(--info) / 0.6);

    .toast-icon {
      color: hsl(221.2 83.2% 80%);
    }

    .toast-title {
      color: hsl(221.2 83.2% 80%);
    }

    .toast-description {
      color: hsl(221.2 83.2% 70%);
    }
  }
}

// Animations
@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}