:host {
  display: inline-block;
}

/* ---- 基础样式 ---- */
.hb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hb-spacing-xxs);
  font-family: var(--hb-font-family);
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  outline: none;
  transition:
    all var(--hb-transition-duration) var(--hb-transition-function);
  box-sizing: border-box;
}

.hb-button:focus-visible {
  outline: 2px solid var(--hb-color-primary);
  outline-offset: 1px;
}

/* ---- 尺寸 ---- */
.hb-button--small {
  height: var(--hb-button-height-sm);
  padding: 0 var(--hb-button-padding-sm);
  font-size: var(--hb-button-font-size-sm);
  border-radius: var(--hb-button-radius);
}

.hb-button--default {
  height: var(--hb-button-height);
  padding: 0 var(--hb-button-padding);
  font-size: var(--hb-button-font-size);
  border-radius: var(--hb-button-radius);
}

.hb-button--large {
  height: var(--hb-button-height-lg);
  padding: 0 var(--hb-button-padding-lg);
  font-size: var(--hb-button-font-size-lg);
  border-radius: var(--hb-button-radius);
}

/* ---- 类型：default ---- */
.hb-button--default {
  color: var(--hb-color-text);
  background-color: var(--hb-color-bg);
  border-color: var(--hb-button-default-border);
}
.hb-button--default:hover {
  color: var(--hb-button-default-hover-color);
  border-color: var(--hb-button-default-hover-border);
}

/* ---- 类型：primary ---- */
.hb-button--primary {
  color: #ffffff;
  background-color: var(--hb-button-primary-bg);
  border-color: var(--hb-button-primary-bg);
}
.hb-button--primary:hover {
  background-color: var(--hb-button-primary-hover-bg);
  border-color: var(--hb-button-primary-hover-bg);
}

/* ---- 类型：dashed ---- */
.hb-button--dashed {
  color: var(--hb-color-text);
  background-color: var(--hb-color-bg);
  border-color: var(--hb-button-default-border);
  border-style: dashed;
}
.hb-button--dashed:hover {
  color: var(--hb-button-default-hover-color);
  border-color: var(--hb-button-default-hover-border);
}

/* ---- 类型：text ---- */
.hb-button--text {
  color: var(--hb-color-text);
  background-color: transparent;
  border-color: transparent;
}
.hb-button--text:hover {
  background-color: var(--hb-color-fill-tertiary);
}

/* ---- 类型：link ---- */
.hb-button--link {
  color: var(--hb-color-primary);
  background-color: transparent;
  border-color: transparent;
}
.hb-button--link:hover {
  color: var(--hb-color-primary-hover);
}

/* ---- 禁用 ---- */
.hb-button--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* ---- 加载 ---- */
.hb-button--loading {
  cursor: default;
  opacity: 0.7;
  pointer-events: none;
}
.hb-button__loading-icon {
  display: inline-flex;
  animation: hb-spin 1s linear infinite;
  font-size: 1em;
}

@keyframes hb-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
