@charset "UTF-8";
@import "./common/var.css";

@component-namespace el {

  @b alert {
    width: 100%;
    padding: 5px 12px;
    margin: 0;
    box-sizing: border-box;
    /*border-radius: var(--alert-border-radius);*/
    position: relative;
    background-color: var(--color-white);
    overflow: hidden;
    color: var(--color-white);
    opacity: 1;
    display: table;
    transition: opacity .2s;
    text-align:center;
    border-radius: var(--border-radius-base);
    border:1px solid transparent;

    @modifier success {
      background-color: var(--alert-success-color);
    }

    @modifier info {
      background-color: var(--alert-info-color);
      color: var(--color-blue-60)
    }

    @modifier warning {
      background-color: var(--alert-warning-color);
      color: var(--alert-warning-font-color);
    }

    @modifier error {
      background-color: var(--alert-danger-color);
      color:var(--alert-error-font-color);
    }

    @modifier prompt {
      background-color: var(--alert-prompt-color);
      color: var(--color-black);
      .icon-exit {
      }
    }

    @e content {
      display: table-cell;
      padding: 0 8px;
      font-size: var(--alert-title-font-size);
      line-height: 24px;
    }

    @e icon {
      font-size: var(--alert-icon-size);
      width: var(--alert-icon-size);
      display: table-cell;
      @when big {
        font-size: var(--alert-icon-large-size);
        width: var(--alert-icon-large-size);
      }
    }

    @e title {
      font-size: var(--alert-title-font-size);
      line-height: 24px;
      @when bold {
        font-weight: bold;
      }
    }

    & .el-alert__description {
      color: var(--color-white);
      font-size: var(--alert-description-font-size);
      margin: 5px 0 0 0;
    }

    @e closebtn {
      font-size: var(--alert-close-font-size);
      color: var(--color-white);
      opacity: 1;
      position: absolute 12px 15px * *;
      cursor: pointer;

      @when customed {
        font-style: normal;
        font-size: var(--alert-close-customed-font-size);
        top: 9px;
      }
    }
  }
  .alert-align-left{
    text-align: left;
  }
  .el-alert-fade-enter,
  .el-alert-fade-leave-active {
    opacity: 0;
  }
  .el-alert .el-alert__icon{
    display: table-cell;
    font-weight: bold;
  }
}
