@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;
      }
      &.is-disabled {
        background: unset;
        color: #eee;
        & i {
          color: #eee;
        }
      }
    }
    &.popver-button + .popver-button {
      margin: 0;
    }
  }
  &.primary-button {
    //background: var(--color-primary);
    background: $--color-primary-button-background;
    border: 1px solid #eaecf5;
    color: $--color-primary-button-color;
    font-size: 14px;
    font-weight: 600;
    font-family: PingFangSC, PingFang SC;
    &:hover {
      background: lighten($--color-primary-button-color, 5%);
      border: 1px solid #eaecf5;
    }
  }
  &.line-button {
    background: $--color-primary-button-gradient;
    border: unset;
    cursor: pointer;
    color: #fff;
    &:hover {
      background: $--color-primary-button-gradient;
      border: none;
      color: #fff;
    }
    &:active {
      background: $--color-primary-button-gradient;
      border: none;
      color: #fff;
    }
    &:focus {
      background: $--color-primary-button-gradient;
      border: none;
      color: #fff;
    }
    &.is-disabled {
      background: var(--color-primary-disabled);
      border-color: transparent;
    }
  }
  &.el-button--medium {
    padding: 8px 20px;
    border-radius: 8px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
  }

  &.is-active {
    color: $--color-primary;
    border-color: $--color-primary;
  }
  &.is-plain {
    &:active {
      color: $--color-primary;
      border-color: $--color-primary;
    }
    &:focus {
      color: $--color-primary;
      border-color: $--color-primary;
    }
    &:hover {
      color: $--color-primary;
      border-color: $--color-primary;
    }
  }
}

.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;
      border-color: var(--color-primary);
    }
  }
  &: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;
  }
}

.table-popver {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-left: 5px;
  border-radius: 5px;
  //padding: 5px;
  & .el-button {
    &.normal-button {
      padding: 17px 5px;
    }
    &.more-btn {
      padding: 5px;
    }
  }
}
.el-radio-button {
  &:focus {
    &:not(.is-focus) {
      &:not(:active) {
        &:not(.is-disabled) {
          //box-shadow: 0 0 2px 2px $--color-primary;
          box-shadow: unset;
        }
      }
    }
  }
  &.is-disabled {
    & .el-radio-button__inner {
      background: unset;
      &:hover {
        color: #c0c4cc;
      }
    }
  }
  //&.is-active {
  //  background: #fff;
  //}
}

.render-group {
  padding: 5px 10px;
  background: #f8f8f8;
  & .el-radio-button {
    text-align: center;
    &.is-active {
      background: #fff !important;
    }
    & .el-radio-button__inner {
      padding: 2px 5px;
    }
  }
}
