/** Elements样式优化 */
@import './themes/default.scss';

/* 表格样式优化 */
.el-table {
  .caret-wrapper {
    height: 14px;
  }

  .sort-caret.ascending {
    top: -5px;
  }

  .sort-caret.descending {
    bottom: -3px;
  }

  th.gutter {
    display: table-cell !important;
  }

  &.ele-table-default-head th {
    background: none;
  }

  .cell.el-tooltip {
    min-width: auto;
  }

  td.el-table-column--selection.el-table__cell .cell,
  th.el-table-column--selection.el-table__cell .cell {
    padding-left: 0;
    padding-right: 0;
  }
}

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

.el-table__expand-icon > .el-icon {
  font-weight: bold;
}

.el-table__column-filter-trigger {
  line-height: 16px;
}

.el-table__column-filter-trigger i {
  font-weight: bold;
}

.el-table--border.el-loading-parent--relative {
  border-color: $--border-color-lighter;
}

.el-table--border .el-loading-mask {
  right: 1px;
  bottom: 1px;
}

/* 分页样式优化 */
.el-pagination {
  font-weight: normal;
  text-align: center;
}

.el-table + .el-pagination {
  margin-top: 15px;
}

.el-pagination.ele-pagination-circle {
  .el-pager li,
  .btn-prev,
  .btn-next {
    border-radius: 50%;
    min-width: 28px;
    margin-left: 0;
    margin-right: 0;

    &:not(.active) {
      background: none;
    }
  }
}

@media screen and (max-width: 768px) {
  .el-pagination.ele-pagination,
  .el-pagination.ele-pagination-circle {
    .el-pagination__total,
    .el-pagination__sizes,
    .el-pagination__jump {
      display: none;
    }
  }
}

/* 弹窗样式优化 */
.el-dialog {
  border-radius: 4px;
  pointer-events: auto;
  max-width: calc(100vw - 30px);

  &.is-fullscreen {
    border-radius: 0;
    max-width: inherit;

    &.ele-dialog-fullscreen {
      display: flex;
      flex-direction: column;

      & > .el-dialog__body {
        flex: auto;
        overflow: auto;
      }
    }
  }
}

.el-dialog__header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid $--border-color-lighter;
  box-sizing: border-box;
  padding-bottom: 12px;
  padding-top: 15px;
}

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

.el-dialog__headerbtn {
  top: auto;
  right: auto;
  line-height: 1;
  font-size: 18px;
  position: static;

  & > i {
    display: block;
  }

  & + .el-dialog__headerbtn {
    margin-left: 10px;
  }

  & > .el-icon-full-screen,
  & > .el-icon-_compress {
    transform: scale(0.85);
    line-height: 0;
  }
}

.el-dialog__body {
  padding-top: 22px;
  padding-bottom: 22px;
}

.el-dialog__footer {
  padding-bottom: 12px;
  border-top: 1px solid $--border-color-lighter;
}

.el-dialog:not(.ele-dialog-form) .el-dialog__body {
  .el-form .el-form-item:last-child {
    margin-bottom: 7px;
  }
}

.ele-dialog-form .el-dialog__body {
  padding-bottom: 5px;
}

/* 抽屉样式优化 */
.el-drawer__header {
  color: $--color-text-regular;
  font-size: 15px;
  margin-bottom: 0;
  padding: 13px 16px;
  border-bottom: 1px solid $--border-color-lighter;

  [role='heading'] {
    display: block;
  }
}

.el-drawer__close-btn {
  padding: 0;
  font-size: 18px;
  color: $--color-text-secondary;
}

.el-drawer__body {
  overflow: auto;
}

/* 弹出框样式优化 */
.el-message-box {
  padding-bottom: 15px;
  max-width: calc(100vw - 30px);
}

.el-message-box__title {
  font-size: 16px;
}

.el-message-box__status {
  font-size: 20px !important;
}

.el-message-box__status + .el-message-box__message {
  padding-left: 30px;
}

