.b3-snackbar {
  margin-bottom: 16px;
  position: relative;
  transition: transform 256ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
  text-align: right;

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

  &s {
    position: fixed;
    right: 12px;
    top: 22px;
    z-index: 503;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    transform: translate3d(calc(20vw + 48px), 0, 0);
    transition: transform 0.15s cubic-bezier(0.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 {
    background-color: var(--b3-theme-error);
    color: var(--b3-theme-on-error);
  }

  &__content {
    line-height: 20px;
    border-radius: 4px;
    padding: 8px 16px;
    color: var(--b3-theme-on-primary);
    font-size: inherit;
    background-color: var(--b3-theme-primary);
    box-sizing: border-box;
    box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
    word-break: break-word;
    max-width: 20vw;
    text-align: left;
    display: inline-block;

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

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

    ul {
      margin-left: 16px;
    }
  }

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

    &: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);
  }
}