@charset "UTF-8";
@import "../../style/function";

.im-statusbox {
  display: inline-table;
  position: relative;
  color: $color9;

  &-icon {
    display: table-cell;
    padding-right: 5px;
    vertical-align: middle;

    .i-info {
      color: $infoIcon;
    }

    .i-question {
      color: $questionIcon;
      cursor: help;
    }

    .i-alert {
      color: $alertIcon;
    }

    .i-success {
      color: $succIcon;
    }

    .i-loading {
      position: relative;
      top: 3px;
    }
  }

  &-bd {
    display: table-cell;
    vertical-align: middle;
  }

  &-l {
    $size: 36px;

    .im-statusbox-icon {
      margin-right: 15px;
    }

    .im-icon {
      font-size: $size;
    }

    .i-loading {
      width: $size;
      height: $size;
    }

    // TODO 不知道为什么 @ycxu 要把这个class放到imui里，希望你给个说法，不然我要把这个让人感到迷惑的代码干掉
    &.im-statusbox--simple {

      .im-statusbox-bd {
        font-size: 18px;
        line-height: 36px;
      }
    }

    // TODO 不知道为什么 @ycxu 要把这个class放到imui里，希望你给个说法，不然我要把这个让人感到迷惑的代码干掉
    &.im-statusbox--custom {

      .im-statusbox-bd {

        .im-statusbox-tt {
          font-size: 18px;
          line-height: 36px;
        }
      }
    }

  }

  &-m {
    $size: 24px;
    font-size: 14px;

    .im-icon {
      font-size: $size;
    }

    .i-loading {
      width: $size;
      height: $size;
    }
  }

}