// cover some element-ui styles

// 下拉选项卡
.dt-dropdown-nav {
  &.el-dropdown-menu {
    margin-top: 16px;
    padding: 4px 0;
    background: $colorDarkGrey;
    border-radius: 2px;
    border: none;
    min-width: 96px;
  }

  .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: $colorGrey;
    color: #ffffff;
  }

  &.dt-lang.el-dropdown-menu {
    background-color: $colorGrey;

    .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
      background-color: $colorDarkGrey;
    }

    .el-dropdown-menu__item.is-disabled {
      background-color: $colorDarkGrey;
    }
  }

  .el-dropdown-menu__item {
    padding: 0 16px;
    line-height: 28px;
    font-size: $fontDefault;
    color: #FFFFFF;

    &.active, &.active:focus, &.active:not(.is-disabled):hover {
      background-color: $colorDarkGrey;
      color: $colorHover;
      font-weight: bold;
    }
  }

  .el-dropdown-menu__item:last-child {
    // color: #C0BF87;
  }

  .popper__arrow {
    display: none;
  }
}

// confirm样式
.dt-confirm {
  width: 360px;
  padding-bottom: 8px;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);

  .el-message-box__title {
    color: $textColor;
  }

  .el-message-box__close {
    color: $bgIcon;

    &:hover {
      color: $bgIcon;
    }
  }

  .el-message-box__btns {
    .el-button--small {
      padding: 7px 12px;
    }

    .el-button--default {
      border: none;
      color: $colorPrimary;

      &:hover {
        background-color: #ffffff;
      }
    }

    .el-button--primary {
      color: #ffffff;
      background-color: $colorPrimary;
      border-color: $colorPrimary;

      &:hover {
        background-color: $colorPrimary;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
      }
    }
  }
}

// 提示
.dt-tooltip {
  &.el-tooltip__popper.is-dark {
    background: $colorGrey;
    padding: 5px;
    border-radius: 2px;
  }

  &.dt-tooltip-none {
    display: none;
  }


  &.el-tooltip__popper[x-placement^=bottom] {
    margin-top: 0;
  }

  &.el-tooltip__popper[x-placement^=top] {
    margin-bottom: 0;
  }

  &.el-tooltip__popper[x-placement^=right] {
    margin-left: 2px;
  }

  &.el-tooltip__popper[x-placement^=right] .popper__arrow {
    left: -6px;
    border-right-color: $lineColor;
    border-left-width: 0
  }

}

