/*
 * Değirmencioğlu — Toast Notifications
 * Design tokens: assets/css/design-tokens.css
 */

.toast-stack {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: var(--z-toast, 1300);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  width: min(100% - 2rem, 440px);
  max-width: 440px;
  pointer-events: none;
}

.toast {
  --toast-duration: 3500ms;
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: min(100%, 380px);
  max-width: 440px;
  padding: 16px 20px;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateX(1.25rem);
  opacity: 0;
  animation: toast-in var(--transition-base) forwards;
}

.toast.is-leaving {
  animation: toast-out 0.28s ease forwards;
}

.toast.is-paused .toast__progress-bar {
  animation-play-state: paused;
}

.toast__icon {
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  margin-top: 1px;
}

.toast__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.15rem;
  padding-bottom: 0.15rem;
}

.toast__message {
  margin: 0;
  font-size: 15px; /* html=10px olduğundan rem yerine px */
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-dark);
  font-family: var(--font-sans);
  white-space: pre-line;
}

.toast__message--text {
  white-space: pre-line;
}

.toast__message ul {
  margin: 6px 0 0;
  padding-left: 1.1em;
  list-style: disc;
}

.toast__message li {
  margin: 2px 0;
  font-size: 14px;
  line-height: 1.45;
}

.toast__close {
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  margin: -0.1rem -0.2rem 0 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.toast__close:hover {
  color: var(--color-dark);
  background: var(--color-bg);
}

.toast__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: color-mix(in srgb, var(--color-border) 70%, transparent);
  overflow: hidden;
  pointer-events: none;
}

.toast__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  animation: toastProgress var(--toast-duration) linear forwards;
}

.toast:hover .toast__progress-bar {
  animation-play-state: paused;
}

/* Types */
.toast--success .toast__icon {
  background: color-mix(in srgb, var(--color-primary) 14%, #fff);
  color: var(--color-primary-dark);
}

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

.toast--error .toast__icon {
  background: color-mix(in srgb, var(--color-danger) 12%, #fff);
  color: var(--color-danger);
}

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

.toast--warning .toast__icon {
  background: color-mix(in srgb, var(--color-warning) 14%, #fff);
  color: var(--color-warning);
}

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

.toast--info .toast__icon {
  background: color-mix(in srgb, var(--color-dark) 8%, #fff);
  color: var(--color-dark);
}

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

@keyframes toastProgress {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(1.25rem);
  }
}

@media (max-width: 575.98px) {
  .toast-stack {
    top: auto;
    bottom: calc(var(--mobile-bottombar-h, 64px) + 0.75rem);
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-width: none;
    align-items: stretch;
  }

  .toast {
    min-width: 0;
    max-width: none;
  }

  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes toast-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(0.75rem);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-leaving {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .toast__progress-bar {
    animation: none;
    width: 0;
  }
}