# Header Main V2 — SCSS Refactor Proposal

Goal: extract shared styles into `header_main_v2_common.scss`, keep only specificities in each variant file.

---

## 1. Selectors that are identical (→ common)

These blocks are copy-paste identical or differ only by minor values that could be variables:

| Selector | Notes |
|---|---|
| `.header-main` (root) | Identical — `fixed`, `width`, `z-index`, `top`, `left`, `border-bottom`, `bg` |
| `.header-main .ui-icons` | Identical |
| `.header-top` | Identical |
| `.header-top, .header-bottom` (width/margin reset) | Identical |
| `.header-main-logo` | Identical |
| `.header-main-category` + nested `.header-main-nav-link`, `.header-icon-more/next` | Identical |
| `.header-main-subnav-link` | Identical (incl. RTL logic) |
| `.header-additional-icon-link` | Identical |
| `.header-main-asset-container` | Identical |
| `.header-main-asset-container .header-main-asset` | Identical |
| `.mobile-subnav-is-open` | Nearly identical — both hide menu icon, show close icon, reset `.header-bottom` transform |
| `.mobile-search-is-open` | Identical |
| `.header-main-search-canceled` | Identical |
| `.search-form-input` | Identical |
| Mobile MQ — `.header-main` | Identical (`display:flex`, `align-items`, height) |
| Mobile MQ — `.header-main-menu-icon` | Identical (`display:block`, transition) |

---

## 2. Selectors that differ (→ stay in variant files)

### 2.1 `.header-top-left` / `.header-top-right`
- **v2**: `display:flex; align-items:baseline` only  
- **v2_2**: adds `flex: 0 0 auto; gap: 0.625rem;` + nested `.ui-icons { align-items/justify-content }`  
- **v2_2** also adds `.header-top-right { justify-content: flex-end }` at root level (v2 has it only in desktop MQ)

### 2.2 Icon wrapper selectors
- **v2**: `.header-main-search-icon, .header-additional-icon` — `display:flex`, no width  
- **v2_2**: `.header-main-menu-icon, .header-main-close-icon, .header-main-search-icon, .header-main-additional-icon` — `width: 2rem; display:flex`  
- Different sets of selectors, different sizing approach

### 2.3 `.header-main-close-icon` default state
- **v2**: only hidden inside mobile MQ  
- **v2_2**: `display:none` at root level (always hidden by default, shown via JS class)

### 2.4 `.header-menu-label`
- **v2**: not present  
- **v2_2**: new block — hidden by default, shown on desktop with specific typography

### 2.5 `.header-main-search-container`
- **v2**: `top: $padding-top-body-mobile; left:0; right:0; bottom:0` (full-width anchored)  
- **v2_2**: `max-width: $website-xl-size; left:50%; transform: translateX(-50%)` (centered, max-width constrained)

### 2.6 `.header-bottom` definition
- **v2**: has `max-width: $header-main-bottom-max-width` at root; the absolute/slide positioning is **inside mobile MQ**  
- **v2_2**: `.header-bottom` absolute slide-in is defined **at root level** (applies to all breakpoints), with different `width` calc

### 2.7 `.header-icon-next` / `.header-main-dropdown-container` / `.header-main-subcategory` (mobile)
- **v2**: these are all inside the mobile MQ  
- **v2_2**: these are at root level (outside any MQ)

### 2.8 Desktop MQ — `.header-bottom` (the biggest divergence)
| | v2 | v2_2 |
|---|---|---|
| Layout | `display:flex` horizontal nav bar | Side panel, `width: min-content; min-width: 30dvw` |
| Padding | none | `padding-left: calc(((100vw - $website-xl-size)/2) + 1.25rem)` |
| `.header-main-dropdown-container` | relative, margin-based horizontal spacing | not redefined for desktop |
| `.header-main-category` | `height` + `cursor:pointer` for hover dropdown | not redefined for desktop |
| `.header-main-subcategory` | `display:none` → shown on `:hover` (dropdown) | `position:absolute; left:100%` (side panel push) with opacity transition |
| `.header-main-menu-icon / close-icon` | `display:none` on desktop | kept visible + `::after` overlay pseudo-element |

### 2.9 Desktop MQ — animation
- **v2**: no scroll animation  
- **v2_2**: `@keyframes scale` + `animation-timeline: view()` shrinks header on scroll

### 2.10 Desktop MQ — `.header-top` size
- **v2**: `height: 4.75rem; padding: 0.5rem 0.9375rem`  
- **v2_2**: `height: stretch; padding: 0.5rem 1.25rem`

### 2.11 Desktop MQ — `.header-logo`
- **v2**: `max-height: 3.75rem`  
- **v2_2**: `max-height: 5rem`

### 2.12 Desktop MQ — `.header-top-left / right`
- **v2**: `width: 18.75rem; height: 3.75rem` (fixed dimensions)  
- **v2_2**: `position:relative; flex: 0 0 auto; width:auto; height:auto; align-items:center`

---

## 3. Proposed file structure

```
header_main_v2_common.scss   ← shared base (see section 1)
header_main_v2.scss          ← v2 specificities only (see section 2)
header_main_v2_2.scss        ← v2_2 specificities only (see section 2)
```

### `header_main_v2_common.scss` would contain

