.alert {
  @apply p-4 flex leading-snug;

  &--dark,
  &--black {
    @apply bg-black text-white;
  }

  &--light,
  &--grey-125 {
    @apply bg-grey-125 text-grey-300;
  }

  &--error,
  &--red-600 {
    @apply bg-red-600 text-white;
  }

  &--warning,
  &--yellow-400 {
    @apply bg-yellow-400 text-black;
  }

  &--success,
  &--green-400 {
    @apply bg-green-400 text-white;
  }

  &--info,
  &--blue-300 {
    @apply bg-blue-300 text-white;
  }

  &--faded {
    @apply bg-opacity-75;
  }
}

.alert__icon {
  @apply mr-2;
}