.#{$toast-prefix-cls} {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: $toast-zindex;
  width: auto;
  min-width: 1.2rem;
  max-width: 50%;
  padding: nth($toast-padding,1) nth($toast-padding,2);
  text-align: center;
  background: $white;
  border-radius: $toast-border-radius;
  box-shadow: $toast-box-shadow;
  transform: translate(-50%,-50%);
  @extend %text-truncate;

  &__text {
    font-size: $toast-text-font-size;
    color: $gray-9;
  }

  // 带图标
  &--with-icon {
    padding: nth($toast-icon-padding,1) nth($toast-icon-padding,2);

    .#{$toast-prefix-cls}__icon {
      display: block;
      margin-bottom: $toast-icon-margin-bottom;
      font-size: $toast-icon-font-size;

      & + .#{$toast-prefix-cls}__text {
        font-size: $toast-icon-text-font-size;
        line-height: 1;
        color: $gray-10;
      }
    }
  }

  // 成功
  &--success {
    .#{$toast-prefix-cls}__icon {
      color: $brand-success !important;
    }
  }

  // 失败
  &--error {
    .#{$toast-prefix-cls}__icon {
      color: $brand-danger !important;
    }
  }

  // 反色
  &--inverse {
    color: $white;
    background: $toast-inverse-bg;
    box-shadow: none;

    .#{$toast-prefix-cls}__icon,
    .#{$toast-prefix-cls}__text {
      color: inherit;
    }

    .#{$toast-prefix-cls}__icon + .#{$toast-prefix-cls}__text {
      color: inherit;
    }
  }

  &__type-icon {
    font-size: 60px !important;
    display: block !important;
    margin-bottom: 5px !important;
    &.loading-spanner {
      width: 60px;
      margin: 0 auto;
    }
  }
}
