@import './../common/abstracts/_mixin';
@import './../common/abstracts/variable';

@include b(toast) {
  box-sizing: border-box;
  display: inline-block;
  max-width: $-toast-max-width;
  padding: $-toast-padding;
  font-size: $-toast-fs;
  color: #fff;
  background-color: $-toast-bg;
  border-radius: $-toast-radius;
  box-shadow: $-toast-box-shadow;
  transition: all 0.2s;

  @include e(msg) {
    font-family: 'San Francisco', Rotobo, arial, 'PingFang SC', 'Noto SansCJK', 'Microsoft Yahei',
      sans-serif;
    font-size: $-toast-fs;
    line-height: 20px;
    text-align: left;
  }
  @include edeep(icon) {
    display: inline-block;
    margin-right: $-toast-icon-margin-right;
    font-size: $-toast-icon-size;
  }
  @include e(iconWrap) {
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
  }
  @include e(iconBox) {
    display: block;
    width: 100%;
    height: 100%;
  }
  @include e(iconSvg) {
    width: $-toast-icon-size;
    height: $-toast-icon-size;
    background-repeat: no-repeat;
    background-size: cover;
  }
  @include e(loading) {
    display: inline-block;
    margin-bottom: 16px;
  }
  @include m(top) {
    transform: translate3d(0, -40vh, 0);
  }
  @include m(middle) {
    transform: translate3d(0%, -4vh, 0);
  }
  @include m(bottom) {
    transform: translate3d(0, 40vh, 0);
  }
  @include m(with-icon) {
    display: inline-flex;
    align-items: center;
    min-width: $-toast-with-icon-min-width;
  }
  @include m(loading) {
    min-width: auto;
    padding: $-toast-loading-padding;
  }
}