.alert {
  @apply p-4 rounded-md;
}

.alert-success {
  @apply text-green-700 bg-green-50;

  svg {
    @apply text-green-400;
  }

  h3 {
    @apply text-green-800;
  }

  button.dismiss {
    @apply text-green-500 bg-green-50 hover:bg-green-100 focus:ring-green-600 focus:ring-offset-green-50;
  }
}

.alert-warning {
  @apply text-yellow-700 bg-yellow-50;

  svg {
    @apply text-yellow-400;
  }

  h3 {
    @apply text-yellow-800;
  }

  button.dismiss {
    @apply text-yellow-500 bg-yellow-50 hover:bg-yellow-100 focus:ring-yellow-600 focus:ring-offset-yellow-50;
  }
}

.alert-danger {
  @apply text-red-700 bg-red-50;

  svg {
    @apply text-red-400;
  }

  h3 {
    @apply text-red-800;
  }

  button.dismiss {
    @apply text-red-500 bg-red-50 hover:bg-red-100 focus:ring-red-600 focus:ring-offset-red-50;
  }
}


.alert-info {
  @apply text-blue-700 bg-blue-50;

  svg {
    @apply text-blue-400;
  }

  h3 {
    @apply text-blue-800;
  }

  button.dismiss {
    @apply text-blue-500 bg-blue-50 hover:bg-blue-100 focus:ring-blue-600 focus:ring-offset-blue-50;
  }
}