.dt-modal {
  .el-dialog {
    box-shadow: -2px 0px 10px 0px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    margin: auto;
  }

  .el-dialog__header {
    padding: 0 16px;
    height: 48px;
    line-height: 48px;
    color: #4A4A4A;

    .el-dialog__headerbtn {
      top: 15px;
    }

    .title-right {
      float: right;
      color: $bgIcon;
      display: flex;

      .icon-close {
        cursor: pointer;
        font-size: 16px;
      }
    }

    .tool span {
      font-size: $fontDefault;
      cursor: pointer;
      padding-left: 20px;
    }
  }

  .el-dialog__title, .dialog-title {
    font-size: 18px;
    color: $textColor;
  }

  .el-dialog__header .el-dialog__close {
    color: $bgIcon;
  }

  .el-dialog__header .el-dialog__close:hover {
    color: $bgIcon;
  }

  .el-dialog__body {
    clear: both;
    padding: 0 16px;
    font-size: $fontDefault;
    margin-right: 2px;
    width: auto;
    box-sizing: border-box;
    height: auto;
    overflow-y: hidden;

    &:hover {
      overflow-y: auto;
    }
  }

  .el-dialog__footer {
    position: relative;
    font-size: $fontDefault;
    padding: 0 16px;
    height: 48px;
    line-height: 48px;
    box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.2);

    span {
      cursor: pointer;
      padding-left: 25px;
    }

    button {
      margin-left: 20px;
      padding: 0 10px;
      outline: none;
      line-height: 24px;

      span {
        padding-left: 0
      }
    }
  }

  .el-dialog__header {
    top: 17px;
    font-size: $fontLarge;
  }

  &.dt-modal-center {
    .el-dialog {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &.dt-small .el-dialog {
    width: 360px;

    .el-dialog__body {
      max-height: 264px;
    }
  }

  &.dt-medium .el-dialog {
    width: 560px;

    .el-dialog__body {
      max-height: 400px;
    }
  }

  &.dt-large .el-dialog {
    width: 880px;

    .el-dialog__body {
      max-height: 800px;
    }
  }
}

.dt-message {
  width: 320px;
  background: #ffffff;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3);
  padding: 13px 26px 13px 13px;
  border-radius: 4px;

  .el-notification__icon {
    height: 16px;
    width: 16px;
    font-size: 16px;
    margin: 2px 11px 0 0;
  }

  &.dt-notice .el-notification__title {
    color: $textColor;
    font-size: $fontLarge;
    font-weight: normal;
    margin-bottom: 16px;
    line-height: 20px;
  }

  .el-notification__closeBtn {
    top: 15px;
    right: 14px;
  }

  .el-notification__group {
    margin-left: 0;
  }

  .el-notification__content {
    font-size: $fontDefault;
    color: $textColor;
    margin: 0 10px 0 0;
    line-height: 20px;
  }

  .el-icon-success {
    color: $colorSuccess;
  }

  .el-icon-warning {
    color: $colorWarning;
  }

  .el-icon-error {
    color: $colorError;
  }

  .el-icon-info {
    display: none;
  }
}

.dt-table-content {
  .el-table, .el-table thead {
    color: $textColor;
  }

  .el-table--border, .el-table--group {
    border: none;
  }

  .el-table th {
    background-color: $bgColor;
  }

  .el-table th.is-leaf, .el-table th.is-leaf {
    border-bottom-color: $bgIconDisabled;
  }

  .el-table td, .el-table--border th {
    border-bottom-color: $lineColor;
  }

  .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
    border-right-color: $lineColor;
  }

  .el-table td, .el-table th {
    padding: 8px 0;
  }

  &.small {
    .el-table td, .el-table th {
      padding: 6px 0;
    }
  }

  &.large {
    .el-table td, .el-table th {
      padding: 10px 0;
    }
  }

  .el-table__expanded-cell[class*=cell] {
    padding: 0
  }

  .el-table::before {
    height: 0px;
  }

  .el-table--border::after, .el-table--group::after {
    width: 0px;
  }

  tr td:last-child {
    border-right: none;
  }

  .el-table__header th:last-child {
    border-right: none;
  }

  .el-table .cell {
    font-size: $fontDefault;
    line-height: 18px;

    .td-icon {
      font-size: 18px;
      color: $textPrimary;
    }
  }

  .el-table__fixed-right::before, .el-table__fixed::before {
    display: none;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: $bgColor;
  }

  .el-table__body tr.current-row > td {
    background-color: $bgHighlight;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td {
    background-color: $bgHighlight;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td,
  .el-table__body tr.hover-row.current-row > td,
  .el-table__body tr.hover-row.el-table__row--striped.current-row > td,
  .el-table__body tr.hover-row.el-table__row--striped > td,
  .el-table__body tr.hover-row > td {
    background-color: $lineColor;
  }

  .el-date-editor .el-range__close-icon {
    float: left;
  }

  .el-date-editor .el-range__icon {
    float: right;
  }

  .el-table__expanded-cell td,
  .el-table__expanded-cell th {
    border-right: none;
  }

  .el-table__column-filter-trigger i:before {
    font-family: "fontLisening";
    content: "\E849";
    font-size: 20px;
    vertical-align: middle;
  }


  .el-table__expand-icon--expanded {
    transform: rotate(90deg);

    .el-icon-arrow-right:before {
      font-family: "fontLisening";
      content: "\e88a";
    }
  }

  .el-table__empty-text {

    font-size: $fontDefault;
  }

  .el-table__empty-text a {
    color: $colorPrimary;
    cursor: pointer;

    &.disabled {
      cursor: not-allowed;
    }
  }

  .el-progress__text {
    float: left;
    margin-left: 0px;
    margin-right: 10px;
  }

  .el-table__empty-block {
    min-height: 40px;
  }

  .el-table .caret-wrapper {
    height: 14px;
  }

  .el-table .sort-caret {
    border: 4px solid transparent;

    &.ascending {
      border-bottom-color: $bgIconDisabled;
      top: -3px;
    }

    &.descending {
      border-top-color: $bgIconDisabled;
      bottom: -1px;
    }
  }

  .el-table .ascending .sort-caret.ascending {
    border-bottom-color: $colorPrimary;
  }

  .el-table .descending .sort-caret.descending {
    border-top-color: $colorPrimary;
  }

  .el-table__expand-column {
    border-right: none;
  }

  .dt-td-children {
    color: rgba(74, 74, 74, 0.54);
  }

  .el-table__expand-icon {
    .el-icon-arrow-right:before {
      font-family: "fontLisening";
      content: "\e88a";
    }

    .el-icon {
      color: $bgIconDisabled;
    }
  }

  .el-table thead.is-group th, .el-table__footer-wrapper tbody td, .el-table__header-wrapper tbody td {
    background-color: $bgColor;
    font-weight: bold;
    color: $textColor;
  }

  .el-table__footer-wrapper td {
    border-top: 1px solid $bgIconDisabled;
  }

  .el-table__fixed-right-patch {
    top: 0;
    background-color: $bgColor;
    border-bottom: 1px solid $bgIconDisabled;;
  }

  //.el-table--border th.gutter:last-of-type {
  //  border-bottom: 1px solid $bgIconDisabled;
  //}
  .el-table-column--selection .cell {
    padding: 0;
  }

  &.el-table--scrollable-y .el-table__body-wrapper {
    overflow-y: hidden;
  }

  &.el-table--scrollable-y:hover .el-table__body-wrapper {
    overflow-y: auto;
  }
}

.dt-collapse {
  .el-collapse-item__arrow {
    display: none;
  }

  .el-collapse-item__header {
    font-weight: bold;
    font-size: $fontLarge;

    .el-icon-caret-bottom {
      margin-right: 8px;
      color: $colorPrimary;
      transform: rotate(0deg);
      transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
    }
  }

  .is-active .el-collapse-item__header .el-icon-caret-bottom {
    transform: rotate(180deg);
  }

  .el-collapse-item__header, .el-collapse-item__wrap {
    padding: 0 16px;
  }

  .el-collapse-item__content {
    font-size: $fontDefault;
  }
}

.el-button + .el-button {
  margin-left: 8px;
}

.btn-start {
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 1);
  border: none;
  outline: none;

  .icon-end-start:hover {
    color: $colorPrimary;
  }

  .icon-end-start {
    cursor: pointer;
  }
}

.btn-start[disabled] {
  .icon-end-start {
    opacity: 0.6 !important;
    color: #B9B9AF !important;
  }
}

.btn-end {
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 1);
  border: none;
  outline: none;

  .icon-end-start {
    &:hover {
      color: $colorPrimary;
    }

    cursor: pointer;
  }
}

