/* Toast Container */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
  width: 100%;
  pointer-events: none; /* Allow clicking through the container */
}

/* Bottom position variants */
.toast-container.bottom-right {
  top: auto;
  bottom: 20px;
  right: 20px;
  left: auto;
}

.toast-container.bottom-left {
  top: auto;
  bottom: 20px;
  right: auto;
  left: 20px;
}

.toast-container.top-left {
  top: 20px;
  bottom: auto;
  right: auto;
  left: 20px;
}

/* Individual Toast */
.toast {
  position: relative;
  border-radius: 10px;
  overflow: visible;
  pointer-events: auto; /* Make the toast itself clickable */
  min-width: 260px;
  max-width: 350px;
  opacity: 0;
  
  /* Base transform states - these will be overridden by animation classes */
  transform: translateX(120%);
}

/* No gradient option */
.toast.no-gradient::before {
  display: none;
}

/* Inner card that contains actual content */
.toast-inner-card {
  position: relative;
  background-color: var(--foreground);
  border-radius: 8px; /* Slightly smaller than parent for border effect */
  display: flex;
  align-items: center;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  margin: 1px; /* Space for the animated border */
  z-index: 1;
  overflow: hidden;
}

/* Toast Animation - Show */
.toast.show {
  opacity: 1;
}

/* Default animation: slide-right */
.toast.animation-slide-right {
  transform: translateX(120%);
  transition: transform 0.4s ease-out, opacity 0.3s ease;
}

.toast.animation-slide-right.show {
  transform: translateX(0);
}

/* slide-left animation */
.toast.animation-slide-left {
  transform: translateX(-120%);
  transition: transform 0.4s ease-out, opacity 0.3s ease;
}

.toast.animation-slide-left.show {
  transform: translateX(0);
}

/* slide-up animation */
.toast.animation-slide-up {
  transform: translateY(100%);
  transition: transform 0.4s ease-out, opacity 0.3s ease;
}

.toast.animation-slide-up.show {
  transform: translateY(0);
}

/* slide-down animation */
.toast.animation-slide-down {
  transform: translateY(-100%);
  transition: transform 0.4s ease-out, opacity 0.3s ease;
}

.toast.animation-slide-down.show {
  transform: translateY(0);
}

/* fade animation */
.toast.animation-fade {
  transform: translateX(0);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.toast.animation-fade.show {
  opacity: 1;
}

/* zoom animation */
.toast.animation-zoom {
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease;
}

.toast.animation-zoom.show {
  transform: scale(1);
  opacity: 1;
}

/* bounce animation */
.toast.animation-bounce {
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.toast.animation-bounce.show {
  transform: scale(1);
  opacity: 1;
}

/* Toast Gradient Border Effect - Using card component styling */
.toast::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--color-rgb, 61, 81, 232), 1),
      rgba(0, 0, 0, 0) 70%);
  z-index: 0;
  pointer-events: none;
}

/* State-Specific Gradient Borders */
.toast.success::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--success-color-rgb), 1),
      rgba(0, 0, 0, 0) 70%);
}

.toast.error::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--error-color-rgb), 1),
      rgba(0, 0, 0, 0) 70%);
}

.toast.warning::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--warning-color-rgb), 1),
      rgba(0, 0, 0, 0) 70%);
}

.toast.question::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--question-color-rgb), 1),
      rgba(0, 0, 0, 0) 70%);
}

.toast.odd::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--odd-color-rgb), 1),
      rgba(0, 0, 0, 0) 70%);
}

.toast.black::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--black-color-rgb), 1),
      rgba(0, 0, 0, 0) 70%);
}

.toast.white::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--white-color-rgb), 1),
      rgba(0, 0, 0, 0) 70%);
}

/* Toast Content */
.toast-content {
  position: relative;
  z-index: 1;
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Toast Icon */
.toast-icon {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

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

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

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

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

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

/* Animated icons */
.toast-icon.animated i {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Toast Message */
.toast-message {
  flex-grow: 1;
  font-size: 0.9rem;
}

.toast-title {
  font-weight: 600;
  margin-bottom: 3px;
  font-size: 1rem;
}

.toast-description {
  opacity: 0.85;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Toast Actions */
.toast-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}

.toast-close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
  border-radius: 4px;
}

.toast-close:hover {
  opacity: 1;
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, 0.05);
}

/* Additional toast action buttons */
.toast-action-btn {
  background: none;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--accent);
  transition: background-color 0.2s ease;
}

.toast-action-btn:hover {
  background-color: rgba(var(--color-rgb), 0.1);
}

/* Progress bar for auto-dismiss */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: rgba(var(--color-rgb), 0.6);
  transition: transform linear;
  z-index: 2;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* Progress bar styles based on toast type */
.toast.success .toast-progress {
  background: rgba(var(--success-color-rgb), 0.6);
}

/* Glow effect on progress bar */
.toast-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.4) 50%, 
    transparent 100%);
  animation: progressGlow 2s infinite;
}

@keyframes progressGlow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.toast.error .toast-progress {
  background: rgba(var(--error-color-rgb), 0.6);
}

.toast.warning .toast-progress {
  background: rgba(var(--warning-color-rgb), 0.6);
}

.toast.question .toast-progress {
  background: rgba(var(--question-color-rgb), 0.6);
}

.toast.odd .toast-progress {
  background: rgba(var(--odd-color-rgb), 0.6);
}

/* Legacy support for old toast-message class */
.toast-message.success,
.toast-message.error,
.toast-message.info {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  opacity: 0.95;
  transition: all 0.3s ease;
}

/* Gradient animation keyframes */
@keyframes moveGradient {
  0% {
    --gradient-x: 0%;
    --gradient-y: 0%;
  }
  25% {
    --gradient-x: 100%;
    --gradient-y: 0%;
  }
  50% {
    --gradient-x: 100%;
    --gradient-y: 100%;
  }
  75% {
    --gradient-x: 0%;
    --gradient-y: 100%;
  }
  100% {
    --gradient-x: 0%;
    --gradient-y: 0%;
  }
}

.toast.auto-animate::before {
  animation: moveGradient 5s infinite alternate;
}

/* Special animations for entrance and exit */
@keyframes flip-in {
  from {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flip-out {
  from {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  to {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.toast.animation-flip {
  transform-origin: top center;
  transform: perspective(400px) rotateX(90deg);
  opacity: 0;
  transition: none;
}

.toast.animation-flip.show {
  animation: flip-in 0.6s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.animation-flip.hide {
  animation: flip-out 0.6s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Custom toast actions */
.toast-action-group {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.toast-action-group .toast-action-btn {
  padding: 5px 10px;
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .toast-container {
    top: auto;
    bottom: 20px;
    right: 20px;
    left: 20px;
    max-width: none;
  }
  
  .toast {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
  
  .toast-content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .toast-icon {
    margin-bottom: 8px;
  }
  
  .toast-actions {
    position: absolute;
    top: 8px;
    right: 8px;
  }
  
  .toast-inner-card {
    padding: 1rem;
  }
}

/* Dark mode adjustments */
html.dark .toast-inner-card {
  background-color: var(--foreground-dark, #252525);
}

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

html.dark .toast-action-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}