@import '../../src/scss/vars';
@import '../../src/scss/mixins';
@import '../../src/scss/animate';

.ymu-toast {
  z-index: 10000;
  position: fixed;
  left: 50%;
  display: table;
  padding: $toast-padding;
  font-size: $toast-font-size;
  line-height: $toast-line-heigth;
  color: $toast-font-color;
  text-align: center;
  background-color: $toast-bg-color;
  border-radius: $toast-border-radius;
  .ymuicon {
    font-size: $toast-icon-font-size;
  }
}

.ymu-toast--middle {
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  &-enter-active,
  &-leave-active {
    transition: all $toast-middle-type-speed ease;
  }
  &-enter,
  &-leave-to {
    opacity: 0;
  }
}

.ymu-toast--top {
  top: 0;
  transform: translate3d(-50%, 10px, 0);
  &-enter-active,
  &-leave-active {
    transition: all $toast-speed;
  }
  &-enter,
  &-leave-to {
    transform: translate3d(-50%, -110%, 0);
  }
}

.ymu-toast--bottom {
  bottom: 10px;
  transform: translate3d(-50%, 0, 0);
  &-enter-active,
  &-leave-active {
    transition: all $toast-speed;
  }
  &-enter,
  &-leave-to {
    bottom: 0;
    transform: translate3d(-50%, 100%, 0);
  }
}