* + .banner,
:not(* + .banner) .banner:first-of-type {
  margin-top: var(--spacing-base);
}

.banner:has(+ *),
:not(* + .banner) .banner:last-of-type {
  margin-bottom: var(--spacing-base);
}

.banner {
  padding: var(--spacing-md);
  border: 1px solid;
  border-radius: var(--border-radius-slight);

  & p {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    margin: 0;

    a {
      color: var(--text-color);
    }

    & > svg {
      display: inline;
      vertical-align: middle;
      height: var(--sizing-lg);
      width: var(--sizing-lg);
      margin-right: var(--spacing-sm);
    }
  }

  &.error,
  &.github,
  &.npm,
  &.old-post,
  &.rss,
  &.warning {
    &.error { --banner-accent-color: var(--error); }
    &.github { --banner-accent-color: var(--brand-github); }
    &.npm { --banner-accent-color: var(--brand-npm); }
    &.old-post { --banner-accent-color: var(--gray-dark); }
    &.rss { --banner-accent-color: var(--brand-rss); }
    &.warning { --banner-accent-color: var(--warning); }

    border-color: var(--banner-accent-color);

    & p a:hover,
    & p a:active,
    & p a:focus {
      color: var(--banner-accent-color);
    }

    & svg {
      stroke: var(--banner-accent-color);
    }
  }
}