/* ==========================================================================
   second-button.css · second 皮肤通用按钮样式
   对应源码：ptgame/app/src/components/second/Button/index.vue <style scoped>
   （ion-button → button.ion-button；::part(native) 的 box-shadow 直接落到 button 元素）
   ========================================================================== */

/* ---- 源码 div.button ion-button.second-button ---- */
div.button button.ion-button.second-button {
  border-radius: var(--layout-radius-basic); /* --border-radius → border-radius */
  padding-left: 0.625rem; /* --padding-start */
  padding-right: 0.625rem; /* --padding-end */
  font-size: var(--button-font-size, 0.875rem);
  font-weight: var(--button-font-weight, bold);
  min-height: 26px;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-bottom: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  /* 源码 --background: var(--color-button-bg-basic) + --box-shadow: none，
     以及 ::part(native) box-shadow: var(--color-button-shadow-basic)（part 直接覆盖 shadow 内规则，最终生效） */
  background: var(--color-button-bg-basic);
  box-shadow: var(--color-button-shadow-basic);
}

/* ---- 源码 div.button ion-button.second-button.ion-activated ----
    calc(v-bind(buttonHeight) - 2.4px)：buttonHeight 即根 div 高度，button 高 100%，等价 calc(100% - 2.4px)；
   ion-activated 为 Ionic 按压态 class，原生等价为 :active（同时保留 .ion-activated 选择器） */
div.button button.ion-button.second-button:active,
div.button button.ion-button.second-button.ion-activated {
  height: calc(100% - 2.4px);
}

div.button button.ion-button.second-button:active,
div.button button.ion-button.second-button.ion-activated {
  box-shadow: none; /* ::part(native) box-shadow: none */
}

/* ---- 源码 div.button ion-button.second-button p / p span ---- */
div.button button.ion-button.second-button p {
  font-size: inherit;
}

div.button button.ion-button.second-button p span {
  color: var(--button-text-color, --color-primary-btn-text-active); /* 默认白色文字；源码 var() 第二参数漏写 var()（复刻源码行为，无效回退） */
}

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

/* 源码 :global(ion-button.second-button p)：嵌套在 scoped 组件样式中，祖先带 [data-v] 时等效全局；
   此处按源码意图展开为全局规则（复刻源码行为） */
button.ion-button.second-button p {
  color: var(--color-primary-btn-text-active);
}

/* ---- 源码 ion-button.disabled / ion-button.loading（组件内） ---- */
div.button button.ion-button.disabled,
div.button button.ion-button:disabled {
  opacity: 0.4;
  background: var(--color-button-bg-disable) !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;
}

/* shiny keyframes 与 first-button.css 同源（@keyframes 全局唯一，重复定义后者覆盖前者，值相同） */
@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% 一致） ---- */
.items-end {
  align-items: flex-end;
}