@layer components {
  .singlestage-toaster {
    @apply bottom-0
    fixed
    flex
    flex-col-reverse
    p-4
    pointer-events-none
    sm:max-w-90
    w-full
    z-50;

    &:not([data-align]),
    &[data-align="end"] {
      @apply right-0;
    }

    &[data-align="start"] {
      @apply left-0;
    }

    &[data-align="center"] {
      @apply -translate-x-1/2
      left-1/2;
    }

    .singlestage-toast {
      @apply animate-[toast-up_0.3s_ease-in-out]
      duration-300
      ease-in-out
      grid
      grid-rows-[1fr]
      mt-4
      pointer-events-auto
      transition-[grid-template-rows,opacity,margin]
      w-full;

      .singlestage-toast-content {
        @apply bg-popover
        border
        flex
        gap-2.5
        items-center
        overflow-hidden
        p-3
        rounded-lg
        shadow-lg
        text-[13px]
        text-popover-foreground;

        svg {
          @apply shrink-0
          size-4;
        }

        section {
          h2 {
            @apply font-medium
            tracking-tight;
          }
          p {
            @apply text-muted-foreground;
          }
        }

        footer {
          @apply flex
          flex-col
          gap-2
          ml-auto;

          [data-toast-action],
          [data-toast-cancel] {
            @apply h-6
            px-2.5
            text-xs;
          }
        }
      }

      &[aria-hidden="true"] {
        @apply border-0
        grid-rows-[0fr]
        m-0
        opacity-0
        overflow-hidden
        p-0;

        .singlestage-toast-content {
          @apply border-0;
        }
      }
    }
  }
}

@keyframes toast-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
}
