@import 'main';

$toast_transition: transform 300ms ease-in-out, top 100ms ease-in-out 300ms;

.toast {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  bottom: 10px;
  z-index: 1400;
  text-align: center;

  .box {
    display: inline-block;
    text-align: left;
    top: 0;
    @include transform(translateY(100%));
    @include manual-transition($toast_transition);
  }

  &.active {
    .box {
      top: 10px;
      @include transform(translateY(-10px));
    }
  }
}