/* 气泡确认框样式优化 */
.el-popconfirm__main {
  margin: 12px 0;
}

/* 卡片样式优化 */
.el-card {
  border: none;
  color: $--color-text-regular;
}

.ele-card-border {
  border: 1px solid $--border-color-lighter;
}

.el-card__header {
  font-size: 15px;
  color: $--color-text-primary;
}

.el-card + .el-card {
  margin-top: 15px;
}

/* 圆形标签 */
.ele-tag-round {
  width: 32px;
  padding-left: 0;
  padding-right: 0;
  border-radius: 50%;
  text-align: center;

  &.el-tag--medium {
    width: 28px;
  }

  &.el-tag--small {
    width: 24px;
  }

  &.el-tag--mini {
    width: 20px;
  }
}

/* 圆角标签 */
.ele-tag-radius {
  border-radius: 32px;

  &.el-tag--medium {
    border-radius: 28px;
  }

  &.el-tag--small {
    border-radius: 24px;
  }

  &.el-tag--mini {
    border-radius: 20px;
  }
}

/* 分割线样式优化 */
.el-divider {
  margin: 0;

  &.el-divider--horizontal {
    background: $--border-color-lighter;
  }

  &.ele-divider-base {
    background: $--border-color-base;
  }

  &.ele-divider-light {
    background: $--border-color-light;
  }

  &.ele-divider-lighter {
    background: $--border-color-lighter;
  }

  &.ele-divider-extra-light {
    background: $--border-color-extra-light;
  }

  &.ele-divider-dashed {
    background: linear-gradient(
      to right,
      $--border-color-base,
      $--border-color-base 8px,
      transparent 8px,
      transparent
    );
    background-size: 16px 100% !important;

    &.el-divider--horizontal {
      background: linear-gradient(
        to right,
        $--border-color-lighter,
        $--border-color-lighter 8px,
        transparent 8px,
        transparent
      );
    }

    &.ele-divider-base {
      background: linear-gradient(
        to right,
        $--border-color-base,
        $--border-color-base 8px,
        transparent 8px,
        transparent
      );
    }

    &.ele-divider-light {
      background: linear-gradient(
        to right,
        $--border-color-light,
        $--border-color-light 8px,
        transparent 8px,
        transparent
      );
    }

    &.ele-divider-extra-light {
      background: linear-gradient(
        to right,
        $--border-color-lighter,
        $--border-color-lighter 8px,
        transparent 8px,
        transparent
      );
    }

    &.ele-divider-extra-light {
      background: linear-gradient(
        to right,
        $--border-color-extra-light,
        $--border-color-extra-light 8px,
        transparent 8px,
        transparent
      );
    }
  }
}

/* 警告框样式优化 */
.el-alert__content {
  padding: 0;
}

.el-alert {
  .el-alert__description {
    margin: 0;
  }

  .el-icon-info.ele-text-info,
  .el-icon-error.ele-text-danger,
  .el-icon-warning.ele-text-warning,
  .el-icon-success.ele-text-success {
    font-size: 14px;
    margin-right: 8px;
  }

  .ele-text {
    font-size: 14px;
    color: $--color-text-primary;
  }

  .el-link {
    vertical-align: baseline;
  }
}

.el-alert__icon {
  margin-right: 8px;
}

.el-alert__title + .el-alert__description {
  margin-top: 8px;
}

/* 边框风格的警告框 */
.ele-alert-border.is-light {
  .el-alert__title {
    color: $--color-text-primary;

    &.is-bold {
      font-weight: normal;
    }
  }

  .el-alert__description {
    color: $--color-text-regular;
  }

  .el-alert__closebtn {
    color: $--color-text-secondary;
  }

  &.el-alert--success {
    border: 1px solid $--color-success-light;

    .el-alert__icon.is-big:before {
      content: '\e720';
    }
  }

  &.el-alert--warning {
    border: 1px solid $--color-warning-light;

    .el-alert__icon.is-big:before {
      content: '\e6c9';
    }
  }

  &.el-alert--error {
    border: 1px solid $--color-danger-light;

    .el-alert__icon.is-big:before {
      content: '\e78d';
    }
  }

  &.el-alert--info {
    border: 1px solid $--color-primary-light-8;
    background: $--color-primary-light-9;

    .el-alert__icon {
      color: $--color-primary;

      &.is-big:before {
        content: '\e6bf';
        font-family: 'ele-icon' !important;
      }
    }

    .ele-text-info {
      color: $--color-primary;
    }
  }
}

