/* =========================================================
 * FABテーマ上書き（ページ側追加用）
 * 目的：全ステートの漏れなく上書き（通常/hover/active/focus、Darkも）
 * 対象：.fab（共通FAB）／ #spMenuOverlayCloseBtn（Close専用）
 * 備考：fab-buttons.css の変数API（--fab-gradient / --fab-hover-bg / outline）を尊重
 * ========================================================= */

/* ========= 1) Sakura ========= */
/* --- ライト（通常）: デフォルト色（見た目）と hover（変数） --- */
html.theme-sakura {
  /* 通常（::before） */
  --fab-gradient:  linear-gradient(#ED869E, #FF3366);
  /* hover（::after の基本色） */
  --fab-hover-bg:  #ED869E;
  /* focus-visible のアウトライン色 */
  --fab-outline-color: var(--fab-hover-bg);
}

/* hoverは変数が効くため個別指定不要。activeは押下専用で上書きする */
html.theme-sakura .fab:active::after,
html.theme-sakura .fab.is-pressed::after {
  /* active：押下強調（hoverより濃い） */
  background: #FF3366;
}

/* キーボードフォーカスの視認性（outline色は変数に追従） */
html.theme-sakura .fab:focus-visible {
  /* outlineはfab-buttons.cssで指定済みだが、念のため上書き同調 */
  outline-color: var(--fab-outline-color);
}

/* Close専用（旧 .close-spbtn の“指定色あり”を再現） */
html.theme-sakura #spMenuOverlayCloseBtn {
  --fab-gradient:  #FF3366; /* 通常：主張の強いソリッド */
  --fab-hover-bg:  #ED869E; /* hover：少し淡い */
  --fab-outline-color: var(--fab-hover-bg);
}
html.theme-sakura #spMenuOverlayCloseBtn:active::after,
html.theme-sakura #spMenuOverlayCloseBtn.is-pressed::after {
  background: #FF003F; /* active：さらに締める */
}
html.theme-sakura #spMenuOverlayCloseBtn:focus-visible {
  outline-color: var(--fab-outline-color);
}

/* --- ダーク --- */
html.dark-mode.theme-sakura {
  --fab-gradient:  linear-gradient(#D86987, #A33652); /* 通常 */
  --fab-hover-bg:  #D86987;                           /* hover */
  --fab-outline-color: var(--fab-hover-bg);
}
html.dark-mode.theme-sakura .fab:active::after,
html.dark-mode.theme-sakura .fab.is-pressed::after {
  background: #A33652; /* active（濃いローズ） */
}
html.dark-mode.theme-sakura .fab:focus-visible {
  outline-color: var(--fab-outline-color);
}

html.dark-mode.theme-sakura #spMenuOverlayCloseBtn {
  --fab-gradient:  #A33652;  /* 通常 */
  --fab-hover-bg:  #D86987;  /* hover */
  --fab-outline-color: var(--fab-hover-bg);
}
html.dark-mode.theme-sakura #spMenuOverlayCloseBtn:active::after,
html.dark-mode.theme-sakura #spMenuOverlayCloseBtn.is-pressed::after {
  background: #A33652; /* active */
}
html.dark-mode.theme-sakura #spMenuOverlayCloseBtn:focus-visible {
  outline-color: var(--fab-outline-color);
}

