.toaster {
  position: fixed;
  bottom: calc(var(--d-margin) * 2);
  left: 0;
  width: 100%;
  z-index: 100;

  & ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--d-unit);

    & li {
      cursor: pointer;
      padding: var(--d-margin) calc(var(--d-margin) * 2);
      margin: 0 calc(var(--d-margin) * 3);
      color: var(--c-light);
      background: rgba(var(--c-accent-rgb), 0.4);
      border-radius: 50px;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      animation: fade-slide-in 300ms;

      &.error {
        background: rgba(190, 0, 0, 0.4);
      }

      &.exit {
        animation: fade-slide-out 300ms forwards;
      }
    }
  }
}