@layer toast-queue {
  toast-queue {
    [data-part="group"] {
      display: flex;
    }

    /* Add new items from top */
    &:is([data-position^="top"]) [data-part="group"] {
      flex-direction: column;
    }

    /* Add new items from bottom */
    &:is([data-position^="bottom"]) [data-part="group"] {
      flex-direction: column-reverse;
    }
  }

  ::view-transition-group(.tq-item) {
    animation-duration: 0.3s;
  }

  ::view-transition-group(.tq-item.block-start) {
    --tq-slide-x: 0%;
    --tq-slide-y: -60%;
  }

  ::view-transition-group(.tq-item.block-end) {
    --tq-slide-x: 0%;
    --tq-slide-y: 60%;
  }

  ::view-transition-group(.tq-item.inline-start) {
    --tq-slide-x: -60%;
    --tq-slide-y: 0%;
  }

  ::view-transition-group(.tq-item.inline-end) {
    --tq-slide-x: 60%;
    --tq-slide-y: 0%;
  }

  ::view-transition-new(.tq-item):only-child {
    animation-name: tq-slide-in;
  }

  ::view-transition-old(.tq-item):only-child {
    animation-name: tq-slide-out;
  }

  @keyframes tq-slide-in {
    from {
      opacity: 0;
      translate: var(--tq-slide-x, 0%) var(--tq-slide-y, 0%);
      scale: 0.9;
    }
  }

  @keyframes tq-slide-out {
    to {
      opacity: 0;
      translate: var(--tq-slide-x, 0%) var(--tq-slide-y, 0%);
      scale: 1.1;
    }
  }
}