/* 改变主题色变量 */
@import "./vars.scss";

/* 改变 icon 字体路径变量，必需 */

$--font-path: "element-ui/lib/theme-chalk/fonts";

@import "element-ui/packages/theme-chalk/src/index";

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
//滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 3px;
}

.el-dialog {
  border-radius: 0 !important;

  .el-dialog__header {
    border-radius: 0;
    padding: 24px;
    font-size: 16px;
    line-height: 24px;
    .title {
      font-weight: 500;
    }
  }

  .el-dialog__body {
    border-radius: 0 !important;
    padding: 0 24px;
    box-sizing: border-box;
    max-height: calc(100vh - 20vh - 72px - 52px);
    overflow-y: auto;
  }
  .el-dialog__title{
    color: var(--color-title);
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
  }
  .el-dialog__footer {
    text-align: center;
    // background: #f7f7fc;
    padding: 24px;
  }
  .el-dialog__headerbtn {
    top: 15px;
  }
  .el-dialog__close.el-icon.el-icon-close {
    margin-top: 9px;
  }
}
.v-modal {
  opacity: 0.4 !important;
}

// 表格 table
.el-table {
  margin-top: 16px;
  thead {
    font-weight: 400 !important;
  }
  thead tr th {
    background-color: #F7F8FB;
  }
  &::before {
    display: none;
  }
  table.el-table__header thead tr th {
    padding: 9px 0 !important;
    background-color: var(--color-body) !important;
  }
  & th.el-table__cell.is-leaf, .el-table td.el-table__cell {
    border-bottom: 1px solid var(--color-grey3);
  }
  .el-table__cell {
    padding: 7px 0;
    .cell {
      &:empty::before,
      & > span:last-child:empty::before,
      & > div:last-child:empty::before {
        content: '-';
        color: var(--color-info);
      }
    }
  }
  .el-table__empty-block {
    display: flex;
    min-height: 400px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    & ::before {
      content: "";
      display: block;
      width: 184px;
      height: 132px;
      margin: 0 auto;
      background: url('@/assets/img/nodata.png') no-repeat;
      background-size: cover;
    }
    .el-table__empty-text {
      color: var(--color-grey8);
      padding-top: 24px;
      text-align: center;
    }
  }
  .el-table__fixed:before,
  .el-table__fixed-right:before {
    background-color: transparent !important;
  }
  // 10行的标准高度
  &.table-rows-10 {
    &.kl-table {
      height: auto !important;
    }
    .el-table__body-wrapper {
      height: auto !important;
      max-height: 430px !important;
    }
  }
  .el-table__column-filter-trigger {
    line-height: 23px;
  }
  .caret-wrapper {
    height: 22px;
    line-height: 22px;
    box-sizing: border-box;
    overflow: hidden;
    vertical-align: bottom;
    .sort-caret.ascending {
      top: 0;
    }
    .sort-caret.descending {
      bottom: 0;
    }
  }
}

.kl-table {
  .empty {
    height: auto !important;
  }
  & .table-wrapper {
    min-height: 85px !important;
  }
}


