.alert-banner {
  align-items: center;
  padding-block: 0.625rem; /* 10px Missing token */
  width: 100%;
  z-index: 9999;
  position: relative;
}

.alert-low {
  background: var(--color-primary-dark-teal);
  color: var(--color-white);
}

.alert-medium {
  background: var(--color-alert-functional-warning);
  color: var(--color-primary-deep-blue);
}

.alert-high {
  background: #CD0016; /* Missing Token */
  color: var(--color-white);
}

.alert-low a,
.alert-high a {
  color: var(--color-primary-light-teal);
}

.alert-medium a {
  color: var(--color-secondary-mgb-blue);
}

.alert-banner > .cluster > :nth-child(2) div a {
  font-weight: var(--typography-weight-medium);
}

.alert-banner svg [stroke] {
  stroke: currentcolor;
}

.alert-banner svg [fill] {
  fill: currentcolor;
}

.alert-banner > .cluster {
  align-items: flex-start;
  flex-wrap: nowrap;
}

.alert-banner > .cluster > :nth-child(1) svg {
  inline-size: 20px;
  block-size: 20px;
}

.alert-banner > .cluster > :nth-child(2) p {
  display: inline;
  margin: 0;
}

.alert-banner > .cluster > :nth-child(2) strong {
  font-weight: var(--typography-weight-semi-bold);
}

.alert-banner > .cluster > :nth-child(2) div,
.alert-banner span {
  display: inline;
  margin: 0;
  color: inherit;
  font-family: var(--typography-family-body-sans);
  font-size: var(--typography-font-size-headlines-16);
  line-height: var(--typography-line-height-lh-24);
  font-weight: var(--typography-weight-regular);
  letter-spacing: var(--typography-letter-spacing-0);
}

.alert-banner > .cluster > .alert-close {
  appearance: none;
  border: 0;
  background: transparent;
  margin-inline-start: auto;
  padding: var(--spacing-base-space-050);
  cursor: pointer;
  color: inherit;
}

.alert-banner > .cluster > .alert-close svg {
  inline-size: var(--spacing-base-space-200);
  block-size: var(--spacing-base-space-200);
}

.alert-banner > .cluster > .alert-close:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: 2px;
}

.link-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-base-space-050);
}

.is-sticky-banner {
  position: sticky;
  top: 0;
  z-index: 100000;
}

@media (width <= 900px) {
  .alert-banner {
    padding-block: var(--spacing-base-space-300) var(--spacing-base-space-200);
  }

  p a.link-icon {
    display: flex;
    padding-block: var(--spacing-base-space-100);
  }

  .alert-banner > .cluster {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      'icon  .    close'
      'text  text text';
    align-items: start;
    gap: var(--spacing-base-space-0) var(--spacing-base-space-100);
  }

  .alert-banner > .cluster > :nth-child(1) {
    grid-area: icon;
  }

  .alert-banner > .cluster > :nth-child(2) {
    grid-area: text;
  }

  .alert-banner > .cluster > .alert-close {
    grid-area: close;
    margin-inline-start: 0;
    place-self: start end;
  }
}
