@import 'theme';
.render-button {
  padding: 8px 21px;
  border-radius: 8px;
}

.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);
  }
}

.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;
    }
  }
  &: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;
    }
  }
}
