@layer components {
  @keyframes notification-countdown {
    from { width: 100%; }
    to   { width: 0; }
  }

  .notification-enter {
    @apply transform ease-out duration-300 transition;
  }

  .notification-enter-from {
    @apply translate-y-2 opacity-0;
  }

  .notification-enter-to {
    @apply translate-y-0 opacity-100;
  }

  @screen sm {
    .notification-enter-from {
      @apply translate-y-0 translate-x-2;
    }
    .notification-enter-to {
      @apply translate-x-0;
    }
  }

  .notification-leave {
    @apply transition ease-in duration-100;
  }

  .notification-leave-from {
    @apply opacity-100;
  }

  .notification-leave-to {
    @apply opacity-0;
  }
}