/* Notification Inline — WowVendor DS.
   Оси component set:
     Size (l/m/s) × Status (info/positive/attention/negative)
     × Title Show (true/false) × Closable (true/false) = 48 вариантов.

   Раскладка по размерам:
     L — карточка с бордером, padding 24, иконка 20px (КОНТУРНАЯ circle-*),
         контент-колонка (текст + группа из 2 ссылок Action).
     M — компактная строка без бордера, padding 16, иконка 16px (SOLID circle-*-solid),
         текст (flex-1) + одиночная ссылка Action справа.
     S — колонка без бордера, padding 16, иконка 16px сверху (SOLID circle-*-solid),
         текст + группа из 2 ссылок Action снизу.
   Closable=True — вместо ссылок Action ставится close-кнопка (Button Ghost,
     md, icon-only) в правом-верхнем углу; ссылки не показываются.

   Все значения — токены. Иконки статуса и close — currentColor.
   Типографика — utility-классами в разметке. Close-кнопка переиспользует
   компонент button (link ../button/button.css). */

.notif {
  box-sizing: border-box;
  width: 400px;
  border-radius: var(--radius-12);
  background: var(--notif-bg);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  font-family: var(--font-family-base);
}

/* Статусы: фон / бордер (только L) / цвет иконки / состояния первой ссылки Action.
   Тройка --notif-action / -h / -a = Default/Hover/Active цветовой схемы компонента
   Link (см. link.html): info→Primary, positive→Positive, attention→Warning,
   negative→Negative. Вторая ссылка — всегда схема Tertiary (см. .notif__actions). */
.notif--info {
  --notif-bg: var(--color-information-25);
  --notif-border: var(--color-information-50);
  --notif-icon: var(--color-information-400);
  --notif-action: var(--color-accent-400);
  --notif-action-h: var(--color-accent-600);
  --notif-action-a: var(--color-accent-400);
}
.notif--positive {
  --notif-bg: var(--color-positive-25);
  --notif-border: var(--color-positive-50);
  --notif-icon: var(--color-positive-400);
  --notif-action: var(--color-positive-500);
  --notif-action-h: var(--color-positive-400);
  --notif-action-a: var(--color-positive-500);
}
.notif--attention {
  --notif-bg: var(--color-warning-25);
  --notif-border: var(--color-warning-50);
  --notif-icon: var(--color-warning-300);
  --notif-action: var(--color-warning-400);
  --notif-action-h: var(--color-warning-300);
  --notif-action-a: var(--color-warning-500);
}
.notif--negative {
  --notif-bg: var(--color-negative-50);
  --notif-border: var(--color-negative-100);
  --notif-icon: var(--color-negative-500);
  --notif-action: var(--color-negative-500);
  --notif-action-h: var(--color-negative-400);
  --notif-action-a: var(--color-negative-600);
}

.notif--l { border: 1px solid var(--notif-border); }

/* ---- Body (падинговая область: иконка + основной блок) ---- */
.notif__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--spacing-12);
  align-items: flex-start;
}
.notif--l .notif__body { padding: var(--spacing-24); flex-direction: row; }
.notif--m .notif__body { padding: var(--spacing-16); flex-direction: row; }
.notif--s .notif__body { padding: var(--spacing-16); flex-direction: column; }

/* ---- Иконка статуса ---- */
.notif__icon { flex: none; color: var(--notif-icon); display: flex; }
.notif__icon svg { display: block; }
.notif--l .notif__icon { padding-top: 2px; }
.notif--l .notif__icon svg { width: 20px; height: 20px; }
.notif--m .notif__icon,
.notif--s .notif__icon { height: 20px; align-items: center; }
.notif--m .notif__icon svg,
.notif--s .notif__icon svg { width: 16px; height: 16px; }

/* ---- Основной блок (текст + действия) ---- */
.notif__main { flex: 1 1 auto; min-width: 0; display: flex; }
.notif--l .notif__main { flex-direction: column; gap: var(--spacing-20); }
.notif--m .notif__main { flex-direction: row; align-items: flex-start; gap: var(--spacing-12); }
.notif--s .notif__main { flex-direction: column; gap: var(--spacing-12); align-self: stretch; }

/* ---- Текст (заголовок + сообщение) ---- */
.notif__text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.notif--l .notif__text { gap: var(--spacing-8); }
.notif--m .notif__text,
.notif--s .notif__text { gap: var(--spacing-4); }
.notif__title { margin: 0; color: var(--color-gray-800); word-break: break-word; }
.notif__message { margin: 0; color: var(--color-gray-800); word-break: break-word; }

/* ---- Ссылки Action ---- */
/* Сама ссылка — переиспользованный компонент Link (../link/link.css) в живом
   режиме .link--live: base-стили и реакция на :hover/:focus-visible/:active
   приходят оттуда, состояния задаются тройкой --link-c/-h/-a на .link-корне
   (иконок нет — только .link__text). */
.notif__actions { display: flex; flex-wrap: wrap; }
.notif--l .notif__actions { gap: var(--spacing-16); }
.notif--m .notif__actions { flex: none; }
.notif--s .notif__actions { row-gap: var(--spacing-8); column-gap: var(--spacing-16); }
/* Primary — схема статуса; Secondary — всегда Tertiary (gray). */
.notif__action--primary {
  --link-c: var(--notif-action);
  --link-h: var(--notif-action-h);
  --link-a: var(--notif-action-a);
}
.notif__action--secondary {
  --link-c: var(--color-gray-500);
  --link-h: var(--color-gray-600);
  --link-a: var(--color-gray-500);
}

/* ---- Close-кнопка (Button Ghost md icon-only) ---- */
.notif__close { flex: none; display: flex; align-items: flex-start; }
.notif--l .notif__close { padding: var(--spacing-8) var(--spacing-8) 0 0; }
.notif--m .notif__close,
.notif--s .notif__close { padding: var(--spacing-4) var(--spacing-4) 0 0; }