/* Toast Notification Components */

/* Toast Container */
.toast-container {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  pointer-events: none;
}

/* Toast Positions */
.toast-container-top-right {
  top: var(--spacing-4);
  right: var(--spacing-4);
  align-items: flex-end;
}

.toast-container-top-left {
  top: var(--spacing-4);
  left: var(--spacing-4);
  align-items: flex-start;
}

.toast-container-top-center {
  top: var(--spacing-4);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.toast-container-bottom-right {
  bottom: var(--spacing-4);
  right: var(--spacing-4);
  align-items: flex-end;
}

.toast-container-bottom-left {
  bottom: var(--spacing-4);
  left: var(--spacing-4);
  align-items: flex-start;
}

.toast-container-bottom-center {
  bottom: var(--spacing-4);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

/* Responsive Positions */
@media (max-width: 768px) {
  .toast-container-top-right,
  .toast-container-top-left,
  .toast-container-top-center {
    top: var(--spacing-2);
  }
  
  .toast-container-bottom-right,
  .toast-container-bottom-left,
  .toast-container-bottom-center {
    bottom: var(--spacing-2);
  }
  
  .toast-container-top-right,
  .toast-container-bottom-right {
    right: var(--spacing-2);
  }
  
  .toast-container-top-left,
  .toast-container-bottom-left {
    left: var(--spacing-2);
  }
}

/* Toast Base */
.toast {
  background-color: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-3) var(--spacing-4);
  min-width: 280px;
  max-width: 420px;
  width: max-content;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  animation: toast-slide-in var(--transition) ease-out;
  border-left: 4px solid var(--gray-400);
}

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

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

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

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

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

@keyframes toast-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Position-specific animations */
.toast-container-top-right .toast {
  animation: toast-slide-in var(--transition) ease-out;
}

.toast-container-top-left .toast {
  animation: toast-slide-in-left var(--transition) ease-out;
}

.toast-container-top-center .toast {
  animation: toast-slide-in-top var(--transition) ease-out;
}

.toast-container-bottom-right .toast {
  animation: toast-slide-in var(--transition) ease-out;
}

.toast-container-bottom-left .toast {
  animation: toast-slide-in-left var(--transition) ease-out;
}

.toast-container-bottom-center .toast {
  animation: toast-slide-in-bottom var(--transition) ease-out;
}

.toast.fade-out {
  animation: toast-fade-out var(--transition-fast) ease-out forwards;
}

/* Toast Variants */
.toast-success {
  border-left-color: var(--success);
  background-color: var(--white);
}

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

.toast-error {
  border-left-color: var(--danger);
  background-color: var(--white);
}

.toast-error .toast-icon {
  color: var(--danger);
}

.toast-warning {
  border-left-color: var(--warning);
  background-color: var(--white);
}

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

.toast-info {
  border-left-color: var(--info);
  background-color: var(--white);
}

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

/* Toast Icon */
.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  line-height: 1;
}

/* Toast Content */
.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: var(--font-semibold);
  font-size: var(--font-size-sm);
  color: var(--gray-900);
  margin-bottom: var(--spacing-1);
  line-height: var(--line-height-tight);
}

.toast-message {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  line-height: var(--line-height-normal);
  word-wrap: break-word;
}

/* Toast Close Button */
.toast-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: var(--spacing-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--gray-400);
  transition: all var(--transition-fast);
  font-size: var(--font-size-sm);
  line-height: 1;
  margin: -4px -4px -4px 0;
}

.toast-close:hover {
  background-color: var(--gray-100);
  color: var(--gray-600);
}

.toast-close:active {
  transform: scale(0.95);
}

/* Toast Progress Bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: rgba(0, 0, 0, 0.1);
  width: 100%;
}

.toast-progress-bar {
  height: 100%;
  background-color: var(--gray-400);
  width: 100%;
  animation: toast-progress-shrink linear forwards;
}

@keyframes toast-progress-shrink {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

.toast-success .toast-progress-bar {
  background-color: var(--success);
}

.toast-error .toast-progress-bar {
  background-color: var(--danger);
}

.toast-warning .toast-progress-bar {
  background-color: var(--warning);
}

.toast-info .toast-progress-bar {
  background-color: var(--info);
}

/* Toast Without Title */
.toast-no-title .toast-message {
  font-weight: var(--font-medium);
  color: var(--gray-800);
}

/* Compact Toast */
.toast-compact {
  padding: var(--spacing-2) var(--spacing-3);
}

.toast-compact .toast-icon {
  width: 16px;
  height: 16px;
  font-size: var(--font-size-sm);
}

.toast-compact .toast-message {
  font-size: var(--font-size-xs);
}

/* Large Toast */
.toast-large {
  padding: var(--spacing-4) var(--spacing-5);
  min-width: 320px;
  max-width: 480px;
}

.toast-large .toast-icon {
  width: 24px;
  height: 24px;
  font-size: var(--font-size-xl);
}

.toast-large .toast-title {
  font-size: var(--font-size-base);
}

.toast-large .toast-message {
  font-size: var(--font-size-base);
}

/* Toast Stacking */
.toast-container .toast + .toast {
  margin-top: var(--spacing-3);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .toast {
    min-width: 240px;
    max-width: calc(100vw - var(--spacing-4));
    padding: var(--spacing-2) var(--spacing-3);
  }
  
  .toast-large {
    min-width: 280px;
    max-width: calc(100vw - var(--spacing-4));
  }
  
  .toast-title {
    font-size: var(--font-size-xs);
  }
  
  .toast-message {
    font-size: var(--font-size-xs);
  }
}

/* Dark Mode Support */
.dark .toast {
  background-color: var(--gray-800);
  box-shadow: var(--shadow-lg);
}

.dark .toast-title {
  color: var(--gray-100);
}

.dark .toast-message {
  color: var(--gray-400);
}

.dark .toast-close {
  color: var(--gray-500);
}

.dark .toast-close:hover {
  background-color: var(--gray-700);
  color: var(--gray-300);
}

.dark .toast-progress {
  background-color: rgba(255, 255, 255, 0.1);
}

.dark .toast-success {
  border-left-color: var(--success);
}

.dark .toast-error {
  border-left-color: var(--danger);
}

.dark .toast-warning {
  border-left-color: var(--warning);
}

.dark .toast-info {
  border-left-color: var(--info);
}

/* Print Styles */
@media print {
  .toast-container {
    display: none;
  }
}