/* ============================================
   🔔 TOASTS — toasts.css
   ============================================ */

/* ── Container (sabit konum) ── */
.toast-container {
  position: fixed;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 24rem;
  width: calc(100% - 2rem);
  pointer-events: none;
}

/* Konum varyantları */
.toast-container.top-right    { top: var(--space-5); right: var(--space-5); }
.toast-container.top-left     { top: var(--space-5); left: var(--space-5); }
.toast-container.top-center   { top: var(--space-5); left: 50%; transform: translateX(-50%); }
.toast-container.bottom-right { bottom: var(--space-5); right: var(--space-5); }
.toast-container.bottom-left  { bottom: var(--space-5); left: var(--space-5); }
.toast-container.bottom-center{ bottom: var(--space-5); left: 50%; transform: translateX(-50%); }

/* ── Toast ── */
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  cursor: default;
  position: relative;
  overflow: hidden;
  transform: translateX(110%);
  opacity: 0;
  transition:
    transform var(--transition-slow) cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity var(--transition-base);
}

.toast.toast-show {
  transform: translateX(0);
  opacity: 1;
}

.toast.toast-hide {
  transform: translateX(110%);
  opacity: 0;
  transition:
    transform var(--transition-base) ease-in,
    opacity var(--transition-fast);
}

/* Sol konum için ters animasyon */
.toast-container.top-left .toast,
.toast-container.bottom-left .toast {
  transform: translateX(-110%);
}
.toast-container.top-left .toast.toast-show,
.toast-container.bottom-left .toast.toast-show {
  transform: translateX(0);
}
.toast-container.top-left .toast.toast-hide,
.toast-container.bottom-left .toast.toast-hide {
  transform: translateX(-110%);
}

/* Orta için yukarı/aşağı animasyon */
.toast-container.top-center .toast    { transform: translateY(-1rem); }
.toast-container.bottom-center .toast { transform: translateY(1rem); }
.toast-container.top-center .toast.toast-show,
.toast-container.bottom-center .toast.toast-show { transform: translateY(0); }

/* ── Icon ── */
.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
}
.toast-icon svg { width: 1rem; height: 1rem; }

/* ── İçerik ── */
.toast-content {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-base);
  line-height: 1.4;
}

.toast-message {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

/* ── Kapat butonu ── */
.toast-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  margin-top: -1px;
}
.toast-close:hover {
  color: var(--color-text-base);
  background-color: var(--color-border);
}
.toast-close svg { width: 0.875rem; height: 0.875rem; }

/* ── Progress bar ── */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: currentColor;
  opacity: 0.3;
  border-radius: 0 0 0 var(--radius-lg);
  transform-origin: left;
  animation: toast-progress-shrink linear forwards;
}

@keyframes toast-progress-shrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ── Varyantlar ── */

/* Success */
.toast-success {
  border-left-color: var(--color-success);
}
.toast-success .toast-icon {
  background-color: var(--color-success-light);
  color: var(--color-success);
}
.toast-success .toast-progress { color: var(--color-success); }

/* Danger / Error */
.toast-danger,
.toast-error {
  border-left-color: var(--color-danger);
}
.toast-danger .toast-icon,
.toast-error  .toast-icon {
  background-color: var(--color-danger-light);
  color: var(--color-danger);
}
.toast-danger .toast-progress,
.toast-error  .toast-progress { color: var(--color-danger); }

/* Warning */
.toast-warning {
  border-left-color: var(--color-warning);
}
.toast-warning .toast-icon {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
}
.toast-warning .toast-progress { color: var(--color-warning); }

/* Info */
.toast-info {
  border-left-color: var(--color-info);
}
.toast-info .toast-icon {
  background-color: var(--color-info-light);
  color: var(--color-info);
}
.toast-info .toast-progress { color: var(--color-info); }

/* Primary */
.toast-primary {
  border-left-color: var(--color-primary);
}
.toast-primary .toast-icon {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}
.toast-primary .toast-progress { color: var(--color-primary); }

/* ── Dolu (solid) varyant ── */
.toast-solid {
  color: var(--color-text-inverse);
  border: none;
}
.toast-solid.toast-success  { background-color: var(--color-success); border-left: none; }
.toast-solid.toast-danger   { background-color: var(--color-danger);  border-left: none; }
.toast-solid.toast-warning  { background-color: var(--color-warning); border-left: none; }
.toast-solid.toast-info     { background-color: var(--color-info);    border-left: none; }
.toast-solid.toast-primary  { background-color: var(--color-primary); border-left: none; }
.toast-solid .toast-title   { color: var(--color-text-inverse); }
.toast-solid .toast-message { color: rgb(255 255 255 / 0.8); }
.toast-solid .toast-close   { color: rgb(255 255 255 / 0.8); }
.toast-solid .toast-close:hover { background-color: rgb(255 255 255 / 0.15); }
.toast-solid .toast-icon    { background-color: rgb(255 255 255 / 0.2); color: var(--color-text-inverse); }

/* ── Min Toast (sadece metin) ── */
.toast-minimal {
  border-left: none;
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-5);
  align-items: center;
  background-color: #1e293b;
}
.toast-minimal .toast-title { color: var(--color-text-inverse); font-weight: var(--font-weight-medium); }
.toast-minimal .toast-close { color: rgb(255 255 255 / 0.7); }