/* ═══════════════════════════════════════════════
   NOTIFICATION  ·  ds-notification
   ═══════════════════════════════════════════════ */

/* ── Container ─────────────────────────────────── */
.ds-notification-container {
  position: fixed;
  top: var(--ds-notification-offset);
  right: var(--ds-notification-offset);
  z-index: var(--ds-notification-z);
  display: flex;
  flex-direction: column;
  gap: var(--ds-notification-gap);
  pointer-events: none;
  max-height: calc(100vh - 2 * var(--ds-notification-offset));
  overflow: hidden;
}

/* ── Base ──────────────────────────────────────── */
.ds-notification {
  display: flex;
  align-items: flex-start;
  min-width: var(--ds-notification-min-w);
  max-width: var(--ds-notification-max-w);
  background: var(--ds-notification-bg);
  color: var(--ds-notification-text);
  border-radius: var(--ds-notification-r);
  padding: var(--ds-notification-py) var(--ds-notification-px);
  box-shadow: var(--ds-notification-shadow);
  pointer-events: all;
  position: relative;
  overflow: hidden;
  font-family: var(--ds-font);
  font-size: var(--ds-type-body-1-size);
  line-height: var(--ds-type-body-1-lh);
  animation: ds-notification-slide-in var(--ds-dur-2) var(--ds-ease);
}

/* Left accent bar */
.ds-notification::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--ds-notification-bar-w);
}

/* ── Variants ──────────────────────────────────── */
/* Foreground accent (icon + left bar) = Figma Static/Icon/<Intent>/Accent — invert-aware.
   Bound via --ds-surface-<intent>-text (exact Figma Icon-Accent match all 4 modes, verified
   Plugin API 2026-07-12). Previously bound fill/border tokens (info-500=Surface/Accent fill,
   neg-default=Border, warn-fill=Fill/Solid) which are FROZEN in invert → dark-on-dark in LI
   (icon Lc24/12/27 <30). A solid fill is constant per light/dark, but a foreground glyph on
   the neutral card flips with the theme. */
.ds-notification[data-variant='info']::before    { background: var(--ds-notification-bar-info); }
.ds-notification[data-variant='positive']::before { background: var(--ds-notification-bar-positive); }
.ds-notification[data-variant='warning']::before { background: var(--ds-notification-bar-warning); }
.ds-notification[data-variant='negative']::before   { background: var(--ds-notification-bar-negative); }

.ds-notification[data-variant='info'] .ds-notification-icon    { color: var(--ds-surface-info-icon); }
.ds-notification[data-variant='positive'] .ds-notification-icon { color: var(--ds-surface-pos-icon); }
.ds-notification[data-variant='warning'] .ds-notification-icon { color: var(--ds-surface-warn-icon); }
.ds-notification[data-variant='negative'] .ds-notification-icon   { color: var(--ds-surface-neg-icon); }

/* ── Elements ──────────────────────────────────── */
.ds-notification-icon {
  flex-shrink: 0;
  width: var(--ds-notification-icon-sz);
  height: var(--ds-notification-icon-sz);
  margin-right: var(--ds-notification-gap);
  margin-left: 4px;
  font-size: var(--ds-notification-icon-sz);
  line-height: 1.5;
  text-align: center;
}

/* Lucide status SVG (info/circle-check-big/circle-alert/octagon-x) fills the icon slot */
.ds-notification-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Lucide x close glyph sized to the button's font-size (1em), not the full hit area */
.ds-notification-close svg {
  display: block;
  width: 1em;
  height: 1em;
}

.ds-notification-body {
  flex: 1;
  min-width: 0;
  padding-right: calc(var(--ds-notification-close-sz) + var(--ds-notification-gap));
}

.ds-notification-title {
  font-weight: var(--ds-fw-md);              /* Figma Title = Subtitle/Sub2 Medium 500 (was undefined --ds-fw-sb → rendered 400) */
  font-size: var(--ds-type-sub2-size);       /* Figma Sub2 18 (was body-1 16) */
  line-height: var(--ds-type-sub2-lh);       /* Figma 24 */
}

.ds-notification-message {
  font-size: var(--ds-type-body-2-size);
  line-height: var(--ds-type-body-2-lh);
  margin-top: calc(var(--ds-comp-unit) * 0.5);
  /* ЭТА СТРОКА ССЫЛАЛАСЬ НА ФАКТ, КОТОРОГО НЕТ. Комментарий утверждал «Figma 1281:16640
     message = Static/Text/Neutral-Blue/Tertiary», но обход того же узла Plugin API даёт роли
     Body/Core/Description.f привязку Static/Text/Neutral-Blue/Primary — Tertiary у этого
     мастера не встречается вовсе. Утверждение было написано рукой и выглядело как цитата
     из макета; тот же рукописный эталон стоял и в конфиге аудита, поэтому оба сходились
     между собой и вместе расходились с макетом. */
  color: var(--ds-text-primary);
}

/* Правила .ds-notification-action (текстовая ссылка одиночного действия) удалены
   2026-08-04: разметка, их порождавшая, сведена к группе кнопок — формы «ссылка»
   в макете нет вовсе. */
.ds-notification-actions {
  /* 12 = Figma Notification «Core» itemSpacing (VERTICAL) — отступ группы действий от текста.
     Больше здесь ничего: сам ряд (направление, зазор 16, выключка) держит buttons-group.css,
     кнопки — button.css. Композит задаёт только своё расстояние, не чужую геометрию. */
  margin-top: calc(var(--ds-comp-unit) * 3);
}

.ds-notification-close {
  position: absolute;
  top: calc(var(--ds-comp-unit) * 2);
  right: calc(var(--ds-comp-unit) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ds-notification-close-sz);
  height: var(--ds-notification-close-sz);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;   /* Figma close glyph (Lucide x) = 20 in the 40px button */
  line-height: 1;
  /* Крестик — ИКОНКА ghost-кнопки (1281:16640, роль Tertiary/x/Vector.s =
     Icon/Neutral-Blue/Ghost/Default), а не текст. Тот же класс, что у крестика модалки. */
  color: var(--ds-icon-neutral-ghost);
  border-radius: var(--ds-radius-xs);
}

.ds-notification-close:hover {
  background: var(--ds-nba-15);
  color: var(--ds-text-primary);
}

.ds-notification-close:focus-visible,
.ds-notification-close[data-focus-visible] {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* ── Animation ─────────────────────────────────── */
@keyframes ds-notification-slide-in {
  from {
    transform: translateX(110%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds-notification {
    animation: none;
  }
}