// cover some element-ui styles

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
  color: #fff !important;
}

.el-upload {
  input[type='file'] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}

.cell {
  .el-tag {
    margin-right: 0px;
  }
}

.small-padding {
  .cell {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.fixed-width {
  .el-button--mini {
    padding: 7px 10px;
    width: 60px;
  }
}

.status-col {
  .cell {
    padding: 0 10px;
    text-align: center;

    .el-tag {
      margin-right: 0px;
    }
  }
}

// refine element ui upload
.el-upload {
  width: 100%;
  .el-upload-dragger {
    width: 100%;
    height: 200px;
    background: transparent !important;
  }
}

// dropdown
.el-dropdown-menu {
  background: $mainColor1 !important;
  a {
    display: block;
  }
  .more {
    text-align: center;
    color: #409eff;
    cursor: pointer;
  }
  .el-dropdown-menu__item {
    color: #c6c6c6 !important;
    &:hover {
      background: $mainColor2 !important;
      color: #fff !important;
    }
  }
  .el-dropdown-menu__item:not(.is-disabled):focus {
    background: $mainColor2 !important;
    color: #fff !important;
  }
}
.el-input__wrapper,
.el-textarea__inner {
  background: $mainColor1 !important;
  box-shadow: 0 0 0 1px $mainColor2 inset !important;
  color: #fff !important;
  .el-input__inner {
    color: #fff !important;
  }
}

.el-date-editor {
  .el-range-input,
  .el-range-separator {
    color: #c6c6c6 !important;
  }
  .el-range-editor.el-input__inner {
    display: inline-flex !important;
  }
  .el-range-separator {
    box-sizing: content-box;
  }
}
.el-date-table td.in-range .el-date-table-cell {
  background: $mainColor2 !important;
}
.el-menu {
  background: $mainColor1 !important;
  --el-menu-border-color: $mainColor2 !important;
  .el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
    display: none;
  }
  .el-menu-item,
  .el-sub-menu__title {
    color: #c6c6c6 !important;
  }
}

.el-dropdown .el-dropdown-link {
  color: var(--el-color-primary) !important;
}

// 重新定义elementplus样式
// 弹窗
.el-dialog {
  transform: none;
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  background: $mainBg !important;
  box-shadow: 0px 0px 40px rgba(0, 21, 41, 0.35) !important;
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
  .el-dialog__header {
    border-bottom: 1px solid $mainColor1;
    width: 100%;
    .el-dialog__close {
      font-size: 26px;
      font-weight: bold;
      svg path {
        fill: #3afff8 !important;
      }
    }
  }
  .el-dialog__title {
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    font-size: 22px;
    color: #e4f5ff;
  }
  .el-dialog__footer {
    border-top: 1px solid $mainColor1;
  }
  .el-dialog__body {
    padding-top: 20px !important;
    padding-bottom: 0 !important;
    overflow: auto;
    flex: 1;
  }
}

.el-dialog.scrollbar .el-dialog__body {
  overflow: auto;
  overflow-x: hidden;
  max-height: 75vh;
  padding: 10px 20px 0;
}

.el-message-box {
  background: $mainBg !important;
  border-color: $mainColor1 !important;
  box-shadow: 0px 0px 40px rgba(0, 21, 41, 0.35) !important;
  .el-message-box__title {
    color: #fff !important;
  }
  .el-message-box__message {
    color: #c6c6c6 !important;
  }
}
.el-message--success {
  svg path {
    fill: $--color-success !important;
  }
}
.el-message--error {
  svg path {
    fill: $--color-danger !important;
  }
}

.el-popper {
  background-color: $mainColor1 !important;
  border-color: $mainColor1 !important;
  box-shadow: 0px 0px 20px rgba(0, 21, 41, 0.35) !important;
  .el-popper__arrow::before {
    --el-border-color-light: #fff !important;
    background-color: $mainColor1 !important;
  }
  .el-select-dropdown__item {
    color: #fff !important;
  }
  .el-select-dropdown__item.selected {
    background-color: $mainBg !important;
    color: #00d1ff !important;
  }
  .el-select-dropdown__item:hover,
  .el-select-dropdown__item.hover {
    background-color: $mainBg !important;
  }
}
.el-select .el-select__tags-text,
.el-select__input {
  color: #fff !important;
}

.el-table {
  --el-table-border-color: $mainColor1 !important;
  --el-table-bg-color: $mainColor1 !important;
  .el-table__body {
    border-bottom: 1px solid $mainColor2 !important;
  }
  .el-table__header-wrapper,
  .el-table__fixed-header-wrapper {
    th {
      word-break: break-word;
      background-color: $mainColor1 !important;
      height: 40px !important;
      font-size: 13px;
    }
  }
  .el-table__body-wrapper {
    background-color: #004770 !important;
    .el-button [class*='el-icon-'] + span {
      margin-left: 1px;
    }
    td.el-table-fixed-column--right {
      background: $mainBg !important;
    }
  }

  tr {
    background-color: $mainColor1 !important;
  }
  tr:nth-of-type(even) {
    background-color: $mainBg !important;
  }
  tr:hover > td {
    background-color: $mainColor2 !important;
  }

  th.el-table__cell,
  td.el-table__cell {
    text-align: center;
    border-bottom: 1px solid $mainBg !important;
    color: #c6c6c6;
    border-right: none !important;
    position: static !important; // 设置position 使得 子元素不与其产生新的层叠关系
  }
  .el-table__empty-block {
    background-color: #004770 !important;
    .el-table__empty-text {
      color: #c6c6c6 !important;
    }
  }
  .el-button {
    border: none !important;
    background: none !important;
    &:hover {
      background: none !important;
      transform: scale(1.01);
    }
  }
  .el-button--primary {
    color: $--color-primary !important;
    svg path {
      fill: $--color-primary !important;
    }
  }
  .el-button--danger {
    color: $--color-danger !important;
    svg path {
      fill: $--color-danger !important;
    }
  }
  .el-button--warning {
    color: $--color-warning !important;
    svg path {
      fill: $--color-warning !important;
    }
  }
  .el-button--success {
    color: $--color-success !important;
    svg path {
      fill: $--color-success !important;
    }
  }
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: $mainBg !important;
}
.el-table__body-wrapper tr td.el-table-fixed-column--left,
.el-table__body-wrapper tr td.el-table-fixed-column--right,
.el-table__body-wrapper tr th.el-table-fixed-column--left,
.el-table__body-wrapper tr th.el-table-fixed-column--right,
.el-table__footer-wrapper tr td.el-table-fixed-column--left,
.el-table__footer-wrapper tr td.el-table-fixed-column--right,
.el-table__footer-wrapper tr th.el-table-fixed-column--left,
.el-table__footer-wrapper tr th.el-table-fixed-column--right,
.el-table__header-wrapper tr td.el-table-fixed-column--left,
.el-table__header-wrapper tr td.el-table-fixed-column--right,
.el-table__header-wrapper tr th.el-table-fixed-column--left,
.el-table__header-wrapper tr th.el-table-fixed-column--right {
  background: $mainColor1 !important;
}
/* 用来设置当前页面element全局table 选中某行时的背景色*/
.el-table__body tr.current-row > td {
  background-color: #1d8db4 !important;
  color: #fff;
}

/** 表格布局 **/
.pagination-container {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 10px 20px !important;
  background: transparent !important;
  .el-pagination {
    float: right;
    button {
      background: #0073a5 !important;
    }
    .el-pagination__total,
    .el-pagination__jump {
      color: #fff !important;
    }
    .el-pager li {
      background-color: #004770 !important;
      color: #fff;
    }
    .el-pager li.is-active {
      background-color: #00c7f2 !important;
    }
  }
}

@media (max-width: 768px) {
  .pagination-container .el-pagination > .el-pagination__jump {
    display: none !important;
  }
  .pagination-container .el-pagination > .el-pagination__sizes {
    display: none !important;
  }
}

.el-button {
  color: #fff !important;
  --el-button-bg-color: transparent !important;
  border-color: $--color-info !important;
  &:hover {
    background-color: $--color-info !important;
  }
}
.el-button--primary {
  background-color: $mainColor2 !important;
  border-color: $mainColor1 !important;
  &:hover {
    background-color: $mainColor1 !important;
  }
}
.el-button--success {
  background-color: $green !important;
  border-color: $panGreen !important;
  &:hover {
    background-color: $tiffany !important;
  }
}
.el-button--danger {
  background-color: $--color-danger !important;
  border-color: $red !important;
  &:hover {
    background-color: $red !important;
  }
}
.el-button--warning {
  background-color: $--color-warning !important;
  border-color: $yellow !important;
  &:hover {
    background-color: $yellow !important;
  }
}
.el-button--info {
  background-color: $light-blue !important;
  border-color: $light-blue !important;
  &:hover {
    background-color: $--color-info !important;
  }
}

.el-picker-panel {
  background: $mainColor1 !important;
  --el-text-color-regular: #fff;
  --el-text-color-placeholder: #8a969d;
}
.el-loading-mask {
  --el-mask-color: rgba(255, 255, 255, 0.2);
}

.el-tree {
  background-color: $mainColor1 !important;
  --el-tree-text-color: #fff !important;
  --el-fill-color-light: $mainColor1 !important;
  .el-tree-node__content > .el-checkbox {
    margin-right: 8px;
  }
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: $mainColor2 !important;
}
.el-input-number__decrease,
.el-input-number__increase {
  background-color: $mainColor1 !important;
  border-left: 1px solid $mainColor2 !important;
}

.el-empty__description p {
  color: #c6c6c6 !important;
}
.el-input-group__append,
.el-input-group__prepend {
  border-color: $mainColor2 !important;
  background-color: $mainColor2 !important;
  box-shadow: none !important;
}
.el-input-group__append button.el-button,
.el-input-group__append button.el-button:hover,
.el-input-group__append div.el-select .el-input__wrapper,
.el-input-group__append div.el-select:hover .el-input__wrapper,
.el-input-group__prepend button.el-button,
.el-input-group__prepend button.el-button:hover,
.el-input-group__prepend div.el-select .el-input__wrapper,
.el-input-group__prepend div.el-select:hover .el-input__wrapper {
  border-color: #409eff !important;
  background-color: #409eff !important;
  box-shadow: none !important;
}

.el-radio,
.el-checkbox,
.icon-body .icon-list span,
.el-year-table td.today .cell {
  color: #c6c6c6 !important;
}

.el-time-spinner__item,
.el-time-panel__btn.cancel {
  color: #c6c6c6 !important;
}
.el-time-spinner__item.is-active:not(.is-disabled) {
  color: #409eff !important;
}
.el-picker-panel__footer {
  background-color: transparent !important;
}
.el-rate .el-rate__item {
  svg path {
    fill: $yellow !important;
  }
}
.el-card {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #c6c6c6 !important;
}
.el-tabs__item {
  color: #c6c6c6 !important;
}
.el-tabs__item.is-active {
  color: #409eff !important;
}
.el-tabs__item:focus-visible {
  box-shadow: none !important;
}
.link-type,
.link-type:focus {
  color: #409eff !important;
}
.el-transfer {
  margin-bottom: 20px;
  .el-transfer-panel,
  .el-transfer-panel .el-transfer-panel__header {
    background-color: $mainColor1 !important;
    border-color: $mainColor1 !important;
    color: #c6c6c6 !important;
  }
  .el-transfer-panel__body {
    border-color: $mainColor1 !important;
  }
  .el-checkbox__label {
    color: #c6c6c6 !important;
  }
}
.el-step__title.is-process {
  color: #409eff !important;
}
.el-divider__text {
  background-color: $mainColor1 !important;
  border-color: $mainColor1 !important;
  color: #c6c6c6 !important;
}
.el-divider--horizontal {
  border-color: $mainColor1 !important;
}
.el-progress-bar__outer {
  background-color: $mainColor2 !important;
}
.el-form-item__content {
  color: #fff;
}
.el-tag.el-tag--info {
  background: $mainColor2 !important;
}
.el-radio-group {
  .el-radio-button {
    &.is-active {
      .el-radio-button__inner {
        background: $mainColor2 !important;
        border-color: $mainColor2 !important;
      }
    }
  }
}