@import '../mixi.scss';

.select-shell-drawer {
  .el-dialog__header {
    border-radius: 2px 2px 0 0;
    padding: 8px 16px;
    background-color: unset;
    color: $light--color--text-1;

    .el-dialog__title {
      font-size: 16px;
    }

    .el-dialog__headerbtn {
      top: 12px;
    }
  }

  .el-dialog__body {
    position: relative;
    padding: 0 !important;
  }

  .split-pane {
    position: relative;
  }

  .el-drawer__header {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin-bottom: 0 !important;
    color: $light--color--text-2 !important;
    background-color: $light--content-color;
  }

  .select-header {
    height: 50px;
    overflow: hidden;
    border-bottom: 1px solid $light--border-color-2;
    background-color: mix($light--content-color, #FFF, 40%);
    padding: 8px;
  }

  //选择结果
  .select-result-box {
    height: 100%;

    .el-header,
    .el-main,
    .el-footer {
      padding: 0 10px;
    }

    .el-header {
      line-height: 50px;
      height: 50px !important;
      font-size: 14px;
      font-weight: normal;
      color: $light--color--text-2;
      background-color: mix($light--content-color, #FFF, 40%);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .el-main {
      padding: 0;
      overflow: hidden;
      height: calc(100% - 60px);
      box-sizing: border-box;

      .tags-box {
        padding: 10px;
        width: 100%;
        overflow-y: auto;
        box-sizing: border-box;
        height: calc(100% - 60px);
        //height: 390px;
      }

      .footer-box {
        //height: ;
        border-top: 1px solid $light--border-color-2;
        line-height: 60px;
        padding: 0 10px;
        text-align: right;
        height: 60px;
      }
    }
  }

  //表格样式
  .select-table {
    border-top: 1px solid rgba(0, 0, 0, 0.1);

    .gutter {
      width: 8px !important;
      background-color: mix($light--content-color, #FFF, 40%);
    }

    .el-table__body {
      width: 100% !important;
    }

    .select-table-header-cell {
      background-color: mix($light--content-color, #FFF, 40%);
    }

    .select-table-cell,
    .select-table-header-cell {
      font-size: 12px;
      padding: 5px 0 !important;
    }

    .select-table-row-cell {
      padding-left: 10px !important;
    }
  }

  //人员选择弹窗内容容器checkBoxGroup 样式
  .select-person-box {
    .select-person-box__main {
      overflow-y: auto;
    }

    &__main {
      padding: 12px;
      width: 100% !important;
      overflow-y: auto;

      .el-checkbox {
        margin: 0 5px 5px 5px !important;
        width: 124px;
        overflow: hidden;
        line-height: 20px;
      }
    }

    .header {
      height: 50px;
      line-height: 50px;
      padding: 8px 10px;
      overflow: hidden;
      background-color: mix($light--content-color, #FFF, 40%);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);

      .btn-prev,
      .btn-next,
      .el-pager {
        background-color: initial;

        .number {
          background-color: initial;
        }
      }

      .el-select {
        height: 22px !important;

        s .el-input {
          height: 22px !important;
        }

      }
    }
  }


}




.custom-dark {

  .select-shell-drawer {
    .el-drawer__header {
      border-color: mix(#FFF, $dark--bg--color, 10%);
      color: $light--color--text-7;
      background-color: mix($dark--bg--color, #000, 80%);
    }

    .select-header {
      background-color: mix($dark--bg--color, #000, 90%);
      border-color: mix(#FFF, $dark--bg--color, 10%);
    }

    //选择结果
    .select-result-box {
      .el-header {
        color: $light--color--text-6;
        background-color: mix($dark--bg--color, #000, 90%);
        border-color: mix(#FFF, $dark--bg--color, 10%);
      }
    }

    //表格样式
    .select-table {
      border-top: 1px solid rgba(0, 0, 0, 0.2);

      .gutter {
        width: 8px !important;
        background-color: mix($dark--bg--color, #000, 90%);
      }

      .select-table-header-cell {
        background-color: mix($dark--bg--color, #000, 90%);
      }
    }

    //选择结果
    .select-result-box {
      .el-header {
        color: $dark--color--text-3;
        background-color: mix($dark--bg--color, #000, 90%);
        border-color: mix(#FFF, $dark--bg--color, 10%);
      }

      .el-main {
        .footer-box {
          //height: ;
          border-color: mix(#FFF, $dark--bg--color, 10%);
        }
      }
    }

    //人员选择弹窗内容容器checkBoxGroup 样式
    .select-person-box {
      .header {
        background-color: mix($dark--bg--color, #000, 90%);
        border-color: mix(#FFF, $dark--bg--color, 10%);
      }
    }
  }


}