@import "./mixin.less";

.toast-list-container {
  .flex(column, flex-start, flex-end);
  @apply fixed top-2 right-4 z-1000 max-h-full;

  > .toast-wrapper {
    .flex(column, flex-start, flex-start);
    @apply relative left-full invisible text-base cursor-pointer shadow 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 leading-6;
        max-width: 240px;
      }
    }
  }
}
