.btn {
  --sk-button-disabled-opacity: var(--sk-link-disabled-opacity, 0.42);

  --sk-button-color: rgb(255, 255, 255);
  --sk-button-color-hover: var(--sk-button-color);
  --sk-button-color-active: var(--sk-button-color-hover);

  --sk-button-bg: rgb(218, 0, 0);
  --sk-button-bg-hover: rgba(197, 0, 1, 0.8);
  --sk-button-bg-active: var(--sk-button-bg-hover);
  --sk-button-gradient: linear-gradient(
    141.87deg,
    rgba(251, 19, 20, 1),
    rgba(171.89732360839844, 33.598114013671875, 34.19419479370117, 1) 100%
  );

  --sk-button-border-color: transparent;
  --sk-button-border-color-hover: var(--sk-button-border-color);
  --sk-button-border-color-active: var(--sk-button-border-color-hover);
  --sk-button-border-color-disabled: #d9d9d9;

  --sk-button-border-radius: 0.06rem;
  --sk-button-border-radius-lg: 0.8rem;
  --sk-button-border-radius-sm: 0.04rem;

  --sk-button-height: 0.48rem;
  --sk-button-height-lg: 0.6rem;
  --sk-button-height-sm: 0.36rem;

  --sk-button-padding-inline: 0.2rem;
  --sk-button-padding-inline-lg: 0.48rem;
  --sk-button-padding-inline-sm: 0.16rem;

  --sk-button-font-size: 0.16rem;
  --sk-button-font-size-lg: 0.18rem;
  --sk-button-font-size-sm: 0.14rem;
}

.btn {
  box-sizing: border-box;
  outline: none;
  position: relative;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-align: center;
  gap: 0.12rem;
  border: 1px solid var(--sk-button-border-color);
  color: var(--sk-button-color);
  background: var(--sk-button-bg);
}

.btn span {
  position: relative;
  line-height: 22px;
}

.btn i {
  position: relative;
}

.btn:hover {
  color: var(--sk-button-color-hover);
  background: var(--sk-button-bg-hover);
  border-color: var(--sk-button-border-color-hover);
}

.btn:active {
  outline: none;
  color: var(--sk-button-color-active);
  background: var(--sk-button-bg-active);
  border-color: var(--sk-button-border-color-active);
}

.btn:focus-visible {
  outline: 2px solid var(--sk-focus-color, #0071e3);
  outline-offset: var(--sk-focus-offset-container, 3px);
}

/* 按钮尺寸 */
.btn {
  font-size: var(--sk-button-font-size);
  height: var(--sk-button-height);
  padding: 0px var(--sk-button-padding-inline);
  border-radius: var(--sk-button-border-radius);
}

.btn-lg {
  font-size: var(--sk-button-font-size-lg);
  height: var(--sk-button-height-lg);
  padding: 0px var(--sk-button-padding-inline-lg);
  border-radius: var(--sk-button-border-radius-lg);
}

.btn-sm {
  font-size: var(--sk-button-font-size-sm);
  height: var(--sk-button-height-sm);
  padding: 0px var(--sk-button-padding-inline-sm);
  border-radius: var(--sk-button-border-radius-sm);
}

/* 圆角按钮 */
.btn.btn-round {
  border-radius: 980px;
}

/* Block 按钮 */
.btn.btn-block {
  width: 100%;
}

/* 颜色和变体 */

.btn.btn-dashed {
  border-style: dashed;
}

.btn.btn-outlined,
.btn.btn-dashed {
  --sk-button-bg: #fff;
  --sk-button-bg-hover: #fff;

  --sk-button-color: rgba(0, 0, 0, 0.88);
  --sk-button-color-hover: var(--primary-color);

  --sk-button-border-color: #d9d9d9;
  --sk-button-border-color-hover: var(--primary-color);
}

.btn.btn-primary {
  box-shadow: -8px 8px 28px 0px rgba(0, 0, 0, 0.06);
}

.btn-primary.btn-outlined,
.btn-primary.btn-dashed {
  --sk-button-bg: #fff;
  --sk-button-bg-hover: #fff;

  --sk-button-color: var(--main-color);
  --sk-button-color-hover: var(--primary-color);

  --sk-button-border-color: var(--main-color);
  --sk-button-border-color-hover: var(--primary-color);
}

.btn.disabled,
.btn:disabled {
  pointer-events: none;
  opacity: var(--sk-button-disabled-opacity);
}

/* 渐变按钮 */
.btn.btn-linear-gradient::before,
.btn-default.btn-ghost:before {
  content: "";
  box-shadow: -0.08rem 0.08rem 0.28rem 0px rgba(0, 0, 0, 0.06);
  background: var(--sk-button-gradient);
  position: absolute;
  inset: -1px;
  opacity: 1;
  transition: all 0.3s;
  border-radius: inherit;
}

.btn.btn-linear-gradient:hover::before {
  opacity: 0;
}

/* 幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上 */
.btn-default.btn-ghost {
  --sk-button-color: #232323;
  --sk-button-color-hover: #fff;
  --sk-button-border-color: rgba(255, 255, 255, 0.5);
  --sk-button-border-color-hover: var(--primary-color);

  background: var(--sk-button-ghost-bg);
  box-shadow: none;
}

.btn-default.btn-ghost::before {
  opacity: 0;
}

.btn-default.btn-ghost:hover::before {
  opacity: 1;
}

.btn-primary.btn-ghost {
  color: var(--primary-color);
  background: var(--sk-button-ghost-bg);
  border-color: var(--primary-color);
  box-shadow: none;
}

@media only screen and (max-width: 767px) {
  .btn {
    --sk-button-border-radius: 6px;
    --sk-button-border-radius-lg: 8px;
    --sk-button-border-radius-sm: 4px;

    --sk-button-height: 36px;
    --sk-button-height-lg: 40px;
    --sk-button-height-sm: 28px;

    --sk-button-padding-inline: 16px;
    --sk-button-padding-inline-lg: 20px;
    --sk-button-padding-inline-sm: 12px;

    --sk-button-font-size: 14px;
    --sk-button-font-size-lg: 16px;
    --sk-button-font-size-sm: 12px;
  }
}