/*
 * Windows 7 style Tabs for SWELL tabs (loos/tab, SWELL_PARTS::tab_list)
 * Based on 7.css v0.21.1 (https://khang-nd.github.io/7.css)
 * Scope-limited to `.is-style-win7` to avoid global impact.
 */

/* Variables (scoped) */
.is-style-win7{
  --w7-font: 9pt "Segoe UI","SegoeUI","Noto Sans",sans-serif;
  --w7-tab-bg: #fff;
  --w7-el-bg: #f2f2f2;
  --w7-el-bg-s-1: #ebebeb;
  --w7-el-bg-s-2: #cfcfcf;
  --w7-el-bd: #8e8f8f;
  --w7-el-bd-h: #3c7fb1;
  --w7-el-bd-a: #6d91ab;
  --w7-el-bdr: 3px;
  --w7-el-sd: inset 0 0 0 1px #fffc;
  --w7-el-sd-a: inset 1px 1px 0 #0003, inset -1px 1px 0 #0001;
  --w7-el-grad: linear-gradient(var(--w7-el-bg) 45%, var(--w7-el-bg-s-1) 45%, var(--w7-el-bg-s-2));
  --w7-el-grad-h: linear-gradient(#eaf6fd 45%, #bee6fd 0, #a7d9f5);
  --w7-el-grad-a: linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db);
  /* panel border control */
  --w7-panel-bw: 1px; /* overridden by inline style */
  --w7-panel-bs: 0 0 0 1px #fff9; /* subtle inner edge like 7.css */
}

/* Tablist container alignment tweaks (use SWELL's layout defaults) */
.editor-styles-wrapper .is-style-win7 .c-tabList,
.is-style-win7 .c-tabList{
  gap: 0;
  text-indent: 0;
  position: relative;
}

/* Tab button (role=tab) */
.editor-styles-wrapper .is-style-win7 .c-tabList__button[role="tab"],
.is-style-win7 .c-tabList__button[role="tab"]{
  background: var(--w7-el-grad);
  border: 1px solid var(--w7-el-bd);
  border-radius: 0;
  box-shadow: var(--w7-el-sd);
  color: #222;
  font: var(--w7-font);
  min-height: 23px;
  padding: 2px 10px;
  position: relative;
  z-index: 1;
}

.editor-styles-wrapper .is-style-win7 .c-tabList__button[role="tab"]:hover,
.is-style-win7 .c-tabList__button[role="tab"]:hover{
  border-color: var(--w7-el-bd-h);
  background: var(--w7-el-grad-h);
}

.editor-styles-wrapper .is-style-win7 .c-tabList__button[role="tab"]:active,
.is-style-win7 .c-tabList__button[role="tab"]:active{
  border-color: var(--w7-el-bd-a);
  background: var(--w7-el-grad-a);
  box-shadow: var(--w7-el-sd-a);
}

/* Selected tab visuals: blend into panel */
.editor-styles-wrapper .is-style-win7 .c-tabList__button[role="tab"][aria-selected="true"],
.is-style-win7 .c-tabList__button[role="tab"][aria-selected="true"]{
  background: var(--w7-tab-bg);
  border-bottom: 0;
  box-shadow: none;
  margin: -2px 0 1px 0; /* pull to overlap panel border */
  padding-bottom: 4px;
  z-index: 8;
}

/* Disabled tab */
.editor-styles-wrapper .is-style-win7 .c-tabList__button[role="tab"][disabled],
.is-style-win7 .c-tabList__button[role="tab"][disabled]{
  opacity: .6;
}

/* Panel container: SWELL uses .c-tabBody and .c-tabBody__item */
.editor-styles-wrapper .is-style-win7 > .c-tabBody,
.is-style-win7 > .c-tabBody{
  background: var(--w7-tab-bg);
  border: var(--w7-panel-bw) solid var(--w7-el-bd);
  clear: both;
  margin-bottom: 9px;
  padding: 14px;
  position: relative;
  z-index: 2;
  /* remove inner white shadow to avoid double border look */
  box-shadow: none;
}

/* Ensure first row border aligns with selected tab (visual top seam) */
.editor-styles-wrapper .is-style-win7 > .c-tabBody,
.is-style-win7 > .c-tabBody{ margin-top: 0; }

/* Top seam: keep a 1px line visible even when outer border off */
.editor-styles-wrapper .is-style-win7 > .c-tabBody:before,
.is-style-win7 > .c-tabBody:before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  border-top: 1px solid var(--w7-el-bd); /* used only when outer border is off */
  pointer-events: none;
}

