.banner {
  --env-banner-bg: var(--color-bg-toolbar);
  --env-banner-fg: var(--color-fg-default);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: var(--spacing-2xs);
  padding-inline: var(--spacing-md);
  background-color: var(--env-banner-bg);
  color: var(--env-banner-fg);
  letter-spacing: var(--letter-spacing-wide);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  line-height: var(--line-height-normal);
  user-select: none;
}

.banner[data-severity='success'] {
  --env-banner-bg: var(--color-status-success);
  --env-banner-fg: var(--color-fg-on-status-success);
}

.banner[data-severity='warning'] {
  --env-banner-bg: var(--color-status-warning);
  --env-banner-fg: var(--color-fg-on-status-warning);
}

.banner[data-severity='error'] {
  --env-banner-bg: var(--color-status-error);
  --env-banner-fg: var(--color-fg-on-status-error);
}

.banner[data-severity='info'] {
  --env-banner-bg: var(--color-status-info);
  --env-banner-fg: var(--color-fg-on-status-info);
}

.banner[data-severity='brand'] {
  --env-banner-bg: var(--color-brand);
  --env-banner-fg: var(--color-fg-on-brand);
}

.banner[data-severity='accent'] {
  --env-banner-bg: var(--color-accent);
  --env-banner-fg: var(--color-fg-on-accent);
}

.banner[data-severity='neutral'] {
  --env-banner-bg: var(--color-neutral);
  --env-banner-fg: var(--color-fg-default);
}