/* 按钮 / 链接按钮：四种样式、三种尺寸，高度与表单控件一致。比例参考 shadcn/ui（MIT）。 */
.btn {
  --btn-h: var(--高-控件);
  --btn-px: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--距-2);
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--角-中);
  font-size: var(--字号-正文);
  font-weight: var(--字重-中);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--时-快) var(--缓动), border-color var(--时-快) var(--缓动), color var(--时-快) var(--缓动);
}

.btn .icon {
  width: 1rem;
  height: 1rem;
}

.btn--sm {
  --btn-h: var(--高-控件-小);
  --btn-px: 0.5rem;
  gap: var(--距-1);
  font-size: var(--字号-小);
  border-radius: var(--角-小);
}

.btn--lg {
  --btn-h: var(--高-控件-大);
  --btn-px: 1.125rem;
  font-size: var(--字号-中);
}

.btn--sm .icon {
  width: 0.875rem;
  height: 0.875rem;
}

.btn--icon {
  width: var(--btn-h);
  padding: 0;
}

.btn--block {
  width: 100%;
}

.btn--primary {
  background: var(--色-品牌);
  color: var(--色-文字-反白);
}

.btn--primary:hover {
  background: var(--色-品牌-悬停);
  color: var(--色-文字-反白);
}

.btn--primary:active {
  background: var(--色-品牌-按下);
}

.btn--secondary {
  background: var(--色-表面);
  border-color: var(--色-边线-控件);
  color: var(--色-文字);
}

.btn--secondary:hover {
  background: var(--色-表面-悬停);
  border-color: var(--色-边线-控件-悬停);
  color: var(--色-文字);
}

.btn--secondary:active {
  background: var(--色-品牌-浅);
}

.btn--danger {
  background: var(--色-危险);
  color: var(--色-文字-反白);
}

.btn--danger:hover {
  background: var(--色-危险-悬停);
  color: var(--色-文字-反白);
}

.btn--quiet {
  background: transparent;
  color: var(--色-文字-次);
}

.btn--quiet:hover {
  background: var(--色-表面-悬停);
  color: var(--色-文字);
}

.btn[aria-current="page"] {
  background: var(--色-品牌-浅);
  border-color: transparent;
  color: var(--色-品牌-浅上文字);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--色-禁用-底);
  border-color: transparent;
  color: var(--色-文字-禁用);
  cursor: not-allowed;
}

/* 处理中：htmx 请求期间（按钮自身或所在表单带 .htmx-request）换成转圈和处理中文字 */
.btn-spinner,
.btn-busy-label {
  display: none;
}

.btn--busyable.htmx-request,
.htmx-request .btn--busyable[type="submit"] {
  pointer-events: none;
}

.btn--busyable.htmx-request .btn-label,
.htmx-request .btn--busyable[type="submit"] .btn-label,
.btn--busyable.htmx-request > .icon,
.htmx-request .btn--busyable[type="submit"] > .icon {
  display: none;
}

.btn--busyable.htmx-request .btn-spinner,
.btn--busyable.htmx-request .btn-busy-label,
.htmx-request .btn--busyable[type="submit"] .btn-spinner,
.htmx-request .btn--busyable[type="submit"] .btn-busy-label {
  display: inline-block;
}

.btn-spinner {
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--角-圆);
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--距-2);
}

.btn-group--end {
  justify-content: flex-end;
}

/* 冷却（NS-1.3）：载入后 N 秒内看起来不可用、鼠标点不了；时长只由类名决定。键盘仍可触发，频率由服务器保证。 */
.btn--cooldown {
  animation: btn-cooldown var(--冷却时长) step-end forwards;
}

.btn--cooldown-30 {
  --冷却时长: 30s;
}

.btn--cooldown-60 {
  --冷却时长: 60s;
}

.btn--cooldown-120 {
  --冷却时长: 120s;
}

/* 这不是运动效果：减少动态效果时也要保持时长（基础.css 会把动画缩到 0.01ms）。 */
@media (prefers-reduced-motion: reduce) {
  .btn--cooldown {
    animation-duration: var(--冷却时长) !important;
  }
}

@keyframes btn-cooldown {
  from {
    border-color: transparent;
    background: var(--色-禁用-底);
    color: var(--色-文字-禁用);
    cursor: not-allowed;
    pointer-events: none;
  }
  to {
    pointer-events: auto;
  }
}