/* Block variant may not have .c-tabBody wrapper: style visible item directly */
.editor-styles-wrapper .is-style-win7 > .c-tabBody > .c-tabBody__item[aria-hidden="false"],
.is-style-win7 > .c-tabBody > .c-tabBody__item[aria-hidden="false"]{
  background: var(--w7-tab-bg);
  border: 0; /* inner item should not have its own border */
  padding: 14px;
  position: relative;
  z-index: 2;
  box-shadow: none;
}

/* Per-block toggle via data attribute (editor/save filter injects) */
.editor-styles-wrapper .is-style-win7[data-win7-border="off"] > .c-tabBody,
.editor-styles-wrapper .is-style-win7[data-win7-border="off"] > .c-tabBody > .c-tabBody__item[aria-hidden="false"],
.is-style-win7[data-win7-border="off"] > .c-tabBody,
.is-style-win7[data-win7-border="off"] > .c-tabBody > .c-tabBody__item[aria-hidden="false"],
/* editor wrapper attribute (live) */
.editor-styles-wrapper [data-win7-border="off"] > .is-style-win7 > .c-tabBody,
.editor-styles-wrapper [data-win7-border="off"] > .is-style-win7 > .c-tabBody > .c-tabBody__item[aria-hidden="false"]{
  border-width: 0;
  box-shadow: none;
}

/* Keep top seam even when off */
.editor-styles-wrapper .is-style-win7[data-win7-border="off"] > .c-tabBody:before,
.is-style-win7[data-win7-border="off"] > .c-tabBody:before,
/* editor wrapper attribute (live) */
.editor-styles-wrapper [data-win7-border="off"] > .is-style-win7 > .c-tabBody:before{ border-top-color: var(--w7-el-bd); }

/* When outer border is ON, hide the extra top seam (avoid double border) */
.editor-styles-wrapper .is-style-win7[data-win7-border="on"] > .c-tabBody:before,
.is-style-win7[data-win7-border="on"] > .c-tabBody:before,
/* editor wrapper attribute (live) */
.editor-styles-wrapper [data-win7-border="on"] > .is-style-win7 > .c-tabBody:before{ border-top-color: transparent; }

/* For top page tab list wrapper as well */
.p-postListTab.is-style-win7 .c-tabList__button[role="tab"]{ font: var(--w7-font); }
.p-postListTab.is-style-win7 .c-tabBody{ background: var(--w7-tab-bg); }

/* Optional: tighter list item spacing to mimic Win7 */
.is-style-win7 .c-tabList__item{ margin: 0; }


/* ==============================
   Editor overrides (Gutenberg)
   - In editor, tab buttons may not have role="tab" or aria-selected
   - Apply styles based on class structure instead
   ============================== */

.editor-styles-wrapper .is-style-win7 .c-tabList__button{
  background: var(--w7-el-grad);
  border: 1px solid var(--w7-el-bd);
  border-radius: 0;
  box-shadow: var(--w7-el-sd);
  color: #222;
  font: var(--w7-font);
  min-height: 23px;
  padding: 2px 10px;
  position: relative;
  z-index: 1;
}

.editor-styles-wrapper .is-style-win7 .c-tabList__button:hover{
  border-color: var(--w7-el-bd-h);
  background: var(--w7-el-grad-h);
}

.editor-styles-wrapper .is-style-win7 .c-tabList__button:active{
  border-color: var(--w7-el-bd-a);
  background: var(--w7-el-grad-a);
  box-shadow: var(--w7-el-sd-a);
}

/* Selected tab in editor uses .is-active on the item */
.editor-styles-wrapper .is-style-win7 .c-tabList__item.is-active .c-tabList__button{
  background: var(--w7-tab-bg);
  border-bottom: 0;
  box-shadow: none;
  margin: -2px 0 1px 0;
  padding-bottom: 4px;
  z-index: 8;
}

/* ==============================
   Front: panel appear animation
   - Animate when panel becomes visible (aria-hidden="false")
   - Works for both block and post list tabs when style=win7
   ============================== */
@keyframes win7TabFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Block tabs */
.is-style-win7 > .c-tabBody > .c-tabBody__item[aria-hidden="false"]{
  animation: win7TabFade .28s ease-out both;
  will-change: opacity, transform;
}

/* Post list tabs */
.p-postListTab.is-style-win7 .c-tabBody__item[aria-hidden="false"]{
  animation: win7TabFade .28s ease-out both;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce){
  .is-style-win7 > .c-tabBody > .c-tabBody__item[aria-hidden="false"],
  .p-postListTab.is-style-win7 .c-tabBody__item[aria-hidden="false"]{
    animation: none;
  }
}