/**
 * LX Button 业务组件扩展
 * 基础按钮外观由 design-components.css 提供，本文件只补充组合与加载状态。
 */

.lx-button--block {
  width: 100%;
}

.lx-button__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lx-button__icon {
  display: inline-grid;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  place-items: center;
  color: currentColor;
  font-size: var(--lx-font-size-sm);
  font-style: normal;
  line-height: 1;
}

.lx-button__spinner {
  display: inline-block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: lx-button-spin 720ms linear infinite;
}

.lx-button.is-loading,
.lx-button[aria-busy="true"] {
  cursor: wait;
}

.lx-button.is-loading:not(.lx-button--text),
.lx-button[aria-busy="true"]:not(.lx-button--text) {
  opacity: 0.78;
}

.lx-button.is-loading .lx-button__icon,
.lx-button[aria-busy="true"] .lx-button__icon {
  display: none;
}

.lx-button-group {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-space-8);
}

.lx-button-group--end {
  justify-content: flex-end;
  width: 100%;
}

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

@media (max-width: 767px) {
  .lx-button-group--responsive {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .lx-button-group--responsive .lx-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lx-button__spinner {
    animation-duration: 1400ms;
  }
}