// 宜宾大脑 导航菜单样式
.el-menu {
  border-right: none !important;
  background-color: inherit !important;
  &.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 220px;
    min-height: 400px;
    box-sizing: border-box;
  }
  // 折叠状态
  &.el-menu-vertical-demo.el-menu--collapse {
    width: 52px;
    box-sizing: border-box;
    // .el-tooltip {
    //   padding: 0 20px !important;
    // }
    .el-submenu__icon-arrow {
      display: none;
    }
    .el-submenu .el-submenu__title,
    .el-tooltip {
      padding-left: 16px !important;
      padding-right: 0 !important;
    }
    .el-submenu.is-active:not(.is-opened) {
      .icon-16 {
        transform: translateX(-100%);
      }
    }
  }
  .el-submenu .el-submenu__title,
  .el-menu-item {
    padding-left: 20px !important;
    padding-right: 20px !important;
    height: 38px;
    line-height: 38px;
    font-weight: 400;
    padding-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    &:not(.is-disabled):hover {
      color: var(--color-primary);
      background: var(--color-blue1) !important;
      .icon-16 {
        transform: translateX(-100%);
      }
    }
  }
  .el-submenu.is-active:not(.is-opened),
  .el-menu-item.is-active {
    color: var(--color-primary) !important;
    .icon-16 {
      transform: translateX(-100%);
    }
  }
  .el-icon-arrow-down::before {
    content: '\e790' !important;
    color: var(--color-subtitle);
  }
  &:not(.el-menu--popup) .el-menu-item-group {
    .el-menu-item-group__title {
      display: none;
    }
    .el-menu-item span {
      margin-left: 34px !important;
    }
  }
  &.el-menu--popup .el-menu-item-group {
    .el-menu-item-group__title {
      display: none;
    }
    .el-menu-item span {
      margin-left: 20px !important;
      margin-right: 20px !important;
    }
  }
}

.el-menu.el-menu--popup {
  background: #fff !important;
}
.el-menu--vertical .el-menu--popup {
  min-width: 120px !important;
  line-height: $--input-mini-height;
  text-align: left;
}
.el-menu--vertical .el-menu-item-group__title {
  display: none;
}
.el-menu--vertical .el-menu--popup .el-menu-item {
  padding: 0 !important;
  height: $--input-mini-height;
  line-height: $--input-mini-height;
}

.el-button {
  &:not(.el-button--text) {
    min-width: 72px;
  }
  &.is-circle {
    min-width: 28px;
  }
  &:not(.is-disabled):not(.el-button--primary):not(.el-button--danger):not(.el-button--text):not(.is-plain):hover,
  &:not(.is-disabled):not(.el-button--primary):not(.el-button--danger):not(.el-button--text):not(.is-plain):focus {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-color: #fff !important;
  }
  &:not(.is-disabled):not(.el-button--primary):not(.el-button--danger):not(.el-button--text):not(.is-plain):active {
    color: var(--color-blue8) !important;
    border-color: var(--color-blue8) !important;
    background-color: #fff !important;
  }

  &.el-button--primary.is-disabled {
    border-color: var(--color-blue4) !important;
    background-color: var(--color-blue4) !important;
  }
  &.el-button--primary:not(.is-disabled):not(.is-plain):hover {
    border-color: var(--color-blue7) !important;
    background-color: var(--color-blue7) !important;
  }
  &.el-button--primary:not(.is-disabled):not(.is-plain):active {
    border-color: var(--color-blue8) !important;
    background-color: var(--color-blue8) !important;
  }

  &.el-button--default.is-disabled {
    background-color: var(--color-grey1) !important;
  }
  // is-plain
  &.el-button--primary.is-plain {
    background: transparent !important;
  }
  &.el-button--primary.is-plain:not(.is-disabled):hover,
  &.el-button--primary.is-plain:not(.is-disabled):focus {
    color: var(--color-primary) !important;
  }
  &.el-button--primary.is-plain:not(.is-disabled):active {
    color: var(--color-blue7) !important;
  }
}

.el-button + .el-button,
.el-select + .el-select {
  margin-left: 12px;
}

// 魔改之后的arrow-down：改为三角形
.el-icon-arrow-down::before {
  content: '\e790' !important;
  color: var(--color-subtitle);
}
.el-icon-arrow-up::before {
  content: '\e78f' !important;
  color: var(--color-subtitle);
}

// 原本的arrow-down，折线型
.el-icon-origin-arrow-down::before {
  content: "\e6df" !important;
  color: var(--color-subtitle);
}
.el-icon-origin-arrow-up::before {
  content: "\e6e1" !important;
  color: var(--color-subtitle);
}

// 禁用状态
.is-disabled {
  .el-icon-arrow-down::before,
  .el-icon-arrow-down::after {
    color: var(--color-disable) !important;
  }
  .el-icon-arrow-up::before,
  .el-icon-arrow-up::after {
    color: var(--color-disable) !important;
  }
  .el-input__icon::before,
  .el-input__icon::after {
    color: var(--color-disable) !important;
  }
}

