/* hodein-toast.css — type-bazlı tema değişkenleriyle tam sürüm */

/* -----------------------------------------------------------
   KÖK DEĞİŞKENLER (Tip-bazlı)
   Her mesaj tipi için bg/fg/border/icon/progress ayrı ayrı.
----------------------------------------------------------- */
:root {
  --toast-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --toast-radius: 12px;
  --toast-shadow: 0 10px 30px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  --toast-gap: 10px;
  --toast-z: 9999;

  /* SUCCESS (default/light tema) */
  --toast-bg-success: #ffffff;
  --toast-fg-success: #111827;
  --toast-border-success: #e5e7eb;
  --toast-icon-success: #10b981;
  --toast-progress-success: rgba(0,0,0,.15);

  /* ERROR */
  --toast-bg-error: #ffffff;
  --toast-fg-error: #111827;
  --toast-border-error: #e5e7eb;
  --toast-icon-error: #ef4444;
  --toast-progress-error: rgba(0,0,0,.15);

  /* WARNING */
  --toast-bg-warning: #ffffff;
  --toast-fg-warning: #111827;
  --toast-border-warning: #e5e7eb;
  --toast-icon-warning: #f59e0b;
  --toast-progress-warning: rgba(0,0,0,.15);

  /* INFO */
  --toast-bg-info: #ffffff;
  --toast-fg-info: #111827;
  --toast-border-info: #e5e7eb;
  --toast-icon-info: #3b82f6;
  --toast-progress-info: rgba(0,0,0,.15);

  /* DEFAULT / GENERAL */
  --toast-bg-default: #ffffff;
  --toast-fg-default: #111827;
  --toast-border-default: #e5e7eb;
  --toast-icon-default: #6b7280;
  --toast-progress-default: rgba(0,0,0,.15);
}

/* -----------------------------------------------------------
   TEMALAR
   Tek seferde tüm tipleri override eder.
----------------------------------------------------------- */

/* Dark */
.hn-toasts[data-theme="dark"] {
  --toast-bg-success:#111827; --toast-fg-success:#e5e7eb; --toast-border-success:#1f2937; --toast-icon-success:#34d399; --toast-progress-success:rgba(255,255,255,.2);
  --toast-bg-error:#111827;   --toast-fg-error:#e5e7eb;   --toast-border-error:#1f2937;   --toast-icon-error:#f87171;   --toast-progress-error:rgba(255,255,255,.2);
  --toast-bg-warning:#111827; --toast-fg-warning:#e5e7eb; --toast-border-warning:#1f2937; --toast-icon-warning:#fbbf24; --toast-progress-warning:rgba(255,255,255,.2);
  --toast-bg-info:#111827;    --toast-fg-info:#e5e7eb;    --toast-border-info:#1f2937;    --toast-icon-info:#60a5fa;    --toast-progress-info:rgba(255,255,255,.2);
  --toast-bg-default:#111827; --toast-fg-default:#e5e7eb; --toast-border-default:#1f2937; --toast-icon-default:#9ca3af; --toast-progress-default:rgba(255,255,255,.2);
}

/* Glass (blur arka plan) */
.hn-toasts[data-theme="glass"] {
  --toast-bg-success: rgba(255,255,255,.6); --toast-fg-success:#0b1220; --toast-border-success:rgba(255,255,255,.35); --toast-icon-success:#10b981; --toast-progress-success:rgba(0,0,0,.18);
  --toast-bg-error:   rgba(255,255,255,.6); --toast-fg-error:#0b1220;   --toast-border-error:rgba(255,255,255,.35);   --toast-icon-error:#ef4444;   --toast-progress-error:rgba(0,0,0,.18);
  --toast-bg-warning: rgba(255,255,255,.6); --toast-fg-warning:#0b1220; --toast-border-warning:rgba(255,255,255,.35); --toast-icon-warning:#f59e0b; --toast-progress-warning:rgba(0,0,0,.18);
  --toast-bg-info:    rgba(255,255,255,.6); --toast-fg-info:#0b1220;    --toast-border-info:rgba(255,255,255,.35);    --toast-icon-info:#3b82f6;    --toast-progress-info:rgba(0,0,0,.18);
  --toast-bg-default: rgba(255,255,255,.6); --toast-fg-default:#0b1220; --toast-border-default:rgba(255,255,255,.35); --toast-icon-default:#6b7280; --toast-progress-default:rgba(0,0,0,.18);
}
.hn-toasts[data-theme="glass"] .hn-toast{
  backdrop-filter: blur(10px);
}

