.wui-alert {
  @apply p-4 rounded relative bg-white w-auto text-left flex;

  &-iconwrapper {
    @apply flex mr-3 justify-center items-center;
  }
    &-icon {
      @apply text-3xl select-none;
    }

  &-close {
    @apply fill-current cursor-pointer select-none text-2xl;
    @apply ml-4;

    &:hover {
      @apply text-black;
    }
  }

  &-body {
    @apply flex flex-col align-middle;
  }

    &-title {
      @apply font-bold text-lg leading-7;
    }

    &-slot {
      @apply leading-none;
    }

  &--small {
    @apply items-center;

    .wui-alert-icon {
      @apply text-3xl;
    }
  }

  &--primary {
    @apply border border-primary-400 bg-primary-100 text-primary-600;
  }

  &--neutral {
    @apply border border-neutral-400 bg-neutral-100 text-neutral-600;
  }

  &--info {
    @apply border border-info-400 bg-info-100 text-info-600;
  }

  &--success {
    @apply border border-success-400 bg-success-100 text-success-600;
  }

  &--warning {
    @apply border border-warning-400 bg-warning-100 text-warning-700;
  }

  &--danger {
    @apply border border-danger-400 bg-danger-100;
  }
}

html.dark .wui-alert {
  @apply bg-black;

  &-close {
    &:hover {
      @apply text-white;
    }
  }

  &--primary {
    @apply border-primary-800 bg-primary-900 text-primary-200;
  }

  &--neutral {
    @apply border-neutral-800 bg-neutral-900 text-neutral-200;
  }

  &--info {
    @apply border-info-800 bg-info-900 text-info-200;
  }

  &--success {
    @apply border-success-800 bg-success-900 text-success-200;
  }

  &--warning {
    @apply border-warning-800 bg-warning-900 text-warning-200;
  }

  &--danger {
    @apply border-danger-800 bg-danger-900 text-danger-200;
  }

}