.toaster-container {
  position: fixed;
  top: 20px;
  right: 40px;
  border: 1.5px solid transparent;
  border-radius: 8px;
  padding: 16px;
  width: 360px;
  @include display-flex(space-between, flex-start);
  z-index: 99999999;
  transform: translateX(100%);
  background: $white;
  box-shadow: $toaster-shadow;
  opacity: 0;

  @include respond(phone) {
    right: 10px;
    width: 95%;
    padding: 8px;
  }

  &.open,
  &.closed {
    transition: all ease-in-out 0.4s;
  }
  &.closed {
    pointer-events: none;
  }

  &.open {
    transform: translateX(0);
    opacity: 1;
  }

  &.toaster {
    &-success {
      border-color: $primary;

      .toaster-icon {
        svg {
          path {
            fill: $primary;
          }
        }
      }
    }

    &-error {
      border-color: $critical;
    }

    &-warning {
      border-color: $warning;
    }

    &-info {
      border-color: $info;
    }
  }

  .toaster-icon {
    width: 20px;
    flex: 0 0 20px;
    @include display-flex(flex-start, flex-start);

    svg {
      width: 100%;
      height: auto;
    }
  }

  .toaster-body {
    margin: 0 16px;

    &__title {
      line-height: 1;
      margin-bottom: 10px;
    }

    &__action {
      margin-top: 16px;
    }
  }

  .toaster-close {
    @include display-flex(center, center);
    width: 12px;
    cursor: pointer;
  }
}