.c-toast {
  @apply relative flex gap-2 rounded-md bg-white pl-3 pr-6 shadow-sm;

  &:hover .c-toast-close {
    @apply block;
  }

  &.c-toast-with-message {
    @apply py-3;

    & .c-toast-title {
      @apply font-bold;
    }
  }

  &.c-toast-title-only {
    @apply items-center py-2;

    & .c-toast-title {
      @apply font-medium;
    }
  }
}

.c-toast-success {
  @apply border border-solid border-cyan-300-600 bg-cyan-100-800 text-green-600-300;
}

.c-toast-error {
  @apply border border-solid border-pink-200-700 bg-pink-100-800 text-pink-700-200;
}

.c-toast-warning {
  @apply border border-solid border-orange-200-700 bg-orange-100-800 text-green-600-300;
}

.c-toast-info {
  @apply border border-solid border-purple-200-700 bg-white text-green-600-300;
}

.c-toast-title {
  @apply text-sm;
}

.c-toast-message {
  @apply text-[13px] font-medium leading-4;
}

.c-toast-close {
  @apply absolute right-1 top-1;
  /* Can not use hidden - The `hidden` class does not exist. If `hidden` is a custom class */
  display: none;
}
