// @use 'sass:color';
@use '../common-var.scss' as *;

@function darken($color, $weight) {
  @return mix(#141414, $color, $weight);
}

@function tint($color, $weight) {
  @return mix(#fff, $color, $weight);
}

@each $type in map-keys($cst-button-colors) {
  $color: map-get($cst-button-colors, $type);
  [#{$type}],
  .el-button[#{$type}] {
    --el-button-bg-color: #{$color};
    --el-button-text-color: var(--el-color-white);
    --el-button-border-color: #{$color};
    --el-button-hover-bg-color: #{tint($color, 30%)};
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-border-color: #{tint($color, 30%)};
    --el-button-active-bg-color: #{darken($color, 20%)};
    --el-button-active-border-color: #{darken($color, 20%)};
    &.is-disabled {
      --el-button-disabled-bg-color: #{tint($color, 50%)};
      --el-button-disabled-text-color: var(--el-color-white);
      --el-button-disabled-border-color: #{tint($color, 50%)};
    }
    &.is-plain {
      --el-button-bg-color: #{tint($color, 90%)};
      --el-button-text-color: #{$color};
      --el-button-border-color: #{tint($color, 50%)};
      --el-button-hover-bg-color: #{$color};
      --el-button-hover-text-color: var(--el-color-white);
      --el-button-hover-border-color: #{$color};
      --el-button-active-bg-color: #{darken($color, 20%)};
      --el-button-active-border-color: #{darken($color, 20%)};
      --el-button-active-text-color: var(--el-color-white);
      &.is-disabled {
        --el-button-disabled-bg-color: #{tint($color, 90%)};
        --el-button-disabled-text-color: #{tint($color, 50%)};
        --el-button-disabled-border-color: #{tint($color, 80%)};
      }
    }
    &.is-link {
      --el-button-text-color: #{$color};
      --el-button-hover-text-color: #{$color};
      --el-button-hover-link-text-color: #{darken($color, 20%)};
      --el-button-active-color: #{darken($color, 30%)};
    }
    &[special] {
      --el-button-text-color: var(--el-color-primary);
      --el-button-hover-text-color: var(--el-color-primary);
      --el-button-hover-bg-color: var(--el-color-primary-light-8);
      --el-button-active-bg-color: var(--el-color-primary-light-9);
    }
  }
}

button.el-button {
  &:not(.is-plain, .is-round, .is-circle) {
    border: none;
  }
  &:not(.is-link) {
    min-width: 64px;
  }
}

/** 显示table的Card */
.el-card[table] {
  border: none;
  &:not([shadow]) {
    box-shadow: none;
  }
  /** table上方无操作按钮区域 */
  &[less] {
    .el-card__body {
      padding-top: map-get($cst-gap-space, 'medium-mini');
    }
  }
}

/** 自定义pagination 样式 */
.el-pagination:not(.m-t-unset) {
  margin-top: map-get($cst-gap-space, 'base');
}

/** 靠右对齐 */
.el-pagination[right] {
  justify-content: flex-end;
}

.el-dialog[custom] {
  .el-dialog__header {
    height: var(--el-dialog-header-height);
    line-height: var(--el-dialog-header-height);
    background-color: var(--el-dialog-header-bg-color);
    border-radius: var(--el-dialog-border-radius) var(--el-dialog-border-radius) 0 0;
    font-size: var(--el-dialog-header-font-size);
    color: var(--el-dialog-header-font-color);
    padding: 0 var(--el-dialog-padding-primary);
    margin: 0;
    overflow: hidden;
    .el-dialog__headerbtn {
      width: var(--el-dialog-header-height);
      height: var(--el-dialog-header-height);
      top: 0;
    }
  }

  .el-dialog__body {
    max-width: 100%;
    overflow-x: auto;
  }
  &[unless] {
    .el-dialog__header {
      display: none;
    }
  }

  &[small] .el-dialog__body {
    padding: map-get($ep-dialog-body-padding, 'small');
  }
  .el-dialog__body,
  &[base] .el-dialog__body {
    padding: map-get($ep-dialog-body-padding, 'base');
  }
  &[medium] .el-dialog__body {
    padding: map-get($ep-dialog-body-padding, 'medium');
  }
  &[large] .el-dialog__body {
    padding: map-get($ep-dialog-body-padding, 'large');
  }
}

.el-menu {
  border-right: none;
}

.el-input-number {
  width: 100%;
  .el-input__inner {
    text-align: left;
  }
  .el-input-number__increase,
  .el-input-number__decrease {
    top: 3px;
  }
}

.el-table--border::after,
.el-table--border::before,
.el-table--border .el-table__inner-wrapper::after,
.el-table__inner-wrapper::before {
  // display: none;
}

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

.no-mask,
.no-mask .el-overlay-dialog {
  pointer-events: none;
  .el-dialog {
    pointer-events: all;
    .el-dialog__body {
      max-height: calc(100vh - var(--el-dialog-header-height));
      overflow: auto;
    }
  }
}

.el-popover.el-popper.color-picker-popover {
  background-color: map-get($ep-fill-color, 'light');
}

.el-message__badge {
  display: none;
}