/* 消息提示框样式优化 */
.el-message {
  .el-message__icon {
    font-size: 18px;
  }

  .el-message__content {
    line-height: 18px;
  }

  &.el-message--info {
    border-color: $--color-primary-light-8;
  }

  &:not(.ele-message-border) {
    background: $--popover-background-color;
    box-shadow: $--box-shadow-light;
    border-radius: 2px;
    border: none;

    .el-message__content {
      color: inherit;
    }
  }

  &.ele-message-loading .el-message__icon {
    animation: rotating 1s linear infinite;

    &:before {
      content: '\e73d';
      font-family: 'ele-icon' !important;
    }
  }
}

/* 消息通知样式优化 */
.el-notification__title {
  font-weight: 500;
}

/* 徽章样式优化 */
.ele-badge-static {
  line-height: 0;

  .el-badge__content {
    position: static;
    transform: none;
  }
}

/* 上传组件样式优化 */
.el-upload-dragger {
  background: none;
  border-color: $--border-color-base;
}

/* 头像组件样式优化 */
.el-avatar > img {
  width: 100%;
}

/* 数字输入框样式优化 */
.el-input-number.ele-text-left .el-input__inner {
  text-align: left;
}

.el-input-number.ele-text-right .el-input__inner {
  text-align: right;
}

/* 单选框样式优化 */
.el-radio__inner:after {
  width: $--radio-inner-width;
  height: $--radio-inner-height;
  background-color: $--radio-inner-background-color;
}

/* 日期选择框样式优化 */
.el-date-editor--daterange.ele-fluid {
  padding-right: 5px;
}

.el-date-editor--daterange.ele-fluid .el-range-input {
  flex: 1;
  width: auto;
  overflow: hidden;
}

.el-date-editor--daterange.ele-fluid .el-range-separator {
  width: auto;
}

/* 面包屑样式优化 */
.el-breadcrumb__inner,
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: $--color-text-secondary;
  font-weight: normal;
}

.el-breadcrumb__item:last-child .el-breadcrumb__inner,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a,
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,
.el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover {
  color: $--color-text-regular;
}

/* 选项卡样式优化 */
.el-tabs .el-tabs__header,
.el-tabs .el-tabs__header.is-left,
.el-tabs .el-tabs__header.is-right,
.el-tabs .el-tabs__header.is-bottom {
  margin: 0;
}

.el-tabs__nav-wrap:after {
  height: 1px;
}

.el-tabs--left .el-tabs__nav-wrap.is-left:after,
.el-tabs--left .el-tabs__nav-wrap.is-right:after,
.el-tabs--right .el-tabs__nav-wrap.is-left:after,
.el-tabs--right .el-tabs__nav-wrap.is-right:after {
  width: 1px;
}

.el-tabs__item {
  color: inherit;
  padding: 0 15px;
  transition: background-color 0.2s, color 0.2s, border-bottom-color 0.2s,
    border-top-color 0.2s, border-left-color 0.2s, border-right-color 0.2s;
}

/* 时间线样式优化 */
.ele-timeline {
  .el-timeline-item__tail {
    top: 2px;
    border-left-width: 1px;
  }

  .el-timeline-item__node--normal {
    left: 0;
    top: 2px;
    width: 9px;
    height: 9px;
  }

  .el-timeline-item__node--primary {
    top: 4px;
    left: 2px;
    width: 5px;
    height: 5px;
    background: $--color-white;
    box-shadow: 0 0 0 3px $--color-primary;
  }

  .el-timeline-item__content {
    color: $--color-text-regular;
  }
}