.el-input {
  &:not(.el-input--prefix) {
    .el-input__inner,
    .el-textarea__inner {
      padding: 0 12px;
    }
    .el-textarea__inner {
      padding-top: 5px !important;
    }
  }
  .el-icon-circle-close {
    &::before{
      content: "\e6db";
    }
    &:hover {
      color: var(--color-primary);
    }
  }
}

.el-input-number {
  &:not(.el-input-number--small) {
    .el-input-number__increase,
    &:not(.is-controls-right) .el-input-number__decrease {
      top: 1px !important;
    }
  }

  &.is-disabled {
    .el-input-number__increase,
    .el-input-number__decrease {
      background-color: inherit !important;
    }
    .el-input-number__increase:hover ~ .el-input .el-input__inner,
    .el-input-number__decrease:hover ~ .el-input .el-input__inner {
      border-color: var(--color-border) !important;
    }
  }
  .el-input-number__increase:not(.is-disabled),
  .el-input-number__decrease:not(.is-disabled) {
    background-color: #fff;
  }

  &.is-controls-right {
    .el-icon-arrow-down::before {
      content: "\e6df" !important;
      color: var(--color-subtitle);
    }
    .el-icon-arrow-up::before {
      content: "\e6e1" !important;
      color: var(--color-subtitle);
    }
    .el-input__inner {
      padding-right: 42px !important;
    }
  }
}

