@import url("/css/design_v2/color.css");
@import url("/css/design_v2/font.css");
@import url("/css/design_v2/standards.css");

.pp-alert-banner {
  position: relative;
  border-radius: var(--Radius-XS); /* 6px */
  padding: var(--Space-M); /* 16px */
  padding-right: var(--Space-XXS); /* 4px - minimal space on right */
  padding-left: calc(8px + var(--Space-XS)); /* accent width + small gap to icon - closer to left */
  background: rgba(224, 76, 38, 0.09); /* default error background */
  color: #00104E; /* --Color-Text-Navy-700 equivalent */
  font-family: var(--Font-Family-Sans);
  font-size: 16px;
  font-style: normal;
  font-weight: var(--Font-Weight-400);
  line-height: 16px; /* 100% */
  margin-bottom: var(--Space-M); /* spacing when used in modals/forms */
  white-space: nowrap; /* prevent text wrapping */
}

.pp-alert-banner__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: #E04C2617; /* lighter red with transparency */
  border-radius: var(--Radius-XS) 0 0 var(--Radius-XS); /* 6px on left corners only */
}

.pp-alert-banner__body {
  display: flex;
  align-items: center;
  gap: var(--Space-XS); /* 8px gap between icon and text - closer to left */
}

.pp-alert-banner__icon {
  flex-shrink: 0;
  font-size: 20px; /* 20px size via font-size for currentColor inheritance */
  width: 1em;
  height: 1em;
}

.pp-alert-banner__message {
  flex: 1;
}

/* Variant: Error (Red) */
.pp-alert-banner--error {
  background: rgba(224, 76, 38, 0.09); /* #E04C260D */
}

.pp-alert-banner--error .pp-alert-banner__accent {
  background: #E04C2617; /* lighter red with transparency */
}

.pp-alert-banner--error .pp-alert-banner__icon {
  color: #CB401D; /* darker red - uses currentColor */
}

/* Variant: Warning (Yellow) */
.pp-alert-banner--warning {
  background: rgba(255, 186, 22, 0.09); /* #FFBA16 with 9% opacity */
}

.pp-alert-banner--warning .pp-alert-banner__accent {
  background: var(--Color-Secondary-Yellow-500); /* #FFBA16 */
}

.pp-alert-banner--warning .pp-alert-banner__icon {
  color: var(--Color-Secondary-Yellow-500); /* uses currentColor */
}

/* Variant: Info (Blue) */
.pp-alert-banner--info {
  background: rgba(152, 204, 208, 0.09); /* #98CCD0 with 9% opacity */
}

.pp-alert-banner--info .pp-alert-banner__accent {
  background: var(--Color-Secondary-Blue-500); /* #98CCD0 */
}

.pp-alert-banner--info .pp-alert-banner__icon {
  color: var(--Color-Secondary-Blue-500); /* uses currentColor */
}

/* Variant: Success (Teal/Green) */
.pp-alert-banner--success {
  background: rgba(84, 166, 151, 0.09); /* #54A697 with 9% opacity */
}

.pp-alert-banner--success .pp-alert-banner__accent {
  background: var(--Color-Secondary-Teal-500); /* #54A697 */
}

.pp-alert-banner--success .pp-alert-banner__icon {
  color: var(--Color-Secondary-Teal-500); /* uses currentColor */
}