/* ==========================================================================
   install-progress.css · 安装进度条样式
   对应源码：ptgame/app/src/pwa/comp/InstallProgress.vue <style scoped lang="less">（嵌套展开）
   ========================================================================== */

/* ---- Tailwind 工具类转写（限定本组件 DOM 范围） --------------------------- */

.pwa-progress-bar.flex-1 { flex: 1 1 0%; }
.pwa-progress-bar.relative { position: relative; }
.pwa-progress-bar.w-60 { width: 15rem; }

.pwa-progress-bar .h-\[2\.8125rem\] { height: 2.8125rem; }
.pwa-progress-bar .rounded-full { border-radius: 9999px; }
.pwa-progress-bar .absolute { position: absolute; }
.pwa-progress-bar .w-full { width: 100%; }
.pwa-progress-bar .h-full { height: 100%; }
.pwa-progress-bar .text-center { text-align: center; }
.pwa-progress-bar .leading-\[2\.8125rem\] { line-height: 2.8125rem; }
.pwa-progress-bar .top-0 { top: 0; }
.pwa-progress-bar .left-0 { left: 0; }

/* Tailwind preflight 等价：p 标签去默认 margin */
.pwa-progress-bar p { margin: 0; }

/* ---- ion-progress-bar → 自绘进度条（轨道 + 填充） --------------------------
   ionic color 映射：color="success" → --ion-color-success；缺省 → --ion-color-primary；
   --progress-background（主题变量）优先级最高，与源码 ionic 行为一致 */

.pwa-progress-bar .ion-progress-bar {
  display: block;
  position: relative;
  width: 100%;
  background: var(--background, rgba(0, 0, 0, 0.1));
  overflow: hidden;
}

.pwa-progress-bar .ion-progress-bar .ion-progress-bar-fill {
  display: block;
  height: 100%;
  background: var(--progress-background, var(--ion-color-primary, #3880ff));
}

.pwa-progress-bar .ion-progress-bar[color="success"] .ion-progress-bar-fill {
  background: var(--progress-background, var(--ion-color-success, #2dd36f));
}

/* ---- 组件样式（源码 less 嵌套展开） --------------------------------------- */

/* 安装pwa进度条根据主题色样式 */
.pwa-progress-bar .ion-progress-bar {
  --background: var(--color-bg-200);
  --progress-background: var(--theme-color-900);
}

.pwa-progress-bar.amber-purple .ion-progress-bar {
  --background: var(--color-bg-100);
}

.pwa-progress-bar .progress-text {
  color: var(--color-text-100) !important;
}

.pwa-progress-bar.purple-light .progress-text {
  color: var(--text-color-white-100) !important;
}

.pwa-progress-bar.force-modal .ion-progress-bar {
  --background: var(--ep-neutral-white-white-20, rgba(255, 255, 255, 0.2));
  --progress-background: var(--ep-color-icon-brand-secondary, #CF3F5B);
  border-radius: .3125rem;
  width: 18.125rem;
}

/* 复刻源码行为：源码 .progress-text 嵌套在 ion-progress-bar 选择器内，
   但 DOM 中 .progress-text 是 ion-progress-bar 的兄弟节点，该规则实际不命中，照原样保留 */
.pwa-progress-bar.force-modal .ion-progress-bar .progress-text {
  color: var(--ep-color-icon-inverse, #fff) !important;
}