.localgov-alert-banner {
  --color-alert-banner: var(--color-info);
}

.localgov-alert-banner--announcement {
  --color-alert-banner: var(--color-success);
}

.localgov-alert-banner--major {
  --color-alert-banner: var(--color-danger);
}

.localgov-alert-banner--minor {
  --color-alert-banner: var(--color-warning);
}

.localgov-alert-banner {
  color: var(--color-grey-darkest);
  background-color: var(--color-white);
}

.localgov-alert-banner__container {
  display: flex;
  border: var(--border);
  border-color: var(--color-alert-banner);
}

.localgov-alert-banner {
  margin-block: var(--spacing);
}

.localgov-alert-banner__icon {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: var(--spacing-largest);
  padding-block-start: var(--spacing-smallest);
  background-color: var(--color-alert-banner);
}

.localgov-alert-banner__icon svg {
  width: var(--spacing-large);
  height: var(--spacing-large);
  fill: var(--color-white);
}

.localgov-alert-banner__inner {
  flex-grow: 1;
  padding: var(--spacing);
}

h2.localgov-alert-banner__title {
  font-size: var(--font-size-h3);
}

.localgov-alert-banner__actions {
  display: flex;
  align-items: start;
}

.localgov-alert-banner__close {
  margin: var(--spacing-smallest);
  padding: var(--spacing-smallest);
  border: none;
}

.localgov-alert-banner__close:focus,
.localgov-alert-banner__close:hover,
.localgov-alert-banner--minor .localgov-alert-banner__close:focus,
.localgov-alert-banner--minor .localgov-alert-banner__close:hover {
  background-color: var(--color-grey-lightest);
}
