@layer mp.components {

  #toast-stack {
    --toast-item-width: 400px;
    position: fixed;
    z-index: 1000;
    /*perspective: 1000px;*/

    /* Center horizontally */
    right: calc((var(--toast-item-width) / 2) + var(--wa-space-m));
    top: var(--wa-space-m);
    height: 1px;
    background: red;
    /*width: 100dvw;*/

    display: flex;
    justify-content: center;

    &:hover, &:has(.toast-item.visible:hover) {
      background: gray;

      .toast-item.visible {
        transform: translateY(calc(-1 * var(--offset-y, 0px)));
      }
    }
  }

  #toast-stack > [data-toast-stack-hover-activator] {
    position: absolute;
    top: 0;
    width: var(--toast-item-width);
    height: var(--stack-height, 0px);
    z-index: -1;
    transition: height 300ms cubic-bezier(0.21, 1.02, 0.73, 1);
    left: 50%;
    transform: translateX(-50%);
    background: rebeccapurple;

    &:hover {
      background: gray;

      .toast-item.visible {
        transform: translateY(calc(-1 * var(--offset-y, 0px)));
      }
    }
  }

  .toast-item {
    position: absolute;
    top: 0;
    width: var(--toast-item-width);
    opacity: 0;
    transform: translateY(calc(var(--index, 0) * 18px)) scale(calc(1 - (var(--index, 0) * 0.05))) translateY(100%);
    transition: all 300ms cubic-bezier(0.21, 1.02, 0.73, 1);
    z-index: calc(100 - var(--index, 0));
    display: flex;
    justify-content: center;
    min-height: 5.05rem;


    .close {
      position: relative;
      cursor: pointer;

      & wa-progress-ring {
        --size: var(--wa-form-control-height);
        --track-width: var(--wa-border-width-m);
        --indicator-width: var(--wa-border-width-m);
        --indicator-color: var(--wa-color-brand-on-normal);

        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
      }

      & wa-button:hover::part(base) {
        background-color: transparent;
      }
    }
  }

  .toast-item.visible {
    opacity: 1;
    transform: translateY(calc(var(--index, 0) * 18px)) scale(calc(1 - (var(--index, 0) * 0.05))) translateY(0);
  }

  .toast-item.exiting {
    opacity: 0;
    transform: translateY(calc(var(--index, 0) * 18px)) scale(0.95);
  }

}