$common_w: 1190px;
$width_less_900_height: 960px;

$bg-e: #eee; // 背景色
$bg-light: #fbfbfb; // 背景色
$bg-f8: #f8f9fa;
$bg-f3: #f3f3f3;
$main-color: #0a44b3; // 主题色
$blue2: #0453d6; // 主题色 - 2

$border: #EBEEF5; // 边框色
$border2: #DCDFE6; // 边框色2
$tableBorderColor: #f0f0f0; // 表格边框颜色
$invalid-color: #eff1f4; // 失效色

$table-hover: #e6ecff; // 表格鼠标移入时别背景色

//字体颜色
$color1: #303133; // 常规文字
$color2: #606266; // 次要文字
$color3: #888; // 禁用状态时使用的字体
$color4: #909399; // 占位字体
$color5: #C0C4CC; // 浅灰色

// 红色 （警示色，失败状态）
$red: #F56C6C;
$red-pain: #fde2e2;
$red-light: #fef0f0;

// 绿色 （成功状态）
$green: #0D8000;
$green-pain: #e1f3d8;
$green-light: #f0f9eb;

// 黄色 （成功状态）
$yellow: #e6a23c;
$yellow-pain: #faecd8;
$yellow-light: #fdf6ec;

// 圆角 form button也为此圆角
$radius: 4px;

// 一体化appCard 随机颜色池
$appColors: #ed8c96, #6475b9, #78aff8, #ff9c64, #60baff, #5a7be6, #9390fb, #F4B259, #f56c6c, #fda1be, #fa4db3, #de6ffc, #F4D2E9, #6a7fa6, #3475b9;


@mixin table-form-input-width {
  max-width: 150px;
  @media (max-width: 1400px) {
    max-width: 120px;
  }
}

@mixin flex-center-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-vertical {
  display: flex;
  align-items: center;
}

@mixin flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// 只显示一行超出...
@mixin only-one-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 只显示两行超出...
@mixin only-two-line {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
  word-wrap: break-word;
}

@mixin nav-height($height: 50px, $heightMini: 45px) {
  height: $height;
  @media (max-width: 1400px) {
    height: $heightMini;
  }
}

@mixin media-p15 {
  padding: 15px;
  @media (max-width: 1400px) {
    padding: 10px;
  }
}

@mixin media-p20 {
  padding: 20px;
  @media (max-width: 1400px) {
    padding: 15px;
  }
}

@mixin media-fs16($fs: 16px, $fsmini: 15px) {
  font-size: $fs;
  @media (max-width: 1400px) {
    font-size: $fsmini;
  }
}

@mixin flex-1 {
  flex: 1 1 auto; //兼容Ie 注意ie下flex: 1被解析为flex: 1 1 0
  flex-grow: 1;
}

@mixin scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
  }

  &:hover::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 53%, 0.3);
  }

  &:hover::-webkit-scrollbar-track {
    background: transparent;
  }
}

@mixin page-padding {
  padding: 16px;
  @media (max-width: 1400px) {
    padding: 12px;
  }
}

@mixin dynamic-form-width($width: 250px) {
  .bio-form .el-input,
  .bio-form .el-textarea {
    width: $width;
  }
}

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 12px;
  min-width: 1190px;
  color: #303133;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.bts-item {
  display: inline-flex;
  align-items: center;
  margin-right: 5px;
  margin-bottom: 5px;
  padding-left: 8px;
  border: 1px solid $border2;
  border-radius: 4px;
  position: relative;

  &:hover {
    border-color: $main-color;

    .bts-item__delete {
      display: inline-block !important;
    }
  }

  &__label {
    display: inline-block;
    max-width: 120px;
    white-space: nowrap;
    @include only-one-line;
  }

  &__delete {
    position: absolute;
    right: -5px;
    top: -5px;
    z-index: 20;
    font-size: 14px;
    color: #999;
    background-color: #fff;
    cursor: pointer;
    display: none !important;

    &:hover {
      color: $main-color;
    }
  }

  .el-input__inner {
    border: 0;
    height: 26px;
    line-height: 26px;
    width: 80px;
  }

  .el-input.lang {
    .el-input__inner {
      width: 180px;
    }
  }

  .el-input, .el-select {
    display: inline-block;
    width: auto;
  }
}

.bts-mselect-pop {
  margin-top: 5px !important;
  padding: 4px 0 !important;

  .el-checkbox {
    display: block;
    padding: 0 16px;
    margin: 0;
    position: relative;
    height: 30px;
    line-height: 30px;

    &:hover {
      background-color: #f5f7fa;
    }

    .el-icon-check {
      display: none;
      position: absolute;
      right: 16px;
      font-size: 14px;
      font-weight: 500;
      top: 50%;
      transform: translateY(-50%);
    }

    .el-checkbox__input {
      display: none;
    }

    .el-checkbox__label {
      padding: 0;
    }

    &.is-checked {
      font-weight: bold;
      .el-checkbox__label {
        color: $main-color;
      }
      .el-icon-check {
        display: inline-block;
      }
    }
  }

  .el-checkbox-group {
    padding-top: 8px;
    max-height: 300px;
    overflow: auto;
    @include scrollbar;
  }

  .bts-mselect__box {
    .bts-mselect__search {
      margin: 0 16px;
      border-bottom: 1px solid $border;
    }

    .bts-mselect__search__input {
      .el-input__inner {
        border: 0;
      }
    }

    .no-search-data {
      padding-top: 10px;
      text-align: center;
      color: #999;
    }
  }

}

.bts-select-pop {
  margin-top: 5px !important;
  padding: 4px 0 !important;

  .select-group__item {
    cursor: pointer;
    display: block;
    padding: 0 16px;
    margin: 0;
    position: relative;
    height: 30px;
    line-height: 30px;

    &:hover {
      background-color: #f5f7fa;
    }

    &.is-selected {
      font-weight: bold;
      color: $main-color;
    }

    .el-icon-check {
      position: absolute;
      right: 16px;
      font-size: 14px;
      font-weight: 500;
      top: 50%;
      transform: translateY(-50%);
    }

    &.is-checked {
      font-weight: bold;
      color: $main-color;
    }
  }

  .select-group {
    padding-top: 8px;
    max-height: 300px;
    overflow: auto;
    @include scrollbar;
  }

  .bts-mselect__box {
    .bts-mselect__search {
      margin: 0 16px;
      border-bottom: 1px solid $border;
    }

    .bts-mselect__search__input {
      .el-input__inner {
        border: 0;
      }
    }

    .no-search-data {
      padding-top: 10px;
      text-align: center;
      color: #999;
    }
  }

}