/* ═══════════════════════════════════════════════════════════════════════════
   Empty State
   Варіанти: (default/neutral) · empty-danger · empty-accent
   Модифікатор: empty--page (сторінковий рівень, більший відступ та іконка)
   Елементи: empty__icon · empty__title · empty__desc · empty__actions
   JS: відсутній
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom properties (per-variant overrides) ──────────────────────────── */
.empty {
  --empty-icon-bg:    var(--uris-color-semantic-surface-active);
  --empty-icon-color: var(--uris-color-semantic-text-muted);
}

.empty-danger {
  --empty-icon-bg:    var(--uris-color-semantic-danger-surface);
  --empty-icon-color: var(--uris-color-semantic-danger);
}

.empty-accent {
  --empty-icon-bg:    var(--uris-color-semantic-info);
  --empty-icon-color: var(--uris-color-semantic-accent);
}

/* ── Base structure ─────────────────────────────────────────────────────── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--uris-spacing-3);
  padding: var(--uris-spacing-8);
  font-family: var(--uris-font-family-body);
  -webkit-font-smoothing: antialiased;
}

/* ── Page-level modifier ────────────────────────────────────────────────── */
.empty--page {
  padding: var(--uris-spacing-16);
}

/* ── Icon wrapper (circle) ──────────────────────────────────────────────── */
.empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width:  var(--uris-component-empty-icon-size);
  height: var(--uris-component-empty-icon-size);
  border-radius: var(--uris-radius-full);
  background-color: var(--empty-icon-bg);
  color: var(--empty-icon-color);
  /* slight gap from title below */
  margin-block-end: var(--uris-spacing-1);
}

.empty__icon svg {
  width:  var(--uris-component-empty-icon-inner);
  height: var(--uris-component-empty-icon-inner);
  flex-shrink: 0;
}

/* page modifier — larger circle */
.empty--page .empty__icon {
  width:  var(--uris-component-empty-icon-size-page);
  height: var(--uris-component-empty-icon-size-page);
}

.empty--page .empty__icon svg {
  width:  var(--uris-component-empty-icon-inner-page);
  height: var(--uris-component-empty-icon-inner-page);
}

/* ── Title (обов'язковий) ───────────────────────────────────────────────── */
.empty__title {
  font-family: var(--uris-font-family-heading);
  font-size: var(--uris-text-lg-size);
  font-weight: var(--uris-font-weight-bold);
  line-height: var(--uris-text-lg-line);
  color: var(--uris-color-semantic-text);
  margin: 0;
}

.empty--page .empty__title {
  font-size: var(--uris-text-xl-size);
  line-height: var(--uris-text-xl-line);
}

/* ── Description ────────────────────────────────────────────────────────── */
.empty__desc {
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
  color: var(--uris-color-semantic-secondary);
  max-width: 34ch;
  margin: 0;
}

.empty--page .empty__desc {
  font-size: var(--uris-text-base-size);
  line-height: var(--uris-text-base-line);
  max-width: 42ch;
}

/* ── Actions row ────────────────────────────────────────────────────────── */
.empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--uris-spacing-3);
  margin-block-start: var(--uris-spacing-1);
}