.nwp-announcement-bar {
  background: black;
  text-align: center;
}

.nwp-announcement-bar__messages {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.nwp-announcement-bar__message {
  grid-area: 1/1;
  visibility: hidden;
  opacity: 0;
  transition-property: opacity, visibility;
  transition-duration: 700ms;
  transition-behavior: allow-discrete;
  padding: .85rem 1rem;
  color: white;
}

.nwp-announcement-bar__message.--active {
  visibility: visible;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}

.nwp-announcement-bar__message a {
  text-decoration: none;
  color: inherit;
}