/* Aniyab UI — Alert
 * From Figma: Components / Alert
 *
 * Usage:
 *   <div class="ay-alert ay-alert--info" role="alert">
 *     <span class="ay-alert__icon">…</span>
 *     <span class="ay-alert__message">این یک پیام از سیستم است.</span>
 *     <button type="button" class="ay-alert__action">…</button>  <!-- optional -->
 *     <button type="button" class="ay-alert__close" aria-label="بستن">…</button>
 *   </div>
 *
 * Variants: --info (message) | --error | --success | --warning
 */

.ay-alert {
  --ay-alert-bg: var(--ay-brand-primary-paler, #EBF1FB);
  --ay-alert-border: var(--ay-info-border, #3974CD);
  --ay-alert-fg: var(--ay-text-main, #404040);
  --ay-alert-icon: var(--ay-brand-primary-light, #0545A6);

  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 6px 16px;
  background: var(--ay-alert-bg);
  border: 1px solid var(--ay-alert-border);
  border-radius: 4px;
  color: var(--ay-alert-fg);
  font-family: var(--ay-font-family, dana, IRANSansfanum, Tahoma, sans-serif);
  font-weight: 500;
  font-size: 14px;
  line-height: 28px;
}

.ay-alert--info {
  --ay-alert-bg: var(--ay-brand-primary-paler, #EBF1FB);
  --ay-alert-border: var(--ay-info-border, #3974CD);
  --ay-alert-fg: var(--ay-text-main, #404040);
  --ay-alert-icon: var(--ay-brand-primary-light, #0545A6);
}

.ay-alert--error {
  --ay-alert-bg: var(--ay-error-pale, #FFEEED);
  --ay-alert-border: var(--ay-error, #D92412);
  --ay-alert-fg: var(--ay-error-dark, #A21303);
  --ay-alert-icon: var(--ay-error-dark, #A21303);
}

.ay-alert--success {
  --ay-alert-bg: var(--ay-success-pale, #F0FEF5);
  --ay-alert-border: var(--ay-success, #129A44);
  --ay-alert-fg: var(--ay-success-dark, #0C6602);
  --ay-alert-icon: var(--ay-success-dark, #0C6602);
}

.ay-alert--warning {
  --ay-alert-bg: var(--ay-warning-pale, #FFF8E8);
  --ay-alert-border: var(--ay-warning, #D19C02);
  --ay-alert-fg: var(--ay-warning-dark, #856504);
  --ay-alert-icon: var(--ay-warning-dark, #856504);
}

.ay-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--ay-alert-icon);
}

.ay-alert__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}

.ay-alert__message {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--ay-alert-fg);
}

.ay-alert__action {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
  height: 40px;
  padding: 0 4px;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ay-text-main, #404040);
  font-family: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 28px;
  cursor: pointer;
  white-space: nowrap;
}

.ay-alert__action:hover {
  text-decoration: underline;
}

.ay-alert__action:focus-visible {
  outline: 2px solid var(--ay-alert-border);
  outline-offset: 2px;
}

.ay-alert__action-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--ay-text-secondary, #737373);
}

.ay-alert__action-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}

.ay-alert__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ay-text-main, #404040);
  cursor: pointer;
}

.ay-alert__close:hover {
  opacity: 0.75;
}

.ay-alert__close:focus-visible {
  outline: 2px solid var(--ay-alert-border);
  outline-offset: 2px;
}

.ay-alert__close svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}

/* Stack of alerts */
.ay-alert + .ay-alert {
  margin-top: 12px;
}