.el-form {
  .el-form-item {
    margin-bottom: 20px;
    &.el-form-item--small {
      font-size: 14px;
      margin-bottom: 32px;
      .el-input {
        height: 32px;
        line-height: 32px;
      }
      .el-input__suffix {
        top: 1px;
      }
      .el-form-item__label {
        text-align: left;
        font-size: inherit;
      }
      .el-textarea {
        font-size: 14px;
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
    // 错误提示
    &.is-error {
      .el-input__inner {
        background-color: #FCF0F0 !important;
      }
    }
  }
  &.no-mb {
    .el-form-item {
      margin-bottom: 0 !important;
      margin-right: 12px;
    }
  }
  .el-form-item__label {
    vertical-align: bottom;
    text-align: right;
    font-size: 12px;
    color: var(--color-title) !important;
  }
  .el-form-item__content {
    min-height: $--input-mini-height;
    .el-input-number--small {
      .el-input--small {
        line-height: normal !important;
      }
    }
  }
  &.label-left {
    text-align: left !important;
  }
  &.el-form--inline .el-form-item{
    margin-right: 12px;
  }
  // label左对齐（包含*的左对齐）
  &.align-label-left {
    .el-form-item:not(.is-required) {
      .el-form-item__label::before {
        content: "*";
        margin-right: 4px;
        opacity: 0;
      }
    }
    .el-form-item:last-child {
      margin-bottom: 2px;
    }
    .el-form-item__label {
      color: var(--color-subtitle) !important;
      text-align: left;
    }
  }
}


.el-select {
  .el-tag__close.el-icon-close {
    background-color: transparent;
    &:hover {
      background-color: rgba(163, 169, 183, 1);
    }
  }
  .el-tag {
    border-radius: 0;
    &.el-tag--info {
      background-color: rgba(233, 237, 245, 0.65);
      border-color: rgba(233, 237, 245, 0.65) !important;
    }
  }
  // 不带圆形的关闭
  .el-input__suffix-inner {
    .el-select__caret {
      font-size: 16px;
    }
    .el-icon-circle-close {
      &::before{
        content: "\e6db";
      }
      &:hover {
        color: var(--color-primary);
      }
    }
  }
}

// Select 选择器
.el-select-dropdown {
  border: none !important;
  filter: drop-shadow(0px 2px 8px rgba(33, 76, 217, 0.20));
  .el-select-dropdown__wrap {
    margin-bottom: -8px !important;
  }
  &.el-popper[x-placement^="bottom"] {
    margin-top: 4px;
  }
  &.el-popper[x-placement^="top"] {
    margin-bottom: 4px;
  }
  .el-select-dropdown__item {
    padding: 0 12px;
  }
  & .el-select-dropdown__item:not(.is-disabled):hover {
    color: var(--color-primary);
  }
  .popper__arrow {
    opacity: 0;
  }
  .el-select-dropdown__empty {
    text-align: left;
    padding-left: 12px;
    &::before,
    &::after {
      content: "--";
    }
  }
}

.el-message {
  min-width: 180px !important;
  .el-message__content {
    color: var(--color-title);
  }
  &.el-message--success {
    border-color: #39C676 !important;
    filter: drop-shadow(0px 2px 8px rgba(57, 198, 118, 0.20));
    .el-message__closeBtn {
      color: #39C676;
    }
  }
  &.el-message--info {
    border-color: #3E72F5 !important;
    background-color: var(--color-blue1);
    filter: drop-shadow(0px 2px 8px rgba(51, 105, 255, 0.20));
    .el-icon-info {
      color: #3E72F5;
    }
    .el-message__closeBtn {
      color: #3E72F5;
    }
  }
  &.el-message--warning {
    border-color: #FF891B !important;
    filter: drop-shadow(0px 2px 8px rgba(255, 137, 27, 0.20));
    .el-message__closeBtn {
      color: #FF891B;
    }
  }
  &.el-message--error {
    border-color: #FF5454 !important;
    filter: drop-shadow(0px 2px 8px rgba(255, 84, 84, 0.20));
    .el-message__closeBtn {
      color: #FF5454;
    }
  }
}

.el-tooltip__popper {
  border-radius: 0 !important;
}

.el-dialog {
  .dialog-footer {
    text-align: center;
  }
  // 弹窗里面的表单label颜色不一样
  .el-dialog__body {
    .el-form {
      .el-form-item:not(.is-required) {
        .el-form-item__label::before {
          content: "*";
          margin-right: 4px;
          opacity: 0;
        }
      }
      .el-form-item:last-child {
        margin-bottom: 2px;
      }
      .el-form-item__label {
        color: var(--color-subtitle) !important;
        text-align: left;
      }
    }
  }
}

.el-message-box {
  padding: 0;
  .el-message-box__title {
    font-weight: 600;
  }
  .el-message-box__header {
    padding: 24px;
  }
  .el-message-box__content {
    padding: 0 24px;
  }
  .el-message-box__btns {
    text-align: center !important;
    padding: 24px;
    .el-button {
      height: 28px !important;
      line-height: 28px !important;
      padding: 0 12px !important;
    }
  }
}

// 时间选择器
.el-date-editor {
  vertical-align: middle;
  .el-input__icon {
    color: var(--color-subtitle);
  }
  // 不带圆形的关闭
  .el-icon-circle-close {
    &::before{
      content: "\e6db";
    }
    &:hover {
      color: var(--color-primary);
    }
  }
}

.time-select {
  border: none;
  @extend .filter-shadow;
  .time-select-item {
    padding: 0 20px;
    font-size: 14px;
    line-height: $--input-mini-height;
    font-weight: 400 !important;
    &:hover {
      color: var(--color-primary);
    }
  }
}

.filter-shadow {
  filter: drop-shadow(0px 2px 8px rgba(33, 76, 217, 0.20));
}
.el-time-panel {
  border: none;
  @extend .filter-shadow;
}

.el-time-spinner {
  padding: 0 18px;
  box-sizing: border-box;
  .el-time-spinner__item {
    // height: 24px;
    // line-height: 24px;
    &.active {
      font-weight: 400;
      color: var(--color-primary);
    }
    &:hover:not(.disabled):not(.active) {
      background-color: var(--color-blue1);
    }
  }
}

.el-date-table td:not(.current):not(.disabled):not(.in-range):hover span {
  color: var(--color-primary);
  background-color: var(--color-blue1);
}

.el-year-table {
  td {
    padding: 18px 2px;
  }
  td .cell {
    width: 48px;
    height: 24px;
    line-height: 24px;
    border-radius: 24px;
  }
  // 选中后
  td.current .cell {
    color: #fff !important;
    background-color: var(--color-primary);
  }
  td.today .cell {
    font-weight: 400 !important;
  }
  td:not(.current):not(.disabled):hover .cell {
    color: var(--color-primary);
    background-color: var(--color-blue1);
  }
}

.el-month-table {
  td {
    padding: 14px 0;
  }
  td div {
    height: 32px;
    padding: 4px 0 !important;
  }
  td .cell {
    width: 48px;
    height: 24px;
    line-height: 24px;
    border-radius: 24px;
  }
  td.today .cell {
    font-weight: 400 !important;
  }
  td.current .cell {
    color: #fff !important;
    background-color: var(--color-primary);
  }
  td:not(.current):not(.disabled):not(.in-range):hover .cell {
    color: var(--color-primary);
    background-color: var(--color-blue1);
  }
}
.el-date-range-picker {
  width: 626px !important;
  border: none;
  @extend .filter-shadow;
}
.el-picker-panel {
  border: none;
  @extend .filter-shadow;
}

.kl-pager {
  margin-top: 0 !important;
}
.el-pagination {
  padding: 0;
  margin-top: 16px !important;
  line-height: $--input-mini-height;
  text-align: right;
  ul.el-pager {
    li.number {
      min-width: 20px !important;
      // width: 20px;
      height: 20px;
      line-height: 20px !important;
      font-weight: 400;
      margin-top: 4px;
      border-radius: 10px;
      text-align: center;
      background-color: transparent;
      &:not(.is-disabled):not(.active):hover {
        color: var(--color-primary);
        background-color: var(--color-blue1);
      }
      &.active {
        color: #fff !important;
        background-color: var(--color-primary);
      }
    }
    li.number + li.number {
      margin-left: 8px;
    }
  }
  .btn-prev,
  .btn-next {
    background-color: transparent !important;
  }
  .el-pagination__jump {
    .el-pagination__editor {
      margin: 0 12px;
    }
  }
}

// 文本hover
.text-hover,
.el-dropdown-link {
  &:not(.is-disabled):hover {
    color: var(--color-primary);
    [class*="el-icon-"]:first-child::before {
      color: var(--color-primary);
    }
  }
}

// 下拉菜单
.el-dropdown-menu {
  min-width: 120px;
  &.minw-40px {
    min-width: 40px;
  }
  // margin-left: 60px !important;
  .el-dropdown-menu__item {
    height: $--input-mini-height;
    line-height: $--input-mini-height;
    padding: 0 12px;
    font-size: 14px !important;
  }
  .popper__arrow {
    opacity: 0;
  }
  &.el-popper[x-placement^="bottom"] {
    margin-top: 4px !important;
  }
  &.el-popper[x-placement^="top"] {
    margin-bottom: 4px !important;
  }
}

// 树
.el-tree {
  .el-tree-node {
    &.is-current {
      & > .el-tree-node__content:first-child {
        .el-tree-node__label {
          color: var(--color-primary);
        }
      }
    }
    // 每一行hover
    & > .el-tree-node__content:first-child {
      &:hover {
        background-color: var(--color-blue1);
        color: var(--color-primary);
      }
    }
    & .el-checkbox.is-disabled + .el-tree-node__label {
      color: var(--color-disable) !important;
    }
  }

  .el-tree-node__expand-icon:not(.is-leaf):hover {
    &::before {
      color: var(--color-primary);
    }
  }

  .el-tree-node__content {
    height: $--input-mini-height;
    line-height: $--input-mini-height;
    .el-tree-node__expand-icon {
      padding: 4px;
      margin-right: 4px;
      font-size: 16px;
    }
  }
}

.el-table-tooltip {
  data-popper-placement .popper__arrow {

  }
}

.el-tooltip__popper {
  box-sizing: border-box;
  max-width: 400px;
  padding: 12px;
  &[data-popper-placement^="top"] {
    .popper__arrow {
      bottom: -6px;
      border-top-color: var(--color-title);
      border-bottom-width: 0;
      &::after {
        bottom: 1px;
        margin-left: -5px;
        border-top-color: #212A40;
        border-bottom-width: 0;
      }
    }
  }
}

// 单选按钮
.el-radio {
  &:hover {
    .el-radio__input.is-checked:not(.is-disabled) {
      & + .el-radio__label {
        color: var(--color-blue7) !important;
      }
      .el-radio__inner {
        background-color: var(--color-blue7) !important;
        border-color: var(--color-blue7) !important;
      }
    }
    .el-radio__input:not(.is-disabled) {
      & + .el-radio__label {
        color: var(--color-blue7) !important;
      }
      .el-radio__inner {
        border-color: var(--color-blue7) !important;
      }
    }
  }
  .el-radio__label {
    padding-left: 8px;
  }
  .el-radio__inner {
    width: 14px !important;
    height: 14px !important;
    &::after {
      width: 6px;
      height: 6px;
    }
  }
}

.el-radio-group {
  .el-radio-button {
    height: $--input-mini-height;
    line-height: $--input-mini-height;
    &.is-active:not(.is-disabled) .el-radio-button__inner {
      color: var(--color-primary) !important;
      background-color: var(--color-blue1);
    }
  }
  .el-radio-button__inner {
    min-width: 72px;
    padding: 7px;
  }
}

// 复选框
.el-checkbox {
  .el-checkbox__inner {
    width: 16px;
    height: 16px;
    &::before {
      left: 6px;
    }
    &::after {
      height: 8px;
      left: 5px;
    }
  }
  &:hover {
    .el-checkbox__input.is-checked:not(.is-disabled) {
      & + .el-checkbox__label {
        color: var(--color-blue7) !important;
      }
      .el-checkbox__inner {
        background-color: var(--color-blue7) !important;
        border-color: var(--color-blue7) !important;
      }
    }
    .el-checkbox__input:not(.is-disabled) {
      & + .el-checkbox__label {
        color: var(--color-blue7) !important;
      }
      .el-checkbox__inner {
        border-color: var(--color-blue7) !important;
      }
    }
  }
}

.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.4) !important;
  // .el-loading-spinner i {}
  .el-loading-text {
    display: none;
  }
}

