@import "./mixin.less";

.toast-list-container {
  @apply flex flex-col justify-start items-end fixed top-2 right-4 z-1000 max-h-full;

  > .toast-wrapper {
    @apply flex flex-col justify-start items-start relative left-full invisible text-base cursor-pointer shadow-lg rounded bg-white mt-6 py-2 px-4;
    min-width: 6em;
    transition: all 0.4s ease;

    &.showup {
      @apply left-0 visible;
    }

    &.destory {
      @apply invisible;
      left: calc(100% + 32px);
    }

    > .toast-container {
      > .content-text {
        @apply text-sm whitespace-pre-wrap break-all leading-6 max-w-xs;
      }
    }
  }
}