.x-toast {
  inline-size: min(100%, var(--x-toast-inline-size));
  block-size: var(--x-toast-block-size);
  transition: all var(--x-toast-transition-duration) var(--x-toast-transition-timing-function, var(--ease-in-out));
  position: relative;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0%;

  .flex-col-reverse & {
    justify-content: flex-end;
  }

  &[data-open] {
    margin-block: var(--x-toaster-margin-block);
  }

  &[data-open]:where(:nth-last-child(-n+3)) {
    visibility: visible;
    opacity: 100%;
  }

  &[data-closed] {
    visibility: hidden;
    opacity: 0%;
    height: 0;
    margin-block: 0;
  }
}