@use "./mixins/mixins.scss" as *;

@include b(alert){
  --el-alert-padding: 12px 16px;
  --el-alert-title-font-size:12px;
  --el-alert-icon-size:14px;
  --el-alert-icon-large-size:14px;
  .el-alert__icon{
    align-self: start;
    padding-top: 5px;
  }

  .el-alert__content {
    .el-alert__title {
      color: var(--color-grey-8);
      font-weight: 400;
      line-height: 18px;
    }

    .el-alert__description {
      color: var(--color-grey-8);
      margin-top: unset;
      line-height: 18px;
    }
  }

  @include m(error){
    background-color: #FFF1F0;
    @include when(border){
      border: 1px solid #FFA39E;
    }
  }

  @include m(info){
    background-color: var(--color-blue-1);
    .el-alert__icon {
      color: var(--color-blue-6);
    }
    @include when(border){
      border: 1px solid #9CCCFF;
    }
  }

  @include m(warning){
    background-color: #FFF5ED;
    @include when(border){
      border: 1px solid #F6BB90;
    }
  }

  @include m(success){
    background-color: var(--color-blue-1);
    @include when(border){
      border: 1px solid #B7EB8F;
    }
  }

  @include m(rule){
    background-color: var(--color-bg-1);
    padding: 8px;
    p {
      color: var(--color-grey-8);
      font-size: 13px;
      line-height: 20px;
      margin: 4px;
    }
  
    ul {
      li {
        color: var(--color-grey-7);
        font-size: 12px;
        line-height: 18px;
        list-style: none;
        padding: 4px;
  
        >span {
          background-color: rgba($color: #666666, $alpha: 0.4);
          border-radius: 50%;
          display: inline-block;
          height: 8px;
          margin-right: 8px;
          width: 8px;
        }
      }
    }
  }
}