// * 设置 notification/message 层级在 loading 之上
.el-message,
.el-notification {
  z-index: 99999 !important;
}

// * card 卡片样式
.card {
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
  background-color: var(--el-fill-color-blank);
  border: 0;
  // border: 1px solid var(--el-border-color-light);
  border-radius: 3px;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}

// * 不需要 card 卡片样式（在组件内使用 proTable 会使用到）
.no-card {
  .card {
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

//默认按钮
.el-button {
  & + .el-button {
    margin-left: 8px;
  }
  .iconfont {
    margin-right: 4px;
  }
}
:root {
  .el-button--default {
    height: 30px;
    padding: 5px 10px;
    font-size: var(--base-font-size-small);
    &.is-link {
      padding: 2px;
      height: auto;
    }
    .iconfont {
      font-size: var(--base-font-size-small);
    }
  }
  .el-button--small {
    .iconfont {
      font-size: var(--base-font-size-small);
    }
  }
  .el-input--default {
    .el-input__inner {
      font-size: 12px;
    }
  }
  .el-popper {
    max-width: 800px;
    &.el-select__popper {
      max-width: 100%;
    }
  }
}

.el-button--success,
.el-button--success:focus,
.el-button--success.is-active,
.el-button--success:active {
  background: var(--base-color-green);
  border-color: var(--base-color-green);
}
.el-button--warning,
.el-button--warning:focus,
.el-button--warning.is-active,
.el-button--warning:active {
  background: var(--base-color-yellow);
  border-color: var(--base-color-yellow);
}

// * main-box (树形表格筛选页面会使用，左右布局 flex)
.main-box {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  .filter {
    height: auto;
  }
  .table-box {
    width: calc(100% - 240px);
    height: auto;
  }
}
// * main-box (树形表格筛选页面会使用，左中右布局 flex)
.main-box-two {
  display: flex;
  flex: 1;
  width: 100%;
  height: 100%;
  .filter {
    width: 100%;
    height: 100%;
  }
}

// * content-box (常用内容盒子)
.content-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  .text {
    margin: 20px 0 30px;
    font-size: 23px;
    font-weight: bold;
    color: rgb(88 88 88);
  }
  .el-descriptions {
    width: 100%;
    padding: 40px 0 0;
    .el-descriptions__title {
      font-size: 18px;
    }
    .el-descriptions__label {
      width: 200px;
    }
  }
}
.app-main-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
// * table-box 表格页面样式
.app-container,
.table-box {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: var(--base-padding-default);
  background: #fff;
  border-radius: 3px;
}
.app-container,
.main-box,
.table-box {
  .table-search {
    display: flex;
    margin-bottom: 12px;
    padding: 16px 20px 8px 20px;
    overflow: hidden;
  }
  // table-search 表格搜索样式
  .rk-search-form {
    margin: 0 -10px 4px;
    .el-form {
      .el-form-item {
        margin: 0 0 8px;
        padding: 0 10px;
        .el-form-item__label,
        .el-input,
        .el-select,
        .el-date-editor--timerange {
          width: 100%;
        }
        .el-date-editor--datetimerange,
        .el-date-editor--daterange {
          width: 400px;
        }

        // 去除时间选择器上下 padding
        .el-range-editor.el-input__wrapper {
          padding: 0 10px;
        }

        // el-select 为多选时不换行显示
        .el-select__tags {
          overflow: hidden;
          white-space: nowrap;
        }
      }
      .search-btn-right {
        float: right;
        .el-button [class*='el-icon'] + span {
          margin-left: 2px;
        }
      }
      .more-item {
        display: inline;
      }
    }
    .search-operation {
      margin-left: 15px;
      white-space: nowrap;
      .search-isOpen {
        margin-left: 20px;
      }
    }
  }
}
.rk-table-bar {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  // 表格 pagination 样式
  .el-pagination {
    --el-pagination-font-size: 12px;
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    .el-input--default {
      .el-input__inner {
        font-size: 12px;
      }
    }
  }
}
.rk-table-box {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  // 表格 header 样式
  .table-header {
    display: flex;
    margin-bottom: 12px;
    justify-content: space-between;
  }
  // el-table 表格样式
  .el-table {
    // 表格自适应撑满整个页面(设置了 flex:1,页面上表格必须添加 height 属性)
    flex: 1;
    // .el-table__header th,
    // .el-table__body td {
    //   //text-align: center;
    // }
    .el-table__header th {
      // height: 45px;
      // font-size: 15px;
      font-weight: 500;
      color: #252525;
      background: #f6f6f6;
    }
    .el-table__row {
      height: 45px;
    }

    // 设置 el-table 中 header 文字不换行
    .el-table__header .el-table__cell > .cell {
      white-space: nowrap;
    }
    .el-scrollbar__view {
      height: 100%;
    }
    // 解决表格数据为空时样式不居中问题(仅在element-plus中)
    .el-table__empty-block {
      min-height: 160px;

      .el-table__empty-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .el-empty {
          padding: 0;
        }
      }
      .table-empty {
        line-height: 30px;
      }
      .el-empty__description p {
        line-height: 30px;
        font-size: 12px;
      }
    }

    // table 中 image 图片样式
    .table-image {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }

    //table 中 数据状态样式
    .el-badge__content.is-dot {
      width: 8px;
      height: 8px;
      vertical-align: middle;
      margin-bottom: 4px;
    }

    &.is-scrolling-right th.el-table-fixed-column--right,
    &.is-scrolling-none th.el-table-fixed-column--right {
      background: #f6f6f6;
    }
    .el-table-fixed-column--right {
      .el-button {
        margin-left: 0;
        margin-right: 10px;
      }
      .el-button.is-link {
        position: relative;
        &:before {
          content: '';
          position: absolute;
          right: -6px;
          width: 1px;
          height: 80%;
          background: #ddd;
        }
      }
      .cell {
        .el-button.is-link:last-child {
          &:before {
            display: none;
          }
        }
      }
      .el-dropdown {
        vertical-align: middle;
      }
    }
    .link-type-primary {
      color: var(--el-color-primary);
    }
  }
  .el-progress {
    .el-progress__text {
      font-size: 12px !important;
    }
  }
}

// * el-table 组件大小特殊样式
.el-table--large {
  .el-table__row,
  .el-table__header th {
    height: 52px !important;
    font-size: 16px !important;
  }
}
.el-table--default {
  .el-table__row,
  .el-table__header th {
    height: 38px !important;
    font-size: 12px !important;
  }
  .el-table__body {
    td {
      font-size: 12px;
    }
    .el-button--default {
      font-size: 12px;
    }
  }
}
.el-table--small {
  .el-table__row,
  .el-table__header th {
    height: 30px !important;
    font-size: 12px !important;
  }
}

// * el-drawer 样式
.el-drawer {
  // drawer header 样式
  .el-drawer__header {
    padding: 15px 20px 14px;
    margin-bottom: 0;
    border-bottom: 1px solid #ebeef5;
    span {
      font-size: 17px;
      color: #303133;
    }
  }

  // drawer header 样式
  .el-drawer__footer {
    border-top: 1px solid #ebeef5;
  }
  .el-select {
    width: 100%;
  }

  // drawer-form 中两列 form-item
  .drawer-multiColumn-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      width: 47%;
      &:nth-child(2n-1) {
        margin-right: 5%;
      }
    }
  }
}
//el-dropdown
.el-dropdown-menu--default {
  .el-dropdown-menu__item {
    font-size: 12px;
    i {
      font-size: 14px;
    }
  }
}
//el-form
.el-form {
  // .el-col {
  //   &:last-child .el-form-item {
  //     margin-bottom: 0;
  //   }
  // }
  .el-form-item {
    .el-form-item__label {
      box-sizing: initial;
    }
    .r-rop-detail {
      position: absolute;
      right: -20px;
    }
  }
  .el-form-item--default {
    --font-size: 12px;
    --el-checkbox-font-size: 12px;
    --el-form-label-font-size: var(--font-size);
    margin-bottom: 16px;
    .el-textarea__inner,
    .el-input__inner,
    .el-radio__label,
    .el-checkbox__label {
      font-size: 12px;
    }
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
//el-select
.el-select-dropdown__item {
  font-size: 12px;
}
// * el-dialog 样式
.el-dialog {
  //弹框宽度
  &.rk-dialog-small {
    width: 560px;
    .el-dialog__body {
      padding: 16px 60px 16px 30px;
    }
  }
  &.rk-dialog-default {
    width: 80%;
    min-width: 800px;
    .el-dialog__body {
      padding: 16px 36px;
    }
    .el-collapse-item__content {
      padding: 0 24px 0 10px;
    }
  }
  &.r-dialog-large {
    width: 100%;
    height: 100%;
  }
  .el-dialog__header {
    height: 44px;
    line-height: 44px;
    padding: 0px 20px;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
    .el-dialog__title {
      font-size: 14px;
      font-weight: 700;
    }
    .el-dialog__headerbtn {
      top: 0;
      width: 44px;
      height: 44px;
    }
  }
  .el-dialog__body {
    padding: 20px;
  }
  .el-dialog__footer {
    padding: 0 24px 16px;
  }
  .dialog-footer {
    .el-button {
      min-width: 55px;
    }
    .el-button + .el-button {
      margin-left: 16px;
    }
  }
  .custom-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-right: 15px;
    h4 {
      margin: 0;
      font-size: 14px;
    }
  }
}
.el-message-box {
  .el-message-box__header {
    padding: 0px 20px;
    margin: 0;
    .el-message-box__title {
      height: 44px;
      line-height: 44px;
      font-size: 14px;
      font-weight: 700;
    }
    .el-message-box__headerbtn {
      top: 0;
      right: 0;
      width: 44px;
      height: 44px;
    }
  }
  .el-message-box__content {
    padding: 10px 20px;
  }
  .el-message-box__btns {
    .el-button {
      min-width: 55px;
    }
    .el-button + .el-button {
      margin-left: 16px;
    }
  }
}
//分步
.rk-steps-bar {
  margin-bottom: 24px;
  .el-step__head.is-finish {
    .el-step__icon.is-text {
      background: var(--el-color-primary);
      border-color: var(--el-color-primary);
      color: #fff;
    }
  }
  .el-step {
    cursor: pointer;
    &.is-horizontal,
    .is-finish {
      .el-step__line {
        height: 1px;
      }
    }

    &.is-center {
      .el-step__line {
        left: 55%;
        right: -45%;
        background: #ddd;
      }
    }
    .el-step__icon.is-text {
      border: 1px solid #ddd;
      color: #999;
    }
    .el-step__title {
      line-height: 30px;
      font-size: 14px;
      &.is-process {
        font-weight: 500;
      }
    }
  }
}
//批量审核弹框
.rk-verify-msgbox {
  position: relative;
  .el-message-box__btns {
    .el-button:first-child {
      background: var(--el-color-danger);
      border-color: var(--el-color-danger);
      color: #fff;
    }
    .el-button:last-child {
      background: var(--el-color-success);
      border-color: var(--el-color-success);
      color: #fff;
    }
    .el-button:hover {
      opacity: 0.8;
    }
  }
}
// * el-collapse样式
.el-collapse {
  border: 0 !important;
  .el-collapse-item__header {
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    color: #666;
    font-weight: 700;
  }
  .el-collapse-item {
    &:last-child .el-collapse-item__header {
      border: 0;
    }
  }
}
//选项卡样式
.rk-tabs-bar {
  .el-tabs__item.is-active {
    font-weight: 700;
  }
  .el-tabs__nav-wrap::after {
    height: 1px;
  }
}
//穿梭框样式
.rk-transfer-bar {
  display: flex;
  align-items: center;
  .el-transfer-panel {
    flex: 1;
    .el-transfer-panel__header {
      padding-left: 15px;
      background: #fff;
      .el-checkbox .el-checkbox__label {
        font-size: 12px;
        span {
          right: 12px;
        }
      }
    }
    .el-transfer-panel__item.el-checkbox {
      margin-right: 0;
      .el-checkbox__label {
        padding-right: 100px;
        font-size: 12px;
      }
    }
  }
  .el-transfer__buttons {
    width: 56px;
    padding: 0 13px;
    .el-button {
      display: block;
      width: 32px;
      height: 32px;
      margin: 0 auto;
      padding: 0;
    }
    .el-transfer__button:nth-child(2) {
      margin-top: 10px;
    }
  }
  .el-button.is-disabled,
  .el-button.is-disabled:focus,
  .el-button.is-disabled:hover {
    color: #c5c5c5;
    background-color: #f5f5f5;
    border-color: #f5f5f5;
  }
}
//左侧列表
.filter {
  box-sizing: border-box;
  width: 200px;
  height: 100%;
  padding: 0px;
  margin-right: 16px;
  overflow: hidden;
  .title {
    position: relative;
    padding: 11px 0 12px 18px;
    margin: 0;
    font-size: 14px;
    color: var(--el-text-color-regular);
    letter-spacing: 0.5px;
    border-bottom: 1px solid #ddd;
    .iconfont {
      position: absolute;
      right: 8px;
      top: 12px;
    }
  }
  .search {
    padding: 10px;
    .el-input__inner {
      font-size: 12px;
    }
  }
  .el-input {
    margin: 0 0 10px;
  }
  .el-tree {
    display: inline-block;
    min-width: 100%;
  }
  .el-scrollbar {
    :deep(.el-tree) {
      height: 80%;
      overflow: auto;
      .el-tree-node__content {
        height: 33px;
      }
    }
  }
  .el-left-menu {
    border: 0px;
    .el-menu-item {
      padding: 0 15px 0 20px;
      height: 40px;
      line-height: 40px;
      font-size: 12px;
      &.is-active {
        font-weight: 700;
        background-color: var(--el-menu-hover-bg-color);
        &::before {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: 3px;
          content: '';
          background: var(--el-color-primary);
        }
      }
    }
  }
  .el-tree-node__content {
    height: 32px;
  }
  .el-tree-node__label {
    position: relative;
    font-size: 12px;
    .iconfont {
      position: absolute;
      left: -14px;
      top: 2px;
      font-size: 12px;
    }
  }
}
.el-message-box {
  .message-text {
    margin: 0 5px;
  }
  .success {
    color: #67c23a;
  }
  .danger {
    color: #f56c6c;
  }
}

.el-dialog-form {
  padding-right: 20px;
}