/* 色彩 */
$main-color: #4f87f5; // 主色
$success-color: #2cc8a0; // 强调色
$error-color: #ff584e; // 警示色
$primary-color: #409eff; // 主题色

$hover-opacity: 0.85; // 鼠标悬停透明度

/* 文字 */
$font-color: #535353; // 主要颜色
$font-minor-color: #666; // 次要颜色
$font-aux-color: #aaa; // 辅助颜色

$font-small: pingfangsc-regular; // 细体
$font-bold: pingfangsc-medium; // 粗体

/* 鼠标 */
$hover-color: #f6f9ff; // 悬停色
$active-color: #e8f4ff; // 激活色

$split-line-color: #e6e6e6; // 分割线颜色

$card-color: #f5f9fa; // 页面底色/卡片底色
$main-text: #1a1a1a; // 主要文字
$minor-text: #666; // 次要文字
$assist-text: #a6a6a6; // 辅助文字、提示文字
$minor-text-color: #68738a; //次要字体颜色
$main-text-color: #535353; //主要字体颜色

$cancel-btn: #d7d7d7; //取消按钮边框颜色
$confirm-btn: #4f87f5; //确定按钮样式
$box-m: 16px; //盒外边距
$box-m-bottom: 12px; //盒底边距
$box-p: 16px; //盒内边距
$box-item-m: 12px;
$box-item-p: 12px;
$box-p-bottom: 12px; //盒底内边距

$disable-color: #ccc; // 禁用色

$page-bg: #f7f7f7; // 页面背景
$box-pd: 16px; // 盒内边
$box-mt: 16px; // 盒外边
$module-mt: 8px; // 模块间距
$box-bg: #fff; // 盒背景
$box-radius: 8px; // 盒圆角
$box-item-radius: 4px; // 盒子项圆角
$font-weight: 600; // 字体加粗

$page-content-height: calc(100vh - 60px - 16px - 16px); // 页面的内容高度

// 标签主题
@mixin tag {
  $tag-c-0: #ffa200;
  $tag-c-1: #00c1f6;
  $tag-c-2: #07cc89;
  $tag-c-3: #4646df;
  $tag-c-4: #b03afe;

  $tag-bg-0: #ffa2001a;
  $tag-bg-1: #00c1f61a;
  $tag-bg-2: #07cc891a;
  $tag-bg-3: #4646df1a;
  $tag-bg-4: #b03afe1a;

  .tag-0 {
    color: $tag-c-0;
    background: $tag-bg-0;
  }

  .tag-1 {
    color: $tag-c-1;
    background: $tag-bg-1;
  }

  .tag-2 {
    color: $tag-c-2;
    background: $tag-bg-2;
  }

  .tag-3 {
    color: $tag-c-3;
    background: $tag-bg-3;
  }

  .tag-4 {
    color: $tag-c-4;
    background: $tag-bg-4;
  }
}

@mixin xb-tag {
  .tag {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    display: flex;
    align-items: center;
    width: auto;
    height: 24px;
    padding: 4px 8px 4px 4px;
    margin: 0 8px 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;

    .icon {
      margin-right: 5px;
    }
  }
}

// 初始化文字按钮
@mixin btn_text {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: none;

  &:active {
    // background: #fff;
  }
}

// 文本溢出省略
@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 输入框无边
@mixin init_input {
  :deep(.el-input__wrapper) {
    box-shadow: none;
  }
}

@mixin cell_user {
  :deep(.el-table__row) {
    .row-user {
      display: flex;
      flex-wrap: wrap;
      height: 24px;

      &-avatar {
        width: 24px;
        height: 24px;
      }

      &-info {
        height: 24px;
        margin-left: 12px;
        font-size: 14px;
        line-height: 24px;
        text-align: left;
      }
    }
  }
}

@mixin xbj_table {
  .page {
    border-radius: $box-radius;

    .page-table {
      padding: $box-pd;
      background: #fff;
      border-radius: 0 0 $box-radius $box-radius;
    }

    :deep(.el-table__header) {
      thead {
        th {
          font-family: $font-bold;
          font-weight: 500;
          border: none;
        }
      }
    }

    :deep(.el-table__body) {
      tbody {
        .el-table__row--striped {
          td {
            background: #fafafb;
          }
        }

        td {
          border: none;

          .cell {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }

    :deep(.el-table__inner-wrapper) {
      &::before {
        display: none;
      }
    }

    :deep(.el-table) {
      z-index: auto !important;
    }

    :deep(.el-table__cell) {
      z-index: auto !important;

      .cell {
        // button + button {
        //     margin-right: 16px;
        // border:1px solid red;

        //     &:last-child {
        //         margin-right: 0;
        //     }
        // }
      }
    }
  }
}

@mixin xbj_filter {
  .filterBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 64px;
    padding: $box-p 0 0 $box-p;
    background: linear-gradient(90deg, #fff 0%, #f3f9ff 100%);
    border-radius: $box-radius $box-radius 0 0;

    :deep(.el-input__wrapper) {
      background: transparent;
    }

    :deep(.el-input) {
      .el-input__wrapper,
      .is-focus {
        width: 192px;
      }
    }

    :deep(.el-select .el-input__inner) {
      height: 32px !important;
    }

    // :deep(.el-select-tags-wrapper) {
    //     position: absolute;
    //     top: -55%;
    // }

    // :deep(.el-select__tags) {
    //     top: 95%;
    // }
  }
}
