Problem
Toggling dark mode flips the Editorial Frame toggle icon, but the same dark-mode toggle placed in other menu locations (main navigation, icon-only variants) does not rotate at all.
Root cause
`src/scss/components/_navigation-icons.scss`
The base rule for search/dark-mode icons uses the `:is(&, #specific)` trick to bump specificity so it can beat other rules:
```scss
:is(&, #specific):not(.no-icon) a {
&:after {
transform: translateY(-50%);
}
}
```
Because `:is()` takes the specificity of its most specific argument, the `#specific` ID boosts the selector to `1,0,2`.
The `.is-dark` rotation rule that should override it has only classes and pseudo-elements — specificity `0,3,2`. ID beats classes, so the base `translateY(-50%)` wins and the rotation never gets applied anywhere the base rule is in effect (main-menu icon-only variants).
Fix
Use the same `#specific` trick on the dark-mode override so it matches the base rule's specificity:
```scss
.is-dark :is(&, #specific):not(.no-icon) a:after {
transform: translateY(-50%) rotate(180deg);
}
.is-dark :is(&, #specific).icon-only a:after {
transform: translate(-50%, -50%) rotate(180deg);
}
```
Verified in the browser: the `::after` transform in dark mode is now `matrix(-1, 0, 0, -1, …)` (180° rotation) on the main-menu icon-only variants, where before it was just `translateY(-50%)`. Animation plays via the existing `transition: all .25s $ease` on the same pseudo.
Problem
Toggling dark mode flips the Editorial Frame toggle icon, but the same dark-mode toggle placed in other menu locations (main navigation, icon-only variants) does not rotate at all.
Root cause
`src/scss/components/_navigation-icons.scss`
The base rule for search/dark-mode icons uses the `:is(&, #specific)` trick to bump specificity so it can beat other rules:
```scss
:is(&, #specific):not(.no-icon) a {
&:after {
transform: translateY(-50%);
}
}
```
Because `:is()` takes the specificity of its most specific argument, the `#specific` ID boosts the selector to `1,0,2`.
The `.is-dark` rotation rule that should override it has only classes and pseudo-elements — specificity `0,3,2`. ID beats classes, so the base `translateY(-50%)` wins and the rotation never gets applied anywhere the base rule is in effect (main-menu icon-only variants).
Fix
Use the same `#specific` trick on the dark-mode override so it matches the base rule's specificity:
```scss
.is-dark :is(&, #specific):not(.no-icon) a:after {
transform: translateY(-50%) rotate(180deg);
}
.is-dark :is(&, #specific).icon-only a:after {
transform: translate(-50%, -50%) rotate(180deg);
}
```
Verified in the browser: the `::after` transform in dark mode is now `matrix(-1, 0, 0, -1, …)` (180° rotation) on the main-menu icon-only variants, where before it was just `translateY(-50%)`. Animation plays via the existing `transition: all .25s $ease` on the same pseudo.