/* Security Alert — Wingspay Platform Component
 * Canonical source: wingspay-site/components/security-alert/ (AD-011)
 * Spec: components/security-alert/README.md
 */

/* ---- Inline tag variant: marks a single row/item as the current one
 * ("Current session"). Purely presentational, no JS involved. ---- */
.security-alert--tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 9px;
  border-radius:20px;
  background:#EAF6EC;
  color:#2E7D42;
  font-size:11px;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
}
.security-alert--tag svg{width:11px;height:11px;flex-shrink:0;}

/* ---- Banner variant: confirms the result of an action (e.g. a Danger
 * Zone confirmation). One shared instance per page, shown/hidden and
 * re-labelled by the consuming page's own script via
 * WingspaySecurityAlert.show(...). ---- */
.security-alert--banner{
  display:none;
  align-items:flex-start;
  gap:10px;
  padding:13px 16px;
  border-radius:6px;
  font-size:13.5px;
  line-height:1.5;
  margin-bottom:20px;
}
.security-alert--banner.is-open{display:flex;}
.security-alert--banner .security-alert__icon{flex-shrink:0;width:18px;height:18px;margin-top:1px;}
.security-alert--banner .security-alert__text{flex:1;}
.security-alert--banner .security-alert__close{
  flex-shrink:0;
  background:none;
  border:none;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  padding:2px 4px;
  color:inherit;
  opacity:.6;
}
.security-alert--banner .security-alert__close:hover{opacity:1;}
.security-alert--banner .security-alert__close:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px;}

/* Variants — same three states every status/badge pattern on the
 * platform already uses (info/success/warning), no new palette. */
.security-alert--banner.is-info{background:#EEF3FB;color:#2B4C86;}
.security-alert--banner.is-success{background:#EAF6EC;color:#2E7D42;}
.security-alert--banner.is-warning{background:#FDF4E3;color:#8A5A00;}

@media (max-width:600px){
  .security-alert--banner{padding:12px 14px;}
}