@import 'theme';
.render-button {
  padding: 8px 20px;
  border-radius: 8px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 14px;
}

.el-button {
  &:hover {
    border-color: var(--color-primary-light);
    background: transparent;
    color: var(--color-primary);
  }
  &:focus {
    border-color: $--color-primary-light;
    background: transparent;
    color: var(--color-primary);
  }
  &:active {
    border-color: $--color-primary-light;
    background: transparent;
    color: var(--color-primary);
  }
  &.normal-button {
    padding: 5px;
    background: unset;
    border: unset;
    color: $--color-primary-desc-text;
    &:hover {
      background: $--color-primary-table-button-hover;
      border-color: #ebeef2;
    }
    &:focus {
      background: $--color-primary-table-button-hover;
      border-color: #ebeef2;
    }
    &:active {
      background: $--color-primary-table-button-hover;
      border-color: #ebeef2;
    }
    &.popver-button {
      padding: 13px 5px;
      text-align: left;
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      &:hover {
        background: $--color-primary-table-button-hover;
        color: rgba(79, 71, 245, 1);
      }
      & i {
        color: #000;
      }
    }
    &.popver-button + .popver-button {
      margin: 0;
    }
  }
}

.el-button--text {
  color: var(--color-primary);
  border: none;
  &:hover {
    color: $--color-primary-light;
    border: none;
  }
  &:focus {
    color: $--color-primary-light;
    border: none;
  }
  &:active {
    color: $--color-primary-light;
    border: none;
  }
}

.el-button--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  &.is-disabled {
    background-color: var(--color-primary-disabled);
    border-color: transparent;
    &:hover {
      background-color: var(--color-primary-disabled);
      border-color: transparent;
    }
  }
  &.is-plain {
    background: #fff;
    border-color: $--color-primary-light;
    color: $--color-primary-light;
    &:hover {
      background-color: $--color-primary-light;
    }
  }
  &:hover {
    background-color: $--color-primary-light;
    border-color: $--color-primary-light;
    color: #fff;
  }
  &:active {
    background-color: darken($--color-primary, 5%);
    border-color: $--color-primary-light;
    color: #fff;
  }
  &:focus {
    background-color: darken($--color-primary, 5%);
    border-color: $--color-primary-light;
    color: #fff;
  }
}

.el-button--danger {
  background: var(--color-primary-danger);
  color: #fff;
  &:hover {
    background: $--color-primary-danger-light;
    color: #fff;
    border-color: $--color-primary-danger-light;
  }
  &:active {
    background: $--color-primary-danger-light;
    color: #fff;
    border-color: $--color-primary-danger-light;
  }
  &:focus {
    background: $--color-primary-danger-light;
    color: #fff;
    border-color: $--color-primary-danger-light;
  }
  &.is-disabled {
    background: $--color-primary-danger-disabled;
    color: #fff;
    border-color: transparent;
    &:hover {
      background: $--color-primary-danger-disabled;
      color: #fff;
      border-color: transparent;
    }
  }
  &.is-plain {
    background: #fff;
    border-color: $--color-primary-danger-light;
  }
}

.line-button {
  background: linear-gradient(311deg, #8d5cff 0%, #026eff 100%);
  border: unset;
  cursor: pointer;
  color: #fff;
  &:hover {
    background: linear-gradient(311deg, #8d5cff 0%, #026eff 100%);
    border: none;
    color: #fff;
  }
}
