@use 'sass:math';
@use './functions' as *;
@use './button';

$--font-path: '~element-ui/lib/theme-chalk/fonts' !default;
$--font-weight-primary: 400;

$--color-primary: theme-value(color-primary) !default;
$--color-success: theme-value(color-success) !default;
$--color-warning: theme-value(color-warning) !default;
$--color-danger: theme-value(color-error) !default;
$--color-text-regular: theme-value(text-color) !default;
$--color-text-header: theme-value(text-color-header) !default;

$--background-color-base: theme-value(color-fill) !default;

$--border-color-base: theme-value(color-fill) !default;
$--border-color-dark: theme-value(color-fill-3) !default;
$--border-base: 1px solid $--border-color-base !default;

// input
$--input-placeholder-color: theme-value(text-color-placeholder) !default;
$--input-background-color: theme-value(color-fill) !default;
$--input-hover-background-color: theme-value(color-fill-hover) !default;
$--input-hover-border: theme-value(color-fill-hover) !default;
$--input-disabled-fill: theme-value(color-fill-disabled) !default;
$--input-disabled-border: theme-value(color-fill-disabled) !default;
$--input-disabled-color: theme-value(text-color-disabled) !default;
$--input-disabled-placeholder-color: theme-value(text-color-disabled) !default;

$--select-border-color-hover: $--input-hover-border !default;
$--select-disabled-border: $--input-disabled-border !default;

$--table-header-background-color: theme-value(color-fill) !default;
$--table-header-font-color: $--color-text-header !default;
$--table-border-color: $--border-color-base !default;

$--checkbox-input-border: $--border-base !default;
$--radio-input-border: $--border-base !default;

@import 'element-ui/packages/theme-chalk/src/index.scss';

.el-input {
  &__inner {
    &:hover {
      background-color: $--input-hover-background-color;
    }

    &:focus {
      background-color: #fff;
    }
  }
}

// drawer
.el-drawer {
  &__header {
    color: $--color-text-header;
    line-height: 20px;
    padding: 14px 20px;
    border-bottom: $--border-base;
    margin-bottom: 0;
  }

  &__close-btn {
    font-size: 16px;
    color: $--color-text-regular;
  }
}

// dialog
.el-dialog {
  &__header {
    color: $--color-text-header;
    line-height: 20px;
    padding: 14px 20px;
    border-bottom: $--border-base;
  }

  &__headerbtn {
    top: 16px;
    right: 16px;
    & .el-dialog__close {
      color: $--color-text-regular;
    }
  }
}

.el-table__fixed-right-patch {
  background-color: $--table-header-background-color;
}

.el-table-column--selection .cell {
  text-align: center;
}

.dg-table__table.el-table {
  border-top-color: $--table-border-color;
}

.el-checkbox {
  &__label {
    padding-left: 6px;
  }
  &--mini {
    .el-checkbox {
      &__label {
        font-size: 12px;
      }
    }
  }

  &__inner {
    border: 2px solid $--border-color-dark;
    &::after {
      top: 0;
      left: 3px;
    }
  }
}

.dg-search {
  &-optional {
    & &__select {
      margin-right: 0;
    }
    & &__component {
      border-left: 1px solid $--input-hover-border;
    }
  }
}

.el-message-box {
  &__header {
    border-bottom: $--border-base;
  }
  &__content {
    padding: 20px 15px;
  }
}

.el-upload {
  &-dragger {
    background-color: $--background-color-base;
    border-color: $--border-color-base;
  }

  &--block & {
    &,
    &-dragger {
      width: 100%;
    }
  }
}

.el-date-editor .el-range-input {
  background-color: transparent;
}

.el-tabs {
  &--fit:not(&--left, &--right) {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;

    > .el-tabs__content {
      flex: 1;
      overflow: auto;
    }

    .el-tab-pane {
      height: 100%;
    }
  }
}

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

@mixin button-size($selector: null, $size: regular) {
  @if $selector != null {
    $selector: --#{$selector};
  }

  &#{$selector} {
    @include button.size-variant(
      math.div(theme-value(button-#{$size}-height) - theme-value(button-#{$size}-font-size), 2) - 1,
      theme-value(button-#{$size}-padding-horizontal),
      theme-value(button-#{$size}-font-size)
    );
  }
}

@mixin button-color(
  $selector,
  $color,
  $bg,
  $bd,
  $color-hover: $color,
  $color-active: $color,
  $bg-hover: #{$bg}-hover,
  $bg-active: #{$bg}-active,
  $bd-hover: #{$bd}-hover,
  $bd-active: #{$bd}-active
) {
  &--#{$selector} {
    @include button.color-variant(theme-var-value($color), theme-var-value($bg), theme-var-value($bd));

    &:hover,
    &:focus {
      @include button.color-variant(
        theme-var-value($color-hover),
        theme-var-value($bg-hover),
        theme-var-value($bd-hover)
      );
    }

    &:active,
    &.is-active {
      @include button.color-variant(
        theme-var-value($color-active),
        theme-var-value($bg-active),
        theme-var-value($bd-active)
      );
    }
  }
}

.el-button {
  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      @include button.color-variant(
        theme-var-value(text-color-disabled),
        theme-var-value(color-fill-disabled),
        theme-var-value(color-fill-disabled)
      );
    }
  }

  &--dash {
    border-style: dashed;
  }

  & + .el-button {
    margin-left: theme-value(button-gutter);
  }

  [class*='el-icon-'] + span {
    margin-left: theme-value(button-gutter-icon);
  }

  @include button-size();
  @include button-size(small);
  @include button-size(xs, mini);
  @include button-size(mini, small);
  @include button-size(large, large);

  @include button-color(secondary, text-color, color-fill, color-fill);
  @include button-color(dash, text-color, color-fill, color-line);
  @include button-color(
    outline,
    color-primary,
    color-white,
    color-primary,
    $color-hover: color-primary-hover,
    $color-active: color-primary-active
  );

  @include button-color(
    plain,
    text-color,
    color-fill,
    color-transparent,
    $color-hover: color-primary-hover,
    $color-active: color-primary-active,
    $bg-hover: color-primary-hover-light,
    $bg-active: color-primary-active-light,
    $bd-hover: color-transparent,
    $bd-active: color-transparent
  );

  &--text {
    padding-left: 0px;
    padding-right: 0px;

    &.regular {
      color: theme-value(text-color);

      &:hover {
        color: theme-value(text-color-header);
      }
    }
  }

  &--plain {
    padding-left: 8px;
    padding-right: 8px;

    &.el-button {
      &--large {
        font-size: 16px;
        padding-left: 9px;
        padding-right: 9px;
      }

      &--small {
        font-size: 12px;
        padding-left: 7px;
        padding-right: 7px;
      }

      &--mini {
        font-size: 12px;
        padding-left: 7px;
        padding-right: 7px;
      }

      &--xs {
        font-size: 12px;
        padding-left: 5px;
        padding-right: 5px;
      }
    }
  }
}