@import '../../style/';

.hiui-toast {
  position: fixed;
  top: 50px;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: _border_radius;
  color: #fff;
  z-index: 99999;
  letter-spacing: -.2em;
  box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .5);
  overflow: hidden;

  &-default {
    background-color #666;

    .hiui-icon {
      color: #666;
    }
  }

  &-primary {
    background-color: _blue;

    .hiui-icon {
      color: _blue;
    }
  }

  &-error {
    background-color: _red;

    .hiui-icon {
      color: _red;
    }
  }

  &-warning {
    color: #333;
    background-color: _yellow;

    .hiui-icon {
      color: _yellow;
    }
  }

  &-success {
    background-color: _green;

    .hiui-icon {
      color: _green;
    }
  }

  .hiui-icon {
    display: inline-block;
    color: #fff;
    height: 100%;
    margin-left: 10px;
  }
}

.hiui-toast-content {
  display: inline-block;
  padding: 8px 10px;
  letter-spacing: 0;
}

.hiui_fade-enter-active, .hiui_fade-leave-active {
  transition: all .3s;
}
.hiui_fade-enter, .hiui_fade-leave-to {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
}