.p-message {
  @apply rounded-md outline-none outline-0;

  &-content {
    @apply flex items-center gap-4 py-3 px-4 h-full;
  }

  &-icon {
    @apply shrink-0 text-body-1 w-6 h-6;
  }

  &-close-button {
    @apply flex items-center justify-center shrink-0 ms-auto overflow-hidden relative w-8 h-8 rounded-full bg-transparent transition outline-none cursor-pointer select-none;

    &:focus-visible {
      @apply outline-none outline-0;
    }

    .p-message-info & { }

    .p-message-success & { }

    .p-message-warn & { }

    .p-message-error & { }

    .p-message-secondary & { }

    .p-message-contrast & { }
  }

  &-close-icon {
    @apply text-body-2 w-6 h-6;
  }

  &-info {
    @apply bg-info text-white outline-none;

    &.p-message-outlined { }

    &.p-message-simple { }
  }

  &-success {
    @apply bg-success text-white outline-none;

    &.p-message-outlined { }

    &.p-message-simple { }
  }

  &-warn {
    @apply bg-warning text-gray-90 outline-none;

    &.p-message-outlined { }

    &.p-message-simple { }
  }

  &-error {
    @apply bg-danger text-white outline-none;

    &.p-message-outlined { }

    &.p-message-simple { }
  }

  &-secondary {
    @apply bg-secondary text-white outline-none;

    &.p-message-outlined { }

    &.p-message-simple { }
  }

  &-contrast {
    @apply bg-gray-90 text-white outline-none;

    &.p-message-outlined { }

    &.p-message-simple { }
  }

  &-text {
    @apply text-body-2 font-normal;
  }

  &-enter-from {
    @apply opacity-0;
  }

  &-enter-active {
    @apply transition-opacity duration-200;
  }

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

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

  &-leave-active {
    @apply overflow-hidden transition;

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

  &-sm {
    & .p-message-content {
      @apply p-2;
    }

    & .p-message-text {
      @apply text-body-2;
    }

    & .p-message-icon {
      @apply text-body-1 w-4 h-4;
    }

    &.p-message-close-icon {
      @apply text-body-2 w-4 h-4;
    }
  }

  &-lg {
    & .p-message-content {
      @apply p-6;
    }

    & .p-message-text {
      @apply text-body-1;
    }

    & .p-message-icon {
      @apply text-h5 w-8 h-8;
    }

    &.p-message-close-icon {
      @apply text-body-2 w-6 h-6;
    }
  }

  &-message-outlined {
    @apply bg-transparent outline-none;
  }

  &-simple {
    @apply bg-transparent outline-none;

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