i {
  font-size: 18px;
}

.default {
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #d5dae1;
  cursor: pointer;
  padding: 7px 16px;
  transition: all 0.1s ease-in-out;
}

.default:active {
  transform: translateY(2px);
  background-color: #f8f8f8;
}

.default:hover {
  border: 1px solid #323232;
}

.primary {
  background-color: #323232;
  color: #fff;
  border-radius: 5px;
  border: 1px solid #d5dae1;
  cursor: pointer;
  padding: 7px 16px;
  transition: all 0.1s ease-in-out;
  position: relative;
  /* 让子元素绝对定位相对于按钮 */
}

.primary:active {
  transform: translateY(2px);
}

.primary:hover {
  border: 1px solid #323232;
  background-color: #f8f8f8;
  color: #323232;
}

.primary:hover {
  border: 1px solid #323232;
  background-color: #f8f8f8;
  color: #323232;
}

.icon {
  display: flex;
  align-items: center;
}

.icon > i {
  margin-right: 5px;
}