/* Ters Koyu */
.hn-toasts[data-theme="reverse-light"] {
  --toast-bg-success:#10b981; --toast-fg-success:#ffffff; --toast-border-success:#0fa170; --toast-icon-success:#ffffff; --toast-progress-success:rgba(255,255,255,.35);
  --toast-bg-error:#ef4444;   --toast-fg-error:#ffffff;   --toast-border-error:#db3d3d;   --toast-icon-error:#ffffff;   --toast-progress-error:rgba(255,255,255,.35);
  --toast-bg-warning:#f59e0b; --toast-fg-warning:#ffffff; --toast-border-warning:#d97706; --toast-icon-warning:#ffffff; --toast-progress-warning:rgba(255,255,255,.35);
  --toast-bg-info:#3b82f6;    --toast-fg-info:#ffffff;    --toast-border-info:#3172db;    --toast-icon-info:#ffffff;    --toast-progress-info:rgba(255,255,255,.35);
  --toast-bg-default:#6b7280; --toast-fg-default:#ffffff; --toast-border-default:#5c616d; --toast-icon-default:#ffffff; --toast-progress-default:rgba(255,255,255,.35);
}

/* -----------------------------------------------------------
   KONTEYNERLER
----------------------------------------------------------- */
.hn-toasts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--toast-z);
  font-family: var(--toast-font);
}
.hn-toasts__stack {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--toast-gap);
  padding: 14px;
  width: min(92vw, 420px);
  pointer-events: none;
}
.hn-pos-top-right    { top: 0; right: 0; align-items: flex-end; }
.hn-pos-top-left     { top: 0; left: 0;  align-items: flex-start; }
.hn-pos-bottom-right { bottom: 0; right: 0; align-items: flex-end; }
.hn-pos-bottom-left  { bottom: 0; left: 0;  align-items: flex-start; }
.hn-pos-top-center   { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }
.hn-pos-bottom-center{ bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; }

/* -----------------------------------------------------------
   TOAST BİLEŞENİ
----------------------------------------------------------- */
.hn-toast {
  position: relative; /* close butonu için referans */
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px 12px;
  align-items: start;
  border: 1px solid transparent; /* renkler tip kurallarında gelir */
  border-radius: var(--toast-radius);
  box-shadow: var(--toast-shadow);
  padding: 12px 12px 10px 12px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
  width: 350px;
  max-width: 80%;
}

.hn-toast--enter {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* İkon kaplayıcı */
.hn-toast__icon { line-height: 1; }
/* Inline SVG boyutu */
.hn-toast__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Başlık & mesaj */
.hn-toast__title {
  font-weight: 600;
  margin: 0;
  font-size: 14px;
}
.hn-toast__msg {
  grid-column: 2 / span 2;
  margin: 0;
  font-size: 13px;
  opacity: .95;
}

/* Kapat butonu */
.hn-toast__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .5;
  cursor: pointer;
  padding: 2px;
  border-radius: 8px;
  font-size: 16px;
  position: absolute;
  top: 6px;
  right: 8px;
}
.hn-toast__close:hover { opacity: .9; }

/* Progress bar (zemin) */
.hn-toast__bar {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 10px;
  overflow: hidden;
}
/* Progress dolumu */
.hn-toast__bar > span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform linear;
}

/* -----------------------------------------------------------
   TİP-BAZLI RENK UYGULAMALARI
----------------------------------------------------------- */
/* SUCCESS */
.hn-toast[data-type="success"] {
  background: var(--toast-bg-success);
  color: var(--toast-fg-success);
  border-color: var(--toast-border-success);
}
.hn-toast[data-type="success"] .hn-toast__icon { color: var(--toast-icon-success); }
.hn-toast[data-type="success"] .hn-toast__bar  { background: var(--toast-progress-success); }

/* ERROR */
.hn-toast[data-type="error"] {
  background: var(--toast-bg-error);
  color: var(--toast-fg-error);
  border-color: var(--toast-border-error);
}
.hn-toast[data-type="error"] .hn-toast__icon { color: var(--toast-icon-error); }
.hn-toast[data-type="error"] .hn-toast__bar  { background: var(--toast-progress-error); }

/* WARNING */
.hn-toast[data-type="warning"] {
  background: var(--toast-bg-warning);
  color: var(--toast-fg-warning);
  border-color: var(--toast-border-warning);
}
.hn-toast[data-type="warning"] .hn-toast__icon { color: var(--toast-icon-warning); }
.hn-toast[data-type="warning"] .hn-toast__bar  { background: var(--toast-progress-warning); }

/* INFO */
.hn-toast[data-type="info"] {
  background: var(--toast-bg-info);
  color: var(--toast-fg-info);
  border-color: var(--toast-border-info);
}
.hn-toast[data-type="info"] .hn-toast__icon { color: var(--toast-icon-info); }
.hn-toast[data-type="info"] .hn-toast__bar  { background: var(--toast-progress-info); }

/* DEFAULT */
.hn-toast[data-type="default"] {
  background: var(--toast-bg-default);
  color: var(--toast-fg-default);
  border-color: var(--toast-border-default);
}
.hn-toast[data-type="default"] .hn-toast__icon { color: var(--toast-icon-default); }
.hn-toast[data-type="default"] .hn-toast__bar  { background: var(--toast-progress-default); }

/* -----------------------------------------------------------
   HOVER'DA DURAKLATMA GÖRSELİ
----------------------------------------------------------- */
.hn-toast--paused { filter: saturate(.7); }

/* -----------------------------------------------------------
   MOBİL UYUM
----------------------------------------------------------- */
@media (max-width: 480px) {
  .hn-toasts__stack { width: 96vw; }
}