.btn-end[disabled] {
  .icon-end-start {
    opacity: 0.6 !important;
    color: #B9B9AF !important;
  }
}

.mc-pagination {
  display: flex;
  justify-content: center;
  align-items: center;

  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }

  .inner-input {
    height: 24px;
    width: 56px;
    text-align: center;
    line-height: 24px;
    color: rgba(41, 41, 41, 1);
    font-size: 12px;
    outline: none;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(208, 208, 199, 1);
  }

  span:not([class*=suffix]) {
    font-size: $fontDefault;
    margin-left: 2px;
    margin-right: 6px;

    .el-input {
      margin: 0 -6px;
    }
  }

  span:not([class*=suffix]).total-span {
    margin-left: -10px;
  }

  span:not([class*=suffix]).page-span {
    margin-left: -5px;
  }

  .el-pagination__jump {

    color: rgba(41, 41, 41, 0.6);

    .el-pagination__editor {
      .el-input__inner {
        height: 24px;
        width: 32px;
        color: #000000;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(208, 208, 199, 1);

      }

      font-size: $fontDefault;
    }
  }


  text-align: right;
  color: $textCaption;

  .btn-next, .btn-prev {
    color: $bgIcon;
    min-width: 20px;

    .el-icon {
      font-size: $fontLarge
    }
  }

  .btn-prev {

    .el-icon-arrow-left:before {
      font-family: "fontLisening";
      content: "\e88b";
    }

    padding-right: 8px;
  }

  .btn-next {

    .el-icon-arrow-right:before {
      font-family: "fontLisening";
      content: "\e88a";
    }

    padding-left: 8px;
  }

  button:hover {
    color: $colorPrimary;
  }

  button:disabled:hover {
    color: $bgIconDisabled;
  }

  .el-pager li {
    font-size: $fontDefault;
    min-width: 25px;
    height: 26px;
    line-height: 28px;

    &:hover {
      color: $colorPrimary;
    }

    &.active {
      color: $colorPrimary;
    }
  }

  .total {
    font-size: 12px !important;
    padding: 0 2px;
  }

  .el-pagination__sizes {
    margin: 0 0 0 8px;

    .el-select .el-input {
      margin: 0;
      margin-left: -14px;

      .el-input__inner {
        color: #292929;
        height: 24px;
        width: 84px;
        line-height: 24px;
        font-size: $fontDefault;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(208, 208, 199, 1);
      }

      .el-input__inner:hover {
        border-color: $bgIconDisabled;
      }
    }
  }
}

