@import "mixins/mixins";

@include b(alert) {
  width: 400px;
  // height: 40px;
  padding: 9px 12px;
  box-sizing: border-box;
  // border-radius: $--alert-border-radius;
  border-radius: $--border-radius-medium;
  position: relative;
  background-color: $--color-white;
  //font-family: PingFangSC-Regular, PingFang SC;
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  transition: opacity .2s;
  margin: 0;
  &.is-big {
    align-items: flex-start;
    padding: 16px 16px;

    >.el-alert__icon.is-big {
      margin-top: 2px;
      padding: 0;
    }

    .el-alert__title {
      font-size: $--font-size-title-1;
      font-weight: $--font-weight-500;
      color: $--color-text-regular;
      margin-bottom: 4px;
    }
    .el-alert__description {
      color: $--color-text-secondary;
      font-size: $--font-size-body-3;
      font-weight: $--font-weight-400;
      line-height: 21px;
    }
  }
  // ui让修改为单行40px！！！
  &.is-signle{
    padding: 9px 16px;
    >.el-alert__icon.is-big {
      margin-top: 3px;
      padding: 0;
    }
    .el-alert__description {
      line-height: 22px;
    }
  }
  .el-alert__title {
    font-size: $--font-size-body-3;
    line-height: 24px;
  }
  .has-title{
    top: 14px !important;
    margin-top: 4px !important;
  }
  .has-title__description{
    margin-right: 20px !important;
  }
  .el-alert__action{
    font-size: $--font-size-body-3;
    color: $--primary-6;
  }
  @include when(light) {
    .el-alert__closebtn {
      color: $--color-text-placeholder;
    }
  }

  @include when(dark) {
    .el-alert__closebtn {
      color: $--color-white;
    }

    .el-alert__description {
      color: $--color-white;
    }
  }

  @include when(center) {
    justify-content: center;
  }

  @include m(success) {
    &.is-light {
      background: $--success-1;
      // border-radius: 4px;
      border-radius: $--border-radius-medium;
      color: $--color-text-secondary;

      .el-alert__description {
        color: $--color-text-2;
      }
    }

    >.el-icon-success {
      color: $--icon-success;
      font-size: $--font-size-title-1;
    }

    &.is-dark {
      background-color: $--color-success;
      color: $--color-white;
    }
  }

  @include m(info) {
    &.is-light {
      color: $--color-text-secondary;
      background: $--primary-1;
      // border-radius: 4px;
      border-radius: $--border-radius-medium;
    }

    >.el-icon-info {
      color:$--color-primary;
      font-size: $--font-size-title-1;
    }

    &.is-dark {
      background-color: $--color-info;
      color: $--color-white;
    }

    .el-alert__description {
      color: $--color-info;
    }
  }

  @include m(warning) {
    &.is-light {
      background: $--warning-light-bg;
      // border-radius: 4px;
      border-radius: $--border-radius-medium;
      color: $--color-text-secondary;

      .el-alert__description {
        color: $--color-text-2;
      }
    }

    >.el-icon-warning {
      color: $--warning-6;
      font-size: $--font-size-title-1;
    }

    &.is-dark {
      background-color: $--color-warning;
      color: $--color-white;
    }
  }

  @include m(error) {
    &.is-light {
      background: $--danger-1;
      // border-radius: 4px;
      border-radius: $--border-radius-medium;
      color: $--color-text-2;

      .el-alert__description {
        color: $--color-bg-6;
      }
    }

    >.el-icon-error {
      color: $--danger-6;
      font-size: $--font-size-title-1;
    }

    &.is-dark {
      background-color: $--color-danger;
      color: $--color-white;
    }
  }

  @include e(content) {
    // display: table-cell;
    //padding: 0 8px;
    padding-right: 0;
  }

  @include e(icon) {
    font-size: $--font-size-title-1;
    width: $--font-size-title-1;
    height: $--font-size-title-1;
    margin-right: 8px;

    // @include when(big) {
    //   font-size: $--alert-icon-large-size;
    //   width: $--alert-icon-large-size;
    // }
  }

  @include e(title) {
    font-size: $--alert-title-font-size;
    line-height: 18px;

    @include when(bold) {
      font-weight: $--font-weight-700;
    }
  }

  & .el-alert__description {
    font-size: $--alert-description-font-size;
    // width: 344px;
    // height: 44px;
    font-weight: $--font-weight-400;
    color: $--color-text-secondary;
    line-height: 24px;
    margin: 0;
    overflow: hidden;
  }

  @include e(closebtn) {
    font-size: $--font-size-title-1 ;
    opacity: 1;
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
    width: $--font-size-title-1;
    height: $--font-size-title-1;
    &:focus, &:hover{
      border-radius: $--border-radius-circle !important;
      background: $--color-secondary !important;
    }


    @include when(customed) {
      font-style: normal;
      font-size: $--alert-close-customed-font-size;
      top: 12px;
      width: auto;
    }
  }

  @include e(operate-btn) {
    color: $--primary-6 !important;
    line-height: 22px !important;
    font-size: $--font-size-body-3 !important;
    &:hover{
      cursor: pointer;
    }
  }
}
.el-alert-fade-enter,
.el-alert-fade-leave-active {
  opacity: 0;
}