/* Kole UI Mobile · Loading 样式 — 对齐 .design_library/kole-ui-mobile/spec/移动端规格.md §22
   加载指示：一个转圈 + 一行文案。移动端与桌面端的差别在于**它经常独占整个屏幕** ——
   提交订单、支付这类动作用 fullscreen 铺一层遮罩，期间用户不能操作下方内容。
   令牌：尺寸/颜色取 --kole-*，间距与字号取 --kole-m-*；组件级变量 --kole-m-loading-size
   与 --kole-m-loading-duration 可在业务侧覆盖。 */

.kole-m-loading {
  --kole-m-loading-size: 20px;
  --kole-m-loading-duration: 800ms;
  display: inline-flex;
  align-items: center;
  gap: var(--kole-space-8);
  box-sizing: border-box;
  color: var(--kole-color-text-secondary);
  font-family: var(--kole-font-family);
  font-size: var(--kole-m-font-size-label);
  line-height: 1.4;
}

/* 变体 size：small 16 / default 20 / large 28（文案字号随档位走） */
.kole-m-loading--small { --kole-m-loading-size: var(--kole-icon-size-16); font-size: var(--kole-m-font-size-caption); }
.kole-m-loading--large { --kole-m-loading-size: 28px; font-size: var(--kole-m-font-size-body); }

/* 变体 layout：vertical=true 时指示器在上、文案在下（全屏与空态里更稳） */
.kole-m-loading--vertical { flex-direction: column; gap: var(--kole-space-12); text-align: center; }

.kole-m-loading__spinner {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--kole-m-loading-size);
  height: var(--kole-m-loading-size);
  border: 2px solid var(--kole-color-brand-bg);
  border-top-color: var(--kole-color-brand);
  border-radius: 50%;
  animation: kole-m-loading-spin var(--kole-m-loading-duration) linear infinite;
}

.kole-m-loading__text {
  color: inherit;
  word-break: break-word;
}

@keyframes kole-m-loading-spin {
  to { transform: rotate(360deg); }
}

/* 变体 fullscreen=true：铺满视口的遮罩 + 居中的卡片面板。
   面板用卡片底色而不是透明底 —— 遮罩上的白字/深字对比度不可控，面板能钉死对比度。 */
.kole-m-loading.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kole-color-mask);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--kole-m-duration-slide) var(--kole-m-ease-slide);
}

.kole-m-loading.is-fullscreen.is-open {
  opacity: 1;
  pointer-events: auto;
}

.kole-m-loading__panel {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kole-space-12);
  min-width: 112px;
  padding: var(--kole-space-20) var(--kole-space-24);
  border-radius: var(--kole-radius-large);
  background: var(--kole-color-card-bg);
  box-shadow: var(--kole-shadow-high);
  color: var(--kole-color-text-body);
}

/* 状态 done：加载结束后由宿主换成结果提示（本组件只保留过渡，不自动消失） */
.kole-m-loading.is-done .kole-m-loading__spinner {
  animation: none;
  border-color: var(--kole-color-brand);
}

@media (prefers-reduced-motion: reduce) {
  .kole-m-loading { transition: none; }
  .kole-m-loading__spinner { animation: none; }
}