/* 颜色选择器样式优化 */
.el-color-predefine__color-selector.selected {
  box-shadow: none;
}

.el-color-predefine__color-selector.selected > div {
  display: block;
  line-height: 20px;
  text-align: center;
  font-size: 14px;
  color: #fff;
}

.el-color-predefine__color-selector.selected > div:before {
  content: '\e6da';
  font-family: 'element-icons' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 步骤条样式优化 */
.el-step {
  flex-grow: 1;
}

.el-step__line {
  background: $--border-color-light;
}

.el-step__line-inner {
  border-right: none;
  border-bottom: none;
  transition-delay: 0ms !important;
}

.el-step.is-horizontal {
  .el-step__line {
    height: 1px;
  }

  .el-step__line-inner {
    border-left: none;
  }
}

.el-step.is-vertical {
  .el-step__line {
    width: 1px;
  }

  .el-step__line-inner {
    border-top: none;
  }
}

.el-step__icon.is-text {
  border-width: 1px;
  border-color: $--border-color-base;
}

.el-step__icon-inner,
.el-step__title.is-process {
  font-weight: 500;
}

.el-step__head.is-process {
  color: $--color-primary;

  .el-step__icon.is-text {
    color: #fff;
    border-color: $--color-primary;
    background: $--color-primary;
  }
}

.el-step__head.is-finish {
  .el-step__icon.is-text {
    color: $--color-primary;
    border-color: $--color-primary;
  }

  .el-step__line-inner {
    border-width: 1px !important;
  }

  .el-step__icon.is-text .el-step__icon-inner {
    font-size: 0;

    &:before {
      content: '\e6da';
      font-size: 14px;
      font-family: element-icons !important;
      font-style: normal;
      font-weight: 400;
      font-variant: normal;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
}

.el-step.is-horizontal .el-step__head.is-finish .el-step__line-inner {
  width: 100% !important;
}

.el-step.is-vertical .el-step__head.is-finish .el-step__line-inner {
  height: 100% !important;
}

.el-step__title.is-finish,
.el-step__description.is-finish {
  color: $--color-text-secondary;
}

.el-step.is-vertical .el-step__description {
  padding-bottom: 8px;
}

.el-step__head.is-error .el-step__icon.is-text {
  border-color: $--color-danger;
}

.ele-steps-horizontal {
  .el-step {
    display: flex;

    .el-step__head {
      width: auto;
      position: static;
      padding: 4px 8px 0 0;

      .el-step__line {
        left: 40px;
        right: 8px;
        top: 15px;
      }
    }

    .el-step__main {
      /*flex: 1;*/
      flex-grow: 1;
      position: relative;

      .el-step__title {
        line-height: 32px;
        background: $--color-white;
        display: inline-block;
        padding-right: 8px;
      }

      .el-step__description {
        margin-top: 0;
      }
    }
  }

  .el-step__icon.is-icon {
    width: 32px;
  }
}

/* 菜单组件样式优化 */
.el-menu {
  .el-menu-item > a {
    color: inherit;
    display: block;
    height: inherit;
    line-height: inherit;
    text-decoration: none;
    background: transparent;
    position: static;

    &:before {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      background: transparent;
      content: '';
    }
  }

  .el-menu-item,
  .el-submenu > .el-submenu__title {
    color: $--color-text-regular;
    background: none;
  }

  .el-menu-item.is-active,
  .el-submenu.is-active > .el-submenu__title {
    color: $--color-primary;
    background: none;
  }

  .el-menu-item.is-disabled {
    opacity: 0.5;
  }

  .el-menu-item [class^='el-icon-'],
  .el-submenu__title [class^='el-icon-'] {
    width: auto;
    font-size: $--menu-item-font-size + 2px;
    margin-right: 0;

    & + span {
      margin-left: 10px;
    }
  }

  .el-menu-item i,
  .el-submenu__title i {
    color: inherit;
  }

  .el-submenu__icon-arrow {
    font-weight: bold;
    margin-top: -6px;
  }

  .el-submenu > .el-menu {
    background: none;
  }

  .el-submenu .el-menu-item {
    min-width: auto;
  }

  &.el-menu--horizontal {
    & > .el-menu-item:not(.is-disabled):focus {
      background: none;
    }

    & > .el-menu-item:not(.is-disabled):hover,
    & > .el-submenu:not(.is-disabled) > .el-submenu__title:hover {
      color: $--color-primary;
      background: $--header-tool-hover-bg;
    }

    .el-menu-item.is-active {
      color: $--color-primary;
    }

    & > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
      margin-left: 6px;
      margin-top: 0;
    }
  }

  &:not(.el-menu--horizontal):not(.el-menu--popup) {
    .el-menu-item,
    .el-submenu__title {
      height: $--menu-vertical-item-height;
      line-height: $--menu-vertical-item-line-height;
    }

    .el-submenu,
    .el-menu-item {
      margin-top: $--menu-vertical-item-margin;
    }

    .el-menu-item:not(.is-disabled):not(.is-active):hover,
    .el-submenu:not(.is-disabled) > .el-submenu__title:hover {
      color: $--color-primary;
      background: none;
    }

    .el-menu-item:not(.is-disabled):not(.is-active):active,
    .el-submenu:not(.is-disabled) > .el-submenu__title:active {
      background: $--menu-item-hover-fill;
    }

    .el-menu-item:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 3px;
      background: $--color-primary;
      transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
        opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
      transform: scaleY(0.0001);
      opacity: 0;
    }

    .el-menu-item.is-active {
      background: $--menu-item-hover-fill;

      &:after {
        opacity: 1;
        transform: scaleY(1);
        transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
          opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
      }
    }

    .el-submenu__icon-arrow {
      right: 15px;
    }

    &.el-menu--collapse > .el-menu-item,
    &.el-menu--collapse > .el-submenu > .el-submenu__title {
      padding: 0 !important;
      text-align: center;

      span {
        display: none;
      }
    }

    .el-menu--vertical:not(.el-menu el-menu--inline) {
      position: fixed !important;

      & > .el-menu--popup {
        position: static;
      }
    }

    /*& > .el-submenu {
      &:before,
      &:after {
        display: table;
        content: "";
      }
    }*/
  }
}

.el-menu--collapse .el-menu .el-submenu {
  min-width: auto;
}

/* 弹出式子菜单样式优化 */
div[class^='el-menu--'] > .el-menu.el-menu--popup {
  width: 160px;
  min-width: 160px;
  max-height: calc(100vh - 20px);
  box-shadow: $--menu-popup-box-shadow;
  background: $--color-white;
  border-radius: 4px;
  overflow-y: auto;
  border: none;

  & > .el-menu-item,
  & > .el-submenu > .el-submenu__title {
    color: $--color-text-regular;
    height: $--menu-popup-item-height;
    line-height: $--menu-popup-item-line-height;
    padding: $--menu-popup-item-padding;
    margin: $--menu-popup-item-margin;
    border-top: none;
    border-bottom: none;

    &:after {
      display: none;
    }
  }

  .el-menu-item:not(.is-disabled):not(.is-active):hover,
  .el-submenu:not(.is-disabled) > .el-submenu__title:hover {
    color: $--color-primary;
    background: none;
  }

  .el-menu-item:not(.is-disabled):not(.is-active):active,
  .el-submenu:not(.is-disabled) > .el-submenu__title:active {
    background: $--menu-item-hover-fill;
  }

  .el-menu-item.is-active {
    color: $--color-primary;
    background: $--menu-item-hover-fill;
  }

  .el-submenu.is-active > .el-submenu__title {
    color: $--color-primary;
  }

  & > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
    right: 8px;
    margin-top: -5px;
    position: absolute;
    transform: none;
  }

  & > .el-submenu > .el-menu--horizontal,
  & > .el-submenu > .el-menu--vertical {
    position: fixed;
  }

  &::-webkit-scrollbar,
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

/* 深色主题的菜单 */
.el-menu.ele-menu-dark {
  background: $--sidebar-background-dark;
  border: none;

  & > .el-menu-item,
  & > .el-submenu > .el-submenu__title,
  ul:not(.el-menu--popup) > .el-menu-item,
  ul:not(.el-menu--popup) > .el-submenu > .el-submenu__title {
    color: $--menu-dark-item-color;
  }

  & > .el-menu-item.is-active,
  & > .el-submenu.is-active > .el-submenu__title,
  ul:not(.el-menu--popup) > .el-menu-item.is-active,
  ul:not(.el-menu--popup) > .el-submenu.is-active > .el-submenu__title {
    color: $--menu-dark-item-selected-color;
  }

  &:not(.el-menu--horizontal) {
    & > .el-menu-item:not(.is-disabled):not(.is-active):hover,
    & > .el-submenu:not(.is-disabled) > .el-submenu__title:hover,
    ul:not(.el-menu--popup)
      > .el-menu-item:not(.is-disabled):not(.is-active):hover,
    ul:not(.el-menu--popup)
      > .el-submenu:not(.is-disabled)
      > .el-submenu__title:hover {
      color: $--menu-dark-item-selected-color;
    }

    & > .el-menu-item:not(.is-disabled):not(.is-active):active,
    & > .el-submenu:not(.is-disabled) > .el-submenu__title:active,
    ul:not(.el-menu--popup)
      > .el-menu-item:not(.is-disabled):not(.is-active):active,
    ul:not(.el-menu--popup)
      > .el-submenu:not(.is-disabled)
      > .el-submenu__title:active {
      color: $--menu-dark-item-selected-color;
      background: none;
    }

    & > .el-menu-item:after,
    ul:not(.el-menu--popup) > .el-menu-item:after {
      display: none;
    }

    & > .el-menu-item.is-active,
    ul:not(.el-menu--popup) > .el-menu-item.is-active {
      background: $--color-primary;
    }

    & > .el-menu-item-group > .el-menu-item-group__title,
    ul:not(.el-menu--popup) > .el-menu-item-group > .el-menu-item-group__title {
      color: $--menu-dark-item-color;
      opacity: 0.9;
    }
  }

  &.el-menu--horizontal {
    & > .el-menu-item:not(.is-disabled):hover,
    & > .el-submenu:not(.is-disabled) > .el-submenu__title:hover {
      color: $--menu-dark-item-selected-color;
      background: $--header-tool-hover-bg;
    }

    & > .el-menu-item.is-active,
    & > .el-submenu.is-active > .el-submenu__title {
      color: $--menu-dark-item-selected-color;
      border-color: $--menu-dark-item-selected-color;
    }
  }
}

// 深色主题的弹出式子菜单
div.ele-menu-dark > .el-menu.el-menu--popup {
  background: $--sidebar-background-dark;
  box-shadow: $--menu-popup-dark-box-shadow;

  & > .el-menu-item,
  & > .el-submenu > .el-submenu__title {
    color: $--menu-dark-item-color;
  }

  & > .el-menu-item:not(.is-disabled):not(.is-active):hover,
  & > .el-submenu:not(.is-disabled) > .el-submenu__title:hover {
    color: $--menu-dark-item-selected-color;
  }

  & > .el-menu-item:not(.is-disabled):not(.is-active):active,
  & > .el-submenu:not(.is-disabled) > .el-submenu__title:active {
    background: none;
  }

  & > .el-menu-item.is-active {
    color: $--menu-dark-item-selected-color;
    background: $--color-primary;
  }

  & > .el-submenu.is-active > .el-submenu__title {
    color: $--menu-dark-item-selected-color;
  }

  .el-menu-item-group__title {
    color: $--menu-dark-item-color;
    opacity: 0.6;
  }
}