// 选项卡
.dt-tabs {
  border: none;
  box-shadow: none;
  height: 100%;

  > .el-tabs__header {
    border-bottom: 1px solid $bgIconDisabled;
    margin: 0 0 8px;

    .el-tabs__nav {
      border: 1px solid $bgIconDisabled;
      border-bottom: none;
    }

    .el-tabs__item {
      padding: 6px 10px !important;
      background-color: $bgColor;
      height: auto;
      line-height: 20px;
      text-align: center;
      color: $textColor;
      font-size: $fontDefault;
      border-left: 1px solid $bgIconDisabled;
      border-bottom: 1px solid $bgIconDisabled;
    }

    .el-tabs__item.is-active {
      color: $colorPrimary;
      border-right-color: $bgIconDisabled;
      border-left-color: $bgIconDisabled;
      background: #ffff;
    }

    .el-tabs__item:not(.is-disabled):hover {
      color: $colorPrimary;
      font-weight: 600;
    }

    .el-tabs__item.is-disabled {
      color: $textDisabled;
      cursor: not-allowed;
    }
  }

  > .el-tabs__content {
    padding: 0;
    height: calc(100% - 32px);
  }

  .el-tabs__item:focus.is-active.is-focus:not(:active) {
    box-shadow: none;
    border-radius: 3px
  }
}


.mc-tree {
  .el-tree-node.is-checked {
    background-color: $bgColor;
  }

  .el-tree-node.is-checked {
    background: none;

    .el-tree-node__content {
      background-color: $bgColor;
    }

    .el-tree-node__children .el-tree-node__content {
      background: none;
    }
  }

  .el-tree-node__content {
    height: 28px;
    line-height: 28px;
    color: $textColor;
    font-size: $fontDefault;
  }

  .el-tree-node__label {
    font-size: $fontDefault;
  }

  .el-tree-node__content:hover {
    background-color: $bgColor;
  }

  .el-tree-node__expand-icon {
    color: $colorPrimary;
  }

  &.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: $bgHighlight;
  }

  .el-tree-node__expand-icon.is-leaf {
    color: transparent;
  }

  .el-tree-node__content > .el-tree-node__expand-icon {
    padding: 0;
    margin-right: 5px;
  }

  .empty {
    display: block;
    height: 28px;
    line-height: 28px;
    font-size: $fontDefault;
    text-align: center;
    color: $textColor;
  }

  .mc-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding-right: 8px;
    color: $textColor;

    .title {
      i {
        font-size: 14px;
        color: $textPrimary;
        padding-right: 4px;
      }

    }

    .subTitle {
      padding-left: 5px;
      color: rgba(74, 74, 74, 0.54);
    }

    .text-right {
      color: rgba(74, 74, 74, 0.54);
    }
  }

  &.dt-checked-tree {
    .el-tree-node.is-checked {
      background: none;
    }

    .el-tree-node__content:hover {
      background-color: $bgColor;
      color: $textColor;
    }
  }

  .el-tree__empty-block {
    font-size: $fontDefault;
  }

  .el-tree__drop-indicator {
    background: $colorPrimary;
  }

}