```scss
// ROOT — identical in both
.header-main { ... }
.header-main .ui-icons { ... }
.header-top { ... }
.header-top, .header-bottom { width: 100%; margin: 0 auto; }
.header-main-logo { ... }
.header-logo { ... }           // mobile value
.header-main-category { ... }  // + nested nav-link + icons
.header-main-subnav-link { ... }
.header-additional-icon-link { ... }
.header-main-asset-container { ... }
.header-main-asset-container .header-main-asset { ... }
.mobile-subnav-is-open { ... }
.mobile-search-is-open { ... }
.header-main-search-canceled { ... }
.search-form-input { ... }

// MOBILE MQ only
@include target-mq("zero", "large") {
  .header-main { display:flex; align-items:center; height: $padding-top-body-mobile; }
  .header-main-menu-icon { display:block; transition: ... }
  // .header-main-search-container top offset → both use $padding-top-body-mobile
}

// DESKTOP MQ — partial shared
@include mq("large") {
  .header-main .ui-icons { color: $header-main-desktop-icon-color; cursor:pointer; }
  .header-main-asset-container .header-main-asset { ... }
}
```

### `header_main_v2.scss` would contain (delta only)

```scss
@use 'header_main_v2_common' as *;

// root specifics
.header-bottom { max-width: $header-main-bottom-max-width; }
.header-top-left, .header-top-right { display:flex; align-items:baseline; }
.header-main-search-icon, .header-additional-icon { display:flex; ... }
.header-additional-icon { margin-left: 0; }
.header-main-btn-holder { display:flex; }
.header-main-search-container { top: ...; left:0; right:0; bottom:0; }

// mobile MQ specifics
@include target-mq("zero", "large") {
  .header-main-close-icon { display:none; }
  .header-additional-icon { margin-right: 0.625rem; }
  .header-bottom { position:absolute; ... transform: translateX(-100%); }
  .header-icon-more { display:none; }
  .header-icon-next { display:block; ... }
  .header-main-dropdown-container { ... }
  .header-main-subcategory { display:none; ... }
}

// desktop MQ specifics
@include mq("large") {
  .header-main { height: $padding-top-body-desktop; }
  .header-top { height: 4.75rem; padding: 0.5rem 0.9375rem; }
  .header-logo { max-height: 3.75rem; }
  .header-top-left, .header-top-right { width: 18.75rem; height: 3.75rem; }
  .header-top-right { justify-content:flex-end; }
  .header-main-menu-icon, .header-main-close-icon, .header-icon-next { display:none; }
  .header-bottom { display:flex; align-items:center; position:relative; height: $header-main-desktop-nav-height; }
  .header-main-dropdown-container { margin: ...; position:relative; }
  .header-main-category { margin:auto; cursor:pointer; height: ...; }
  .header-main-subcategory { display:none; position:absolute; background: ...; box-shadow: ...; }
  // hover dropdown logic
  .header-main-dropdown-container:hover { .header-main-subcategory { display:block; } }
  // ... rest of desktop nav
}
```

### `header_main_v2_2.scss` would contain (delta only)

```scss
@use 'header_main_v2_common' as *;

// root specifics
.header-top-left, .header-top-right { display:flex; align-items:baseline; flex: 0 0 auto; gap: 0.625rem; }
.header-top-right { justify-content:flex-end; }
.header-main-menu-icon, .header-main-close-icon,
.header-main-search-icon, .header-main-additional-icon { width: 2rem; display:flex; ... }
.header-main-close-icon { display:none; }
.header-menu-label { display:none; ... }
.header-main-search-container { max-width: $website-xl-size; left:50%; transform:translateX(-50%); }
.header-bottom { position:absolute; ... transform: translateX(-100%); }  // at root level
.header-icon-next { display:block; transition: ... }
.header-main-dropdown-container { margin-bottom: 1.625rem; }
.header-main-subcategory { display:none; :hover { ... } }

// mobile MQ specifics (only the search container top offset)
@include target-mq("zero", "large") {
  .header-main { max-height: $padding-top-body-mobile; }
  .header-main-search-container { top: $padding-top-body-mobile; }
}

// desktop MQ specifics
@include mq("large") {
  @keyframes scale { to { height: 5rem; } }
  .header-main { height: $padding-top-body-desktop; animation: scale ... animation-timeline:view(); }
  .header-top { height:stretch; padding: 0.5rem 1.25rem; }
  .header-logo { max-height: 5rem; }
  .header-top-left, .header-top-right { position:relative; flex: 0 0 auto; width:auto; height:auto; align-items:center; }
  .header-menu-label { display:block; }
  .header-bottom { width:min-content; min-width:30dvw; padding-left:calc(...); }
  .header-main-subcategory { display:block; position:absolute; left:100%; opacity:0; transition:opacity ...; }
  // side panel open logic via .mobile-subnav-is-open.active
  .mobile-subnav-is-open .header-main-dropdown-container.active { .header-main-subcategory { opacity:1; z-index:0; } }
}
```

---

## 4. Open questions before implementing

- [ ] Should `header_main_v2_common.scss` use `@forward` or be a plain partial `@use`d by both variant files?
- [ ] The `.header-bottom` root vs mobile-MQ placement differs — confirm that v2_2 intentionally applies the slide-in styles at all breakpoints (not just mobile)
- [ ] `$header-main-bottom-max-width` variable — used only in v2; confirm it's not needed in v2_2
- [ ] The `@keyframes scale` + `animation-timeline: view()` in v2_2 is non-standard (scroll-driven) — confirm browser support target
- [ ] `.header-main-search-container` positioning difference is intentional (centered vs full-width) — confirm UX decision before merging
