.p-message {
  @apply rounded-md outline outline-1;
}

.p-message-content {
  @apply flex h-full items-center gap-2 px-3 py-2;
}

.p-message-icon {
  @apply flex-shrink-0;
}

.p-message-close-button {
  @apply relative ms-auto flex h-7 w-7 flex-shrink-0 cursor-pointer select-none items-center justify-center overflow-hidden rounded-full border-none bg-transparent p-0 text-inherit transition-colors duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2;
}

.p-message-info {
  @apply bg-blue-50/95 text-blue-600 shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)] outline-blue-200 dark:bg-blue-500/15 dark:text-blue-500 dark:outline-blue-700/35;
}

.p-message-info .p-message-close-button {
  @apply hover:bg-blue-100 focus-visible:outline-blue-600 dark:hover:bg-white/5 dark:focus-visible:outline-blue-500;
}

.p-message-info.p-message-outlined {
  @apply text-blue-500 outline-blue-500 dark:text-blue-600 dark:outline-blue-600;
}

.p-message-info.p-message-simple {
  @apply text-blue-500 dark:text-blue-600;
}

.p-message-success {
  @apply bg-green-50/95 text-green-600 shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)] outline-green-200 dark:bg-green-500/15 dark:text-green-500 dark:outline-green-700/35;
}

.p-message-success .p-message-close-button {
  @apply hover:bg-green-100 focus-visible:outline-green-600 dark:hover:bg-white/5 dark:focus-visible:outline-green-500;
}

.p-message-success.p-message-outlined {
  @apply text-green-500 outline-green-500 dark:text-green-600 dark:outline-green-600;
}

.p-message-success.p-message-simple {
  @apply text-green-500 dark:text-green-600;
}

.p-message-warn {
  @apply bg-yellow-50/95 text-yellow-600 shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)] outline-yellow-200 dark:bg-yellow-500/15 dark:text-yellow-500 dark:outline-yellow-700/35;
}

.p-message-warn .p-message-close-button {
  @apply hover:bg-yellow-100 focus-visible:outline-yellow-600 dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500;
}

.p-message-warn.p-message-outlined {
  @apply text-yellow-500 outline-yellow-500 dark:text-yellow-600 dark:outline-yellow-600;
}

.p-message-warn.p-message-simple {
  @apply text-yellow-500 dark:text-yellow-600;
}

.p-message-error {
  @apply bg-red-50/95 text-red-600 shadow-[0px_4px_8px_0px_theme(colors.red.500/0.04)] outline-red-200 dark:bg-red-500/15 dark:text-red-500 dark:outline-red-700/35;
}

.p-message-error .p-message-close-button {
  @apply hover:bg-red-100 focus-visible:outline-red-600 dark:hover:bg-white/5 dark:focus-visible:outline-red-500;
}

.p-message-error.p-message-outlined {
  @apply text-red-500 outline-red-500 dark:text-red-600 dark:outline-red-600;
}

.p-message-error.p-message-simple {
  @apply text-red-500 dark:text-red-600;
}

.p-message-secondary {
  @apply bg-surface-100 text-surface-600 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)] outline-surface-200 dark:bg-surface-800 dark:text-surface-300 dark:outline-surface-700;
}

.p-message-secondary .p-message-close-button {
  @apply hover:bg-surface-200 focus-visible:outline-surface-600 dark:hover:bg-surface-700 dark:focus-visible:outline-surface-300;
}

.p-message-secondary.p-message-outlined {
  @apply text-surface-500 outline-surface-500 dark:text-surface-600 dark:outline-surface-600;
}

.p-message-secondary.p-message-simple {
  @apply text-surface-500 dark:text-surface-600;
}

.p-message-contrast {
  @apply bg-surface-900 text-surface-50 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.04)] outline-surface-950 dark:bg-surface-0 dark:text-surface-950 dark:outline-surface-100;
}

.p-message-contrast .p-message-close-button {
  @apply hover:bg-surface-800 focus-visible:outline-surface-50 dark:hover:bg-surface-100 dark:focus-visible:outline-surface-950;
}

.p-message-contrast.p-message-outlined {
  @apply text-surface-950 outline-surface-950 dark:text-surface-0 dark:outline-surface-0;
}

.p-message-contrast.p-message-simple {
  @apply text-surface-950 dark:text-surface-0;
}

.p-message-text {
  @apply text-base font-medium;
}

.p-message-icon {
  @apply h-[1.125rem] w-[1.125rem] text-lg;
}

.p-message-enter-from {
  @apply opacity-0;
}

.p-message-enter-active {
  @apply transition-opacity duration-300;
}

.p-message.p-message-leave-from {
  @apply max-h-[1000px];
}

.p-message.p-message-leave-to {
  @apply m-0 max-h-0 opacity-0;
}

.p-message-leave-active {
  @apply overflow-hidden [transition:max-height_0.45s_cubic-bezier(0,1,0,1),opacity_0.3s,margin0.3s];
}

.p-message-leave-active .p-message-close-button {
  @apply opacity-0;
}

.p-message-sm .p-message-content {
  @apply px-2.5 py-[0.375rem];
}

.p-message-sm .p-message-text {
  @apply text-sm;
}

.p-message-sm .p-message-icon {
  @apply h-4 w-4 text-sm;
}

.p-message-sm .p-message-close-icon {
  @apply h-3.5 w-3.5 text-sm;
}

.p-message-lg .p-message-content {
  @apply px-3.5 py-2.5;
}

.p-message-lg .p-message-text {
  @apply text-xl;
}

.p-message-lg .p-message-icon {
  @apply h-5 w-5 text-xl;
}

.p-message-lg .p-message-close-icon {
  @apply h-[1.125rem] w-[1.125rem] text-xl;
}

.p-message-outlined {
  @apply bg-transparent outline outline-1;
}

.p-message-simple {
  @apply bg-transparent shadow-none outline-none;
}

.p-message-simple .p-message-content {
  @apply p-0;
}

.p-message-outlined .p-message-close-button:hover,
.p-message-simple .p-message-close-button:hover {
  @apply bg-transparent;
}
