/* ═══════════════════════════════════════════════════════════════════════════
   Alert / Inline notification
   Семантичні варіанти: info / success / warning / danger
   Ролі: role="status" (info/success) | role="alert" (warning/danger)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Custom properties (per-variant overrides) ─────────────────────────── */
.alert {
  --alert-accent:       var(--uris-color-semantic-accent);
  --alert-accent-text:  var(--uris-color-semantic-accent);
}
.alert-info {
  --alert-accent:       var(--uris-color-semantic-accent);
  --alert-accent-text:  var(--uris-color-semantic-accent);
}
.alert-success {
  --alert-accent:       var(--uris-color-semantic-success);
  --alert-accent-text:  var(--uris-color-semantic-success-text);
}
.alert-warning {
  --alert-accent:       var(--uris-color-semantic-warning);
  --alert-accent-text:  var(--uris-color-semantic-warning);
}
.alert-danger {
  --alert-accent:       var(--uris-color-semantic-danger);
  --alert-accent-text:  var(--uris-color-semantic-danger);
}

/* ── Base structure ─────────────────────────────────────────────────────── */
.alert {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-1);
  /* stripe(4px) + gap(spacing.4) = 20px start, 16px other sides */
  padding: var(--uris-spacing-4);
  padding-inline-start: calc(var(--uris-component-alert-border-width) + var(--uris-spacing-4));
  background-color: var(--uris-color-semantic-surface);
  border: 1px solid var(--uris-color-semantic-border);
  border-radius: var(--uris-radius-md);
  font-family: var(--uris-font-family-body);
  -webkit-font-smoothing: antialiased;
}

/* Colored accent stripe — flush with left edge, corners follow card radius */
.alert::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--uris-component-alert-border-width);
  border-start-start-radius: var(--uris-radius-md);
  border-end-start-radius: var(--uris-radius-md);
  background-color: var(--alert-accent);
}

/* Right padding when dismiss button present */
.alert:has(.alert__dismiss) {
  padding-inline-end: calc(var(--uris-spacing-4) + 20px + var(--uris-spacing-3));
}

/* ── Type label (ІНФОРМАЦІЯ / ГОТОВО / УВАГА / ПОМИЛКА) ─────────────────── */
.alert__type {
  display: flex;
  align-items: center;
  gap: var(--uris-spacing-1);
  font-size: var(--uris-text-xs-size);
  font-weight: var(--uris-font-weight-medium);
  line-height: var(--uris-text-xs-line);
  letter-spacing: var(--uris-font-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--alert-accent-text);
}

/* ── Type icon (16×16, aria-hidden, decorative) ──────────────────────────── */
.alert__icon {
  flex-shrink: 0;
  width: var(--uris-component-icon-size-sm);
  height: var(--uris-component-icon-size-sm);
}

/* ── Title ──────────────────────────────────────────────────────────────── */
.alert__title {
  display: block;
  font-size: var(--uris-text-base-size);
  font-weight: var(--uris-font-weight-bold);
  line-height: var(--uris-text-base-line);
  color: var(--uris-color-semantic-text);
  margin: 0;
}

/* ── Body text ──────────────────────────────────────────────────────────── */
.alert__text {
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
  color: var(--uris-color-semantic-text);
  margin: 0;
}

/* When alert has only text (no title) — slightly smaller top spacing */
.alert__type + .alert__text {
  margin-block-start: var(--uris-spacing-1);
}

/* ── Action buttons row ─────────────────────────────────────────────────── */
.alert__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--uris-spacing-2);
  margin-block-start: var(--uris-spacing-3);
}

/* ── Dismiss button ─────────────────────────────────────────────────────── */
.alert__dismiss {
  position: absolute;
  inset-block-start: var(--uris-spacing-3);
  inset-inline-end: var(--uris-spacing-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: var(--uris-radius-sm);
  background: transparent;
  color: var(--uris-color-semantic-text-muted);
  cursor: pointer;
  opacity: 0.7;
  transition:
    opacity     var(--uris-duration-fast) var(--uris-ease-default),
    background  var(--uris-duration-fast) var(--uris-ease-default),
    outline     var(--uris-duration-fast) var(--uris-ease-default);
}

.alert__dismiss svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.alert__dismiss:hover {
  opacity: 1;
  background-color: var(--uris-color-semantic-surface-hover);
}

.alert__dismiss:focus-visible {
  opacity: 1;
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: 1px;
}

.alert__dismiss:active {
  opacity: 1;
  background-color: var(--uris-color-semantic-surface-active);
}

/* ── Collapse animation (added by JS during close) ─────────────────────── */
.alert--collapsing {
  overflow: hidden;
  transition:
    height      var(--uris-duration-normal) var(--uris-ease-default),
    opacity     var(--uris-duration-normal) var(--uris-ease-default),
    margin      var(--uris-duration-normal) var(--uris-ease-default),
    padding     var(--uris-duration-normal) var(--uris-ease-default);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Note — compact inline callout (document context, form hints)
   Відмінність від .alert: компактніша, type+title в один рядок
   ═══════════════════════════════════════════════════════════════════════════ */

.note {
  --alert-accent:       var(--uris-color-semantic-accent);
  --alert-accent-text:  var(--uris-color-semantic-accent);
}
.note-info {
  --alert-accent:       var(--uris-color-semantic-accent);
  --alert-accent-text:  var(--uris-color-semantic-accent);
}
.note-success {
  --alert-accent:       var(--uris-color-semantic-success);
  --alert-accent-text:  var(--uris-color-semantic-success-text);
}
.note-warning {
  --alert-accent:       var(--uris-color-semantic-warning);
  --alert-accent-text:  var(--uris-color-semantic-warning);
}
.note-danger {
  --alert-accent:       var(--uris-color-semantic-danger);
  --alert-accent-text:  var(--uris-color-semantic-danger);
}

.note {
  display: flex;
  flex-direction: column;
  gap: var(--uris-spacing-1);
  padding-block: var(--uris-spacing-3);
  padding-inline: var(--uris-spacing-4);
  border-inline-start: var(--uris-component-alert-note-border-width) solid var(--alert-accent);
  font-family: var(--uris-font-family-body);
  -webkit-font-smoothing: antialiased;
}

/* Compact heading row: type label + title on same line */
.note__head {
  display: flex;
  align-items: baseline;
  gap: var(--uris-spacing-2);
  flex-wrap: wrap;
}

.note__type {
  flex-shrink: 0;
  font-size: var(--uris-text-xs-size);
  font-weight: var(--uris-font-weight-medium);
  line-height: var(--uris-text-xs-line);
  letter-spacing: var(--uris-font-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--alert-accent-text);
}

.note__title {
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-bold);
  line-height: var(--uris-text-sm-line);
  color: var(--uris-color-semantic-text);
}

.note__text {
  font-size: var(--uris-text-sm-size);
  font-weight: var(--uris-font-weight-light);
  line-height: var(--uris-text-sm-line);
  color: var(--uris-color-semantic-secondary);
  margin: 0;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .alert__dismiss,
  .alert--collapsing {
    transition: none;
  }
}