/**
 * Failed to minify the file using clean-css v5.3.3. Serving the original version.
 * Original file: /npm/toast-queue@1.0.0/dist/presets/stacked.css
 *
 * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
 */
@layer toast-queue {
  toast-queue {
    --tq-stack-z-base: 1000;

    [data-part="group"] {
      display: grid;
      grid-auto-flow: row;
    }

    [data-part="item"] {
      height: fit-content;

      /* Topmost item (--tq-item-index: 0) sits highest; each item behind it
        drops one z-index step, however many are visible. */
      z-index: calc(var(--tq-stack-z-base) - var(--tq-item-index, 0));
    }

    &[data-position^="top"]:not([data-active]) [data-part="item"] {
      margin-block-start: calc(var(--tq-item-index, 0) * 10px);
    }

    &[data-position^="bottom"]:not([data-active]) [data-part="item"] {
      margin-block-start: calc(var(--tq-item-index, 0) * -10px);
    }

    &:not([data-active]) [data-part="item"]:not(:first-child) {
      pointer-events: none;
    }

    &:not([data-active]) [data-part="item"] {
      grid-area: 1 / 1;
      scale: calc(1 - (var(--tq-item-index, 0) * 0.05));
    }

    /**
     * The first hidden item gets a small preview as a hint
     * that another toast is queued behind the stack.
     */
    &[data-position]:not([data-active]) [data-part="item"][data-peek] {
      display: initial;
      scale: 0.8;
      opacity: 0;
    }
  }

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

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

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

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

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

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

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

  @keyframes tq-stacked-enter {
    from {
      translate: var(--tq-slide-x) var(--tq-slide-y);
      opacity: 0;
    }
  }

  @keyframes tq-stacked-exit {
    to {
      translate: var(--tq-slide-x) var(--tq-slide-y);
      opacity: 0;
    }
  }
}