@layer components {
  snack-bar {
    @apply bg-inverse-surface text-surface elevation-3 z-snackbar text-labelLarge mb-safe fixed start-4 end-4 bottom-32 flex min-h-12 flex-shrink translate-y-8 transform-gpu flex-wrap items-end justify-end gap-4 rounded-md px-4 py-2 opacity-0 transition-all duration-200 ease-out select-none md:start-auto md:max-w-sm lg:bottom-12;

    &[open] {
      @apply pointer-events-auto opacity-100 ease-in;
    }

    > span {
      @apply grow py-2;
    }

    > div {
      @apply text-bodyMedium flex justify-end gap-2 rounded-full;

      & > * {
        @apply cursor-pointer rounded-full p-2;
      }
    }

    .action-button {
      @apply state-inverse-primary;
    }

    .close-button {
      @apply state-surface;
    }
  }
}