/* Inline alert/notice banner. Pair the base with one tone:
 *
 *   <div class="banner success"> ... </div>
 */

.banner {
  @apply mb-4 block rounded-md border px-4 py-3 text-sm leading-5;

  &.success {
    @apply border-success bg-success-light text-success-dark;
  }

  &.info {
    @apply border-info bg-info-light text-info-dark;
  }

  &.warning {
    @apply border-warning bg-warning-light text-warning-dark;
  }

  &.danger {
    @apply border-danger bg-danger-light text-danger-dark;
  }
}