.banner {
  align-items: center;
  background-color: color-mix(in srgb, var(--spruce-base-color-primary), hsl(0, 0%, 100%) 90%);
  border: var(--spruce-border-width-base) solid color-mix(in srgb, var(--spruce-base-color-primary) 25%, transparent);
  border-radius: var(--spruce-border-radius-md);
  color: var(--spruce-base-color-heading);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
}
.banner__message {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  line-height: var(--spruce-line-height-md);
  margin: 0;
}
.banner__label {
  background-color: var(--spruce-base-color-primary);
  border-radius: var(--spruce-border-radius-pill);
  color: var(--spruce-btn-color-primary-foreground);
  font-size: var(--spruce-font-size-sm);
  font-weight: 700;
  padding: 0 0.5rem;
}
.banner a {
  color: var(--spruce-base-color-heading);
  font-weight: 700;
}

:root[data-theme-mode=dark] .banner {
  background-color: color-mix(in srgb, var(--spruce-base-color-primary) 15%, transparent);
}