@reference "../../styles/index.css";

.wrapper {
  @apply flex
    w-fit
    items-center
    rounded-full
    border
    py-1
    pr-2.5
    pl-1
    text-sm
    font-medium;

  .icon {
    @apply size-4;
  }

  .badge {
    @apply mr-2;
  }

  .message {
    @apply mr-1;
  }

  &.default {
    @apply border-brand-200
      bg-brand-100
      dark:border-brand-700
      dark:bg-neutral-900;

    .icon {
      @apply text-brand-500
        dark:text-brand-300;
    }

    .message,
    .message a:not(:hover) {
      @apply text-brand-700
        dark:text-brand-300;
    }
  }

  &.error {
    @apply border-danger-200
      bg-danger-100
      dark:border-danger-700
      dark:bg-neutral-900;

    .icon {
      @apply text-danger-500
        dark:text-danger-300;
    }

    .message,
    .message a:not(:hover) {
      @apply text-danger-700
        dark:text-danger-300;
    }
  }

  &.warning {
    @apply border-warning-200
      bg-warning-100
      dark:border-warning-700
      dark:bg-neutral-900;

    .icon {
      @apply text-warning-500
        dark:text-warning-300;
    }

    .message,
    .message a:not(:hover) {
      @apply text-warning-700
        dark:text-warning-300;
    }
  }

  &.info {
    @apply border-info-200
      bg-info-100
      dark:border-info-700
      dark:bg-neutral-900;

    .icon {
      @apply text-info-500
        dark:text-info-300;
    }

    .message,
    .message a:not(:hover) {
      @apply text-info-700
        dark:text-info-300;
    }
  }

  &.neutral {
    @apply border-neutral-200
      bg-neutral-100
      dark:border-neutral-700
      dark:bg-neutral-900;

    .icon {
      @apply text-neutral-500
        dark:text-neutral-300;
    }

    .message,
    .message a:not(:hover) {
      @apply text-neutral-700
        dark:text-neutral-300;
    }
  }
}