/* ========= 2) Strawberry ========= */
html.theme-strawberry {
  --fab-gradient:  linear-gradient(#FF6B7A, #C2183A); /* 通常 */
  --fab-hover-bg:  #FF6B7A;                          /* hover */
  --fab-outline-color: var(--fab-hover-bg);
}
html.theme-strawberry .fab:active::after,
html.theme-strawberry .fab.is-pressed::after { background: #C2183A; } /* active */
html.theme-strawberry .fab:focus-visible { outline-color: var(--fab-outline-color); }

html.theme-strawberry #spMenuOverlayCloseBtn {
  --fab-gradient:  #C2183A; /* 通常（強め） */
  --fab-hover-bg:  #FF6B7A; /* hover（明るめ） */
  --fab-outline-color: var(--fab-hover-bg);
}
html.theme-strawberry #spMenuOverlayCloseBtn:active::after,
html.theme-strawberry #spMenuOverlayCloseBtn.is-pressed::after { background: #C2183A; }
html.theme-strawberry #spMenuOverlayCloseBtn:focus-visible { outline-color: var(--fab-outline-color); }

html.dark-mode.theme-strawberry {
  --fab-gradient:  linear-gradient(#E15667, #8E0F2A); /* 通常 */
  --fab-hover-bg:  #E15667;                          /* hover */
  --fab-outline-color: var(--fab-hover-bg);
}
html.dark-mode.theme-strawberry .fab:active::after,
html.dark-mode.theme-strawberry .fab.is-pressed::after { background: #8E0F2A; }
html.dark-mode.theme-strawberry .fab:focus-visible { outline-color: var(--fab-outline-color); }

html.dark-mode.theme-strawberry #spMenuOverlayCloseBtn {
  --fab-gradient:  #8E0F2A; /* 通常 */
  --fab-hover-bg:  #E15667; /* hover */
  --fab-outline-color: var(--fab-hover-bg);
}
html.dark-mode.theme-strawberry #spMenuOverlayCloseBtn:active::after,
html.dark-mode.theme-strawberry #spMenuOverlayCloseBtn.is-pressed::after { background: #8E0F2A; }
html.dark-mode.theme-strawberry #spMenuOverlayCloseBtn:focus-visible { outline-color: var(--fab-outline-color); }

/* ========= 3) Christmas ========= */
html.theme-christmas {
  --fab-gradient:  linear-gradient(#2E7D32, #0B3D0B); /* 通常 */
  --fab-hover-bg:  #2E7D32;                          /* hover */
  --fab-outline-color: var(--fab-hover-bg);
}
html.theme-christmas .fab:active::after,
html.theme-christmas .fab.is-pressed::after { background: #0B3D0B; } /* active */
html.theme-christmas .fab:focus-visible { outline-color: var(--fab-outline-color); }

html.theme-christmas #spMenuOverlayCloseBtn {
  --fab-gradient:  #0B3D0B; /* 通常（深緑） */
  --fab-hover-bg:  #2E7D32; /* hover（やや明るめ） */
  --fab-outline-color: var(--fab-hover-bg);
}
html.theme-christmas #spMenuOverlayCloseBtn:active::after,
html.theme-christmas #spMenuOverlayCloseBtn.is-pressed::after { background: #0B3D0B; }
html.theme-christmas #spMenuOverlayCloseBtn:focus-visible { outline-color: var(--fab-outline-color); }

html.dark-mode.theme-christmas {
  --fab-gradient:  linear-gradient(#27692B, #072C07); /* 通常 */
  --fab-hover-bg:  #27692B;                          /* hover */
  --fab-outline-color: var(--fab-hover-bg);
}
html.dark-mode.theme-christmas .fab:active::after,
html.dark-mode.theme-christmas .fab.is-pressed::after { background: #072C07; }
html.dark-mode.theme-christmas .fab:focus-visible { outline-color: var(--fab-outline-color); }

html.dark-mode.theme-christmas #spMenuOverlayCloseBtn {
  --fab-gradient:  #072C07; /* 通常 */
  --fab-hover-bg:  #27692B; /* hover */
  --fab-outline-color: var(--fab-hover-bg);
}
html.dark-mode.theme-christmas #spMenuOverlayCloseBtn:active::after,
html.dark-mode.theme-christmas #spMenuOverlayCloseBtn.is-pressed::after { background: #072C07; }
html.dark-mode.theme-christmas #spMenuOverlayCloseBtn:focus-visible { outline-color: var(--fab-outline-color); }

/* ========= オプション：ボタン単位のテーマ（data-theme） ========= */
/* data-theme はページテーマより優先させたい場合のピンポイント適用 */
.fab[data-theme="sakura"]      { --fab-gradient: linear-gradient(#ED869E,#FF3366); --fab-hover-bg:#ED869E; --fab-outline-color: var(--fab-hover-bg); }
.fab[data-theme="strawberry"]  { --fab-gradient: linear-gradient(#FF6B7A,#C2183A); --fab-hover-bg:#FF6B7A; --fab-outline-color: var(--fab-hover-bg); }
.fab[data-theme="christmas"]   { --fab-gradient: linear-gradient(#2E7D32,#0B3D0B); --fab-hover-bg:#2E7D32; --fab-outline-color: var(--fab-hover-bg); }

.fab[data-theme="sakura"]:active::after,
.fab[data-theme="sakura"].is-pressed::after      { background:#FF3366; }
.fab[data-theme="strawberry"]:active::after,
.fab[data-theme="strawberry"].is-pressed::after  { background:#C2183A; }
.fab[data-theme="christmas"]:active::after,
.fab[data-theme="christmas"].is-pressed::after   { background:#0B3D0B; }

html.dark-mode .fab[data-theme="sakura"]     { --fab-gradient: linear-gradient(#D86987,#A33652); --fab-hover-bg:#D86987; --fab-outline-color: var(--fab-hover-bg); }
html.dark-mode .fab[data-theme="strawberry"] { --fab-gradient: linear-gradient(#E15667,#8E0F2A); --fab-hover-bg:#E15667; --fab-outline-color: var(--fab-hover-bg); }
html.dark-mode .fab[data-theme="christmas"]  { --fab-gradient: linear-gradient(#27692B,#072C07); --fab-hover-bg:#27692B; --fab-outline-color: var(--fab-hover-bg); }

html.dark-mode .fab[data-theme="sakura"]:active::after,
html.dark-mode .fab[data-theme="sakura"].is-pressed::after      { background:#A33652; }
html.dark-mode .fab[data-theme="strawberry"]:active::after,
html.dark-mode .fab[data-theme="strawberry"].is-pressed::after  { background:#8E0F2A; }
html.dark-mode .fab[data-theme="christmas"]:active::after,
html.dark-mode .fab[data-theme="christmas"].is-pressed::after   { background:#072C07; }

/* =========================
 * PCドロワー 耳たぶ＋パネル背景のテーマ上書き
 * ========================= */

/* --- Sakura --- */
.theme-sakura .ws-drawer {
  --ws-drawer-btn-bg-gradient: linear-gradient(#ED869E, #FF3366);
  --ws-drawer-bg-gradient: linear-gradient(to bottom, #ED869E, #FF3366);
}
html.dark-mode.theme-sakura .ws-drawer {
  --ws-drawer-btn-bg-gradient: linear-gradient(#D86987, #A33652);
  --ws-drawer-bg-gradient: #1D1D1F; /* 桜の既存ダークはパネルを黒ベースにしている */
}

/* --- Strawberry --- */
.theme-strawberry .ws-drawer {
  --ws-drawer-btn-bg-gradient: linear-gradient(#FF6B7A, #C2183A);
  --ws-drawer-bg-gradient: linear-gradient(to bottom, #FF6B7A, #C2183A);
}
html.dark-mode.theme-strawberry .ws-drawer {
  --ws-drawer-btn-bg-gradient: linear-gradient(#E15667, #8E0F2A);
  --ws-drawer-bg-gradient: #1D1D1F;
}

/* --- Christmas --- */
.theme-christmas .ws-drawer {
  --ws-drawer-btn-bg-gradient: linear-gradient(#2E7D32, #0B3D0B);
  --ws-drawer-bg-gradient: linear-gradient(to bottom, #2E7D32, #0B3D0B);
}
html.dark-mode.theme-christmas .ws-drawer {
  --ws-drawer-btn-bg-gradient: linear-gradient(#27692B, #072C07);
  --ws-drawer-bg-gradient: #1D1D1F;
}