.mc-tag {
  &.el-tag--plain {
    border-color: $lineColorDark;
    color: $textColor;

    &.is_radius {
      border-radius: 14px;
    }

    &.el-tag--success {
      border-color: $colorSuccess;
      color: $colorSuccess;
    }

    &.el-tag--warning {
      border-color: $colorWarning;
      color: $colorWarning;
    }

    &.el-tag--error {
      border-color: $colorError;
      color: $colorError;
    }
  }
}

.dt-image-container {
  &:hover {
    .dt-img-option {
      position: absolute;
      z-index: 200;
      display: block;
    }

    .dt-img-mask {
      position: absolute;
      z-index: 100;
      display: block;
      background: rgba(41, 41, 41, 0.78);
    }
  }

  .dt-image {
    .el-image-viewer__wrapper {
      .el-image-viewer__close {
        .el-icon-circle-close:before {
          font-family: "fontLisening";
          content: '\e81a';
        }
      }

      .el-image-viewer__mask {
        background: #000000;
      }

      .el-image-viewer__actions {
        display: none;
      }

      .el-image-viewer__actions__inner > i:nth-of-type(3) {
        display: none
      }

      .el-image-viewer__actions__inner > i:nth-of-type(4) {
        display: none
      }

      .el-image-viewer__actions__inner > i:nth-of-type(5) {
        display: none
      }

      .el-image-viewer__close {
        top: 16px;
        right: 16px;
        height: 24px;
        width: 24px;
        font-size: 14px;
        background: #B9B9AF;
        color: #FFFFFF;
      }

      .el-image-viewer__prev {
        left: 24px;
        height: 24px;
        width: 24px;
        font-size: 14px;
        background: #B9B9AF;
      }

      .el-image-viewer__next {
        right: 24px;
        height: 24px;
        width: 24px;
        font-size: 14px;
        background: #B9B9AF;
      }

      .el-image-viewer__img {
        max-width: 80%;
      }
    }

    &.dt-img-bar {
      .el-image-viewer__actions {
        display: block;
      }
    }
  }
}

.dt-carousel {
  .el-carousel__arrow--right, .el-carousel__arrow--left {
    width: 24px;
    height: 24px;
    border-radius: 0%;
    font-size: 18px;
    background: none;
  }

  .el-icon-arrow-right:before {
    font-family: "fontLisening";
    content: '\e88a';
  }

  .el-icon-arrow-left:before {
    font-family: "fontLisening";
    content: '\e88b';
  }

  .is-active {
    .el-carousel__button {
      width: 20px;
      height: 6px;
      border-radius: 4px;
      background: rgba(24, 120, 201, 1);
    }
  }

  .is-active.el-carousel__indicator--vertical {
    .el-carousel__button {
      width: 6px;
      height: 20px;
      border-radius: 4px;
      background: rgba(24, 120, 201, 1);
    }
  }

  .el-carousel__button {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(208, 208, 199, 1);
  }

  .dt-carousel-top {
    .el-carousel__indicators {
      top: 0;
    }
  }

  .dt-carousel-left {
    .el-carousel__indicators {
      left: 0;
    }
  }
}