.el-transfer {
  // .el-transfer-panel__filter {
  //   margin: 12px;
  // }
  .el-input {
    .el-input__inner {
      border-radius: 0;
      height: 28px;
      line-height: 28px;
    }
  }
  .el-input--small .el-input__icon {
    line-height: 30px;
  }
}

// 标签组
.el-tabs {
  .el-tabs__nav-wrap:after {
    height: 1px;
  }
  .el-tabs__active-bar {
    height: 3px;
  }
  .el-tabs__nav-wrap:after
  .el-tabs__header {
    margin: 0 0 16px;
  }
  .el-tabs__item {
    padding: 0 8px;
    // padding-left: 8px !important;
    min-width: 80px;
    text-align: center;
    height: 36px;
    line-height: 26px;
    &:not(.is-active) {
      color: var(--color-subtitle);
    }
  }
}

.el-breadcrumb {
  .el-breadcrumb__item {
    .el-breadcrumb__inner.is-link {
      font-weight: 500;
    }
    &:last-child .el-breadcrumb__inner.is-link {
      font-weight: 600;
    }
  }
}

.el-input-group {
  &.el-input--mini {
    .el-input-group__prepend {
      .el-color-picker--small {
        display: block;
        height: 28px;
        .el-color-picker__trigger {
          height: 28px;
          width: 28px;
        }
      }
    }
  }
}

// 隐藏nprogress右上角的spinner
#nprogress .spinner {
  display: none !important;
}