/* ==========================================================================
   first-button.css · first 皮肤通用按钮样式
   对应源码：ptgame/app/src/components/first/Button/index.vue <style scoped lang="less">
   （ion-button → button.ion-button；::part(native) 的 background/border 等直接落到 button 元素；
     .new-skin-symbol 挂在 html 上，见 themes.css 头部注释；less mixin btn-bus 逐调用展开）
   ========================================================================== */

/* ---- 源码 `ion-button { ... }`（组件内 ion-button 基础样式） ---- */
div.button button.ion-button {
  border-radius: var(--rounded-small); /* --border-radius → border-radius（无 shadow DOM，直接生效） */
  padding-left: 0.625rem; /* --padding-start */
  padding-right: 0.625rem; /* --padding-end */
  box-shadow: none; /* --box-shadow: none */
  font-size: var(--button-font-size, 0.875rem);
  font-weight: var(--button-font-weight, bold);
  min-height: 26px;
  min-width: 40px;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

/* ---- btn-bus(@--background: var(--background, var(--theme-color-800)), ...) 默认参数调用 ----
   源码 div.button ion-button.first-button { .btn-bus(); } */
div.button button.ion-button.first-button {
  background: var(--background, var(--theme-color-800)); /* --background + ::part(native) background 合并 */
}

div.button button.ion-button p {
  font-size: inherit;
}

div.button button.ion-button p span {
  color: var(--button-text-color, var(--color-primary-btn-text-active)); /* 默认白色文字 */
}

div.button button.ion-button.disabled p span,
div.button button.ion-button:disabled p span {
  color: var(--color-primary-btn-text-disable); /* 默认白色文字（源码注释原样） */
}

/* 源码 btn-bus 内 :global(ion-button.first-button p)：嵌套在 div.button ion-button.first-button 之下，
   scoped 编译后祖先仍带 [data-v]，实际等效死规则（ion-button 不可能嵌套 ion-button），照原样保留 */
div.button button.ion-button.first-button button.first-button p {
  color: var(--color-primary-btn-text-active); /* 复刻源码行为（死规则） */
}

/* ---- .new-skin-symbol 分支（html.new-skin-symbol，对应源码同名嵌套块） ---- */

/* 源码 .new-skin-symbol div.button ion-button.first-button { .btn-bus(var(--ep-dynamic-primary), --ep-color-text-inverse) } */
.new-skin-symbol div.button button.ion-button.first-button {
  background: var(--ep-dynamic-primary);
}

.new-skin-symbol div.button button.ion-button.first-button p span {
  color: var(--ep-color-text-inverse, var(--color-primary-btn-text-active));
}

/* 源码 .new-skin-symbol ion-button { ... }（组件内 ion-button） */
.new-skin-symbol div.button button.ion-button {
  border-radius: var(--ep-border-radius-m);
  font-size: var(--ep-font-size-m);
  font-weight: var(--ep-font-weight-bold);
}

/* 源码 .new-skin-symbol div.button ion-button.first-button.disabled { .btn-bus(...) } */
.new-skin-symbol div.button button.ion-button.first-button.disabled,
.new-skin-symbol div.button button.ion-button.first-button:disabled {
  background: var(--ep-color-background-fill-active-disabled);
}

.new-skin-symbol div.button button.ion-button.first-button.disabled p span,
.new-skin-symbol div.button button.ion-button.first-button:disabled p span {
  color: var(--ep-color-text-inverse-disabled, var(--color-primary-btn-text-active));
}

/* 源码 .new-skin-symbol .button-disabled（模板中无此 class，源码遗留，照原样保留） */
.new-skin-symbol .button-disabled {
  opacity: 1;
}

/* 源码中 .new-skin-symbol div.button ion-button.first-button { .btn-bus(...) } 重复声明一次
   （与上方值完全相同，后者覆盖前者无视觉差异），照原样保留 */
.new-skin-symbol div.button button.ion-button.first-button {
  background: var(--ep-dynamic-primary);
}

.new-skin-symbol div.button button.ion-button.first-button p span {
  color: var(--ep-color-text-inverse, var(--color-primary-btn-text-active));
}

/* 源码 .new-skin-symbol div.button ion-button.raised { .btn-bus(...) } */
.new-skin-symbol div.button button.ion-button.raised {
  background: var(--ep-color-background-fill-surface-raised-L2);
}

.new-skin-symbol div.button button.ion-button.raised p span {
  color: var(--ep-color-text-default, var(--color-primary-btn-text-active));
}

/* 源码 .new-skin-symbol div.button ion-button.primary { .btn-bus(...) } */
.new-skin-symbol div.button button.ion-button.primary {
  background: var(--ep-color-background-fill-active-active);
}

.new-skin-symbol div.button button.ion-button.primary p span {
  color: var(--ep-color-text-inverse, var(--color-primary-btn-text-active));
}

/* ---- 源码 div.button ion-button.style-2 { .btn-bus(var(--color-button-bg-gray)) } ---- */
div.button button.ion-button.style-2 {
  background: var(--color-button-bg-gray);
}

div.button button.ion-button.style-2 p span {
  color: var(--button-text-color, var(--color-primary-btn-text-active));
}

/* ---- 源码 .amber-purple { .default, .second { div.button ion-button.first-button { .btn-bus(...) } } }
   （html.amber-purple + body.default/second，层级见 themes.css 头部注释） ---- */
.amber-purple .default div.button button.ion-button.first-button,
.amber-purple .second div.button button.ion-button.first-button {
  background: var(--theme-color-gradient-100);
}

/* ---- 源码 div.button ion-button.style-1 { .btn-bus(); &::part(native) {...} } ----
   ::part(native) 的 --background 在原生等价物上直接覆盖 background（后者生效） */
div.button button.ion-button.style-1 {
  background: var(--background, var(--theme-color-800));
  border-radius: 52px; /* ::part(native) --border-radius */
  border: 1px solid #FFECA6; /* ::part(native) border */
  box-shadow: 0px 4px 20px 0px rgba(255, 142, 86, 0.26); /* ::part(native) --box-shadow */
  background: linear-gradient(96deg, #6845DA 0%, #FF972F 97.21%); /* ::part(native) --background（覆盖上行，复刻源码最终生效值） */
}

div.button button.ion-button.style-1 p span {
  color: var(--button-text-color, var(--color-primary-btn-text-active));
}

/* ---- 源码 div.button ion-button.style-1.disabled { .btn-bus(); &::part(native) { opacity: 0.4; ... } } ---- */
div.button button.ion-button.style-1.disabled,
div.button button.ion-button.style-1:disabled {
  background: var(--background, var(--theme-color-800));
  opacity: 0.4;
  border-radius: 52px;
  border: 1px solid #FFECA6;
  box-shadow: 0px 4px 20px 0px rgba(255, 142, 86, 0.26);
  background: linear-gradient(96deg, #6845DA 0%, #FF972F 97.21%); /* 同上，::part(native) --background 覆盖 */
}

/* ---- 源码 ion-button.disabled / ion-button.loading（组件内） ---- */
div.button button.ion-button.disabled,
div.button button.ion-button:disabled {
  background: var(--color-primary-btn-disable) !important; /* 禁用状态背景色（源码 --background !important 等价） */
  color: var(--color-primary-btn-text-disable); /* 禁用状态文字颜色 */
}

div.button button.ion-button.loading {
  background: var(--color-primary-btn-load) !important; /* 加载状态背景色 */
  color: var(--color-primary-btn-text-load); /* 加载状态文字颜色 */
}

/* ---- 源码 div.shiny 扫光动画 ---- */
div.shiny {
  position: relative;
  overflow: hidden;
  border-radius: 0.25rem;
}

div.shiny::before {
  content: "";
  background: var(--color-text-100);
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: -180px;
  width: 30px;
  z-index: 99;
  animation: shiny 4s ease-in-out infinite;
}

@keyframes shiny {
  0% {
    opacity: 0;
    transform: scale(0) rotate(45deg);
  }

  80% {
    opacity: 0.5;
    transform: scale(0) rotate(45deg);
  }

  81% {
    opacity: 1;
    transform: scale(4) rotate(45deg);
  }

  100% {
    opacity: 0;
    transform: scale(50) rotate(45deg);
  }
}

/* ---- Tailwind 工具类（class 名与源码 100% 一致，转写为转义选择器） ---- */
.w-4 {
  width: 1rem;
}

.h-4 {
  height: 1rem;
}

.flex {
  display: flex;
}

.items-center {
  align-items: center;
}