.b3-snackbar {
  margin-bottom: 16px;
  position: relative;
  transition: transform 256ms cubic-bezier(.45, .05, .55, .95) 0ms;
  text-align: right;
  font-size: var(--b3-font-size);

  &--hide {
    transform: translate3d(calc(20vw + 48px), 0, 0);
  }

  &s {
    position: fixed;
    right: 12px;
    top: 22px;
    // 不能设置死，否则右键菜单会被遮盖 z-index: 999999;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    transform: translate3d(calc(20vw + 48px), 0, 0);
    transition: transform .15s cubic-bezier(.4, 0, 1, 1) 0ms;

    &--show {
      transform: translate3d(0, 0, 0) !important;
    }

    & > .b3-button {
      align-self: flex-end;
      margin-right: 18px;
    }

    & > .fn__flex-1 {
      padding: 0 18px 0 18px;

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }

  &--error .b3-snackbar__content {
    padding-left: 47px;

    &::after {
      content: "❗";
      position: absolute;
      left: 16px;
      top: 10px;
      font-size: 16px;
    }
  }

  &__content {
    line-height: 20px;
    border-radius: var(--b3-border-radius);
    padding: 8px 16px;
    color: var(--b3-theme-on-primary);
    font-size: inherit;
    background-color: var(--b3-tooltips-background);
    box-sizing: border-box;
    box-shadow: var(--b3-tooltips-shadow);
    word-break: break-word;
    max-width: 20vw;
    text-align: left;
    display: inline-block;

    &--close {
      padding-right: 50px;
    }

    a {
      color: var(--b3-theme-on-primary);
      text-decoration: underline;
    }

    ul {
      margin-left: 16px;
    }
  }

  &__close {
    position: absolute;
    cursor: pointer;
    height: 18px;
    width: 18px;
    color: var(--b3-theme-on-primary);
    transition: var(--b3-transition);
    right: 16px;
    top: 10px;
    box-sizing: border-box;
    opacity: .68;

    &:hover {
      opacity: 1;
    }
  }
}

@media screen and (max-width: 520px) {
  .b3-snackbars {
    top: 35px;
    right: calc(10vw - 18px);
  }

  .b3-snackbar__content {
    max-width: 80vw
  }

  .b3-snackbars {
    transform: translate3d(100vw, 0, 0);
  }
}
