@yewdiel21/motion-kit 0.14.0 → 0.15.0

package/src/components/nav/nav.css

@@ -131,12 +131,12 @@
     order: -1;
   }
 
-  /* 1 · Clásica: a bordered sidebar, a filled pill for the current page. */
-  .mk-shell:has(> .mk-nav--clasica) > .mk-shell__view {
+  /* 1 · sidebar: a bordered sidebar, a filled pill for the current page. */
+  .mk-shell:has(> .mk-nav--sidebar) > .mk-shell__view {
     border-right: 1px solid var(--md-sys-color-surface-container);
   }
 
-  .mk-nav--clasica {
+  .mk-nav--sidebar {
     display: flex;
     flex-direction: column;
     min-width: 270px;
@@ -145,26 +145,26 @@
     z-index: 1;
   }
 
-  .mk-nav--clasica .mk-nav__buttons {
+  .mk-nav--sidebar .mk-nav__buttons {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
 
-  .mk-nav--clasica .mk-nav__actions {
+  .mk-nav--sidebar .mk-nav__actions {
     margin-top: auto;
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--clasica .mk-nav__options {
+  .mk-nav--sidebar .mk-nav__options {
     display: flex;
     flex-direction: column;
     gap: 4px;
     margin-top: 24px;
   }
 
-  .mk-nav--clasica .mk-nav__label {
+  .mk-nav--sidebar .mk-nav__label {
     display: flex;
     align-items: center;
     height: 40px;
@@ -175,7 +175,7 @@
     font-weight: 500;
   }
 
-  .mk-nav--clasica .mk-nav__button {
+  .mk-nav--sidebar .mk-nav__button {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -192,34 +192,34 @@
       0.15s background;
   }
 
-  .mk-nav--clasica .mk-nav__button:hover {
+  .mk-nav--sidebar .mk-nav__button:hover {
     color: var(--md-sys-color-primary);
   }
 
-  .mk-nav--clasica .mk-nav__button[aria-current='page'] {
+  .mk-nav--sidebar .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-surface-container-high);
     color: var(--md-sys-color-primary);
     animation: mk-nav-icon 125ms cubic-bezier(0.48, 0, 0, 1);
     font-variation-settings: 'FILL' 1;
   }
 
-  .mk-nav--clasica.mk-nav--accent .mk-nav__button[aria-current='page'] {
+  .mk-nav--sidebar.mk-nav--accent .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-primary-container);
     box-shadow: 0 0 32px -10px var(--md-sys-color-primary-container);
   }
 
-  .mk-nav--clasica .mk-nav__button.mk-nav__button--first {
+  .mk-nav--sidebar .mk-nav__button.mk-nav__button--first {
     color: var(--md-sys-color-on-background);
     margin-bottom: 32px;
   }
 
-  .mk-nav--clasica .mk-nav__button--first .mk-nav__name {
+  .mk-nav--sidebar .mk-nav__button--first .mk-nav__name {
     display: flex;
     flex-grow: 1;
   }
 
-  .mk-nav--clasica .mk-nav__button--first::after {
+  .mk-nav--sidebar .mk-nav__button--first::after {
     content: '';
     position: absolute;
     left: -16px;
@@ -229,8 +229,8 @@
     background: var(--md-sys-color-surface-container);
   }
 
-  /* 2 · Bonita: centred text pills that widen on hover and when current (spring padding). */
-  .mk-nav--bonita {
+  /* 2 · pills: centred text pills that widen on hover and when current (spring padding). */
+  .mk-nav--pills {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -239,20 +239,20 @@
     z-index: 1;
   }
 
-  .mk-nav--bonita .mk-nav__buttons {
+  .mk-nav--pills .mk-nav__buttons {
     display: flex;
     flex-direction: column;
     gap: 4px;
   }
 
-  .mk-nav--bonita .mk-nav__actions {
+  .mk-nav--pills .mk-nav__actions {
     position: absolute;
     bottom: 16px;
     display: flex;
     gap: 8px;
   }
 
-  .mk-nav--bonita .mk-nav__button {
+  .mk-nav--pills .mk-nav__button {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -272,16 +272,16 @@
       0.3s padding var(--mk-ease-swatch);
   }
 
-  .mk-nav--bonita .mk-nav__icon {
+  .mk-nav--pills .mk-nav__icon {
     display: none;
   }
 
-  .mk-nav--bonita .mk-nav__button:hover {
+  .mk-nav--pills .mk-nav__button:hover {
     color: var(--md-sys-color-primary);
     padding: 0 26px;
   }
 
-  .mk-nav--bonita .mk-nav__button[aria-current='page'] {
+  .mk-nav--pills .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-surface-container-highest);
     color: var(--md-sys-color-on-background);
     animation: mk-nav-icon 125ms cubic-bezier(0.48, 0, 0, 1);
@@ -289,22 +289,22 @@
     padding: 0 32px;
   }
 
-  .mk-nav--bonita.mk-nav--accent .mk-nav__button[aria-current='page'] {
+  .mk-nav--pills.mk-nav--accent .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-primary-container);
     box-shadow: 0 0 32px -10px var(--md-sys-color-primary-container);
   }
 
-  .mk-nav--bonita .mk-nav__name {
+  .mk-nav--pills .mk-nav__name {
     display: flex;
     flex-grow: 1;
   }
 
-  .mk-nav--bonita .mk-nav__button.mk-nav__button--first {
+  .mk-nav--pills .mk-nav__button.mk-nav__button--first {
     display: none;
   }
 
-  /* 3 · Dock: a floating glass bar centred at the bottom. */
+  /* 3 · dock: a floating glass bar centred at the bottom. */
   .mk-shell:has(> .mk-nav--dock) {
     flex-direction: column;
     overflow: auto;
@@ -409,23 +409,23 @@
     color: var(--md-sys-color-on-primary-container);
   }
 
-  /* 4 · Guapa: the view is a raised card on a tinted shell; the current page is a white chip. */
-  .mk-shell:has(> .mk-nav--guapa) {
+  /* 4 · card: the view is a raised card on a tinted shell; the current page is a white chip. */
+  .mk-shell:has(> .mk-nav--card) {
     background: var(--md-sys-color-surface-container-low);
     padding: 8px 8px 8px 0;
   }
 
-  .mk-shell:has(> .mk-nav--guapa) > .mk-shell__view {
+  .mk-shell:has(> .mk-nav--card) > .mk-shell__view {
     background: var(--md-sys-color-background);
     border-radius: 24px;
     box-shadow: 0 0.5px 2.5px #0000001f;
   }
 
-  .mk-shell:has(> .mk-nav--guapa) > .mk-shell__view:not(:last-of-type) {
+  .mk-shell:has(> .mk-nav--card) > .mk-shell__view:not(:last-of-type) {
     margin-right: 8px;
   }
 
-  .mk-nav--guapa {
+  .mk-nav--card {
     display: flex;
     flex-direction: column;
     min-width: 270px;
@@ -433,24 +433,24 @@
     z-index: 1;
   }
 
-  .mk-nav--guapa .mk-nav__buttons {
+  .mk-nav--card .mk-nav__buttons {
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--guapa .mk-nav__actions {
+  .mk-nav--card .mk-nav__actions {
     margin-top: auto;
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--guapa .mk-nav__options {
+  .mk-nav--card .mk-nav__options {
     display: flex;
     flex-direction: column;
     margin-top: 24px;
   }
 
-  .mk-nav--guapa .mk-nav__label {
+  .mk-nav--card .mk-nav__label {
     display: flex;
     align-items: center;
     height: 40px;
@@ -461,7 +461,7 @@
     font-weight: 500;
   }
 
-  .mk-nav--guapa .mk-nav__button {
+  .mk-nav--card .mk-nav__button {
     --mk-nav-icon-size: 16px;
     display: flex;
     align-items: center;
@@ -479,11 +479,11 @@
       0.15s background;
   }
 
-  .mk-nav--guapa .mk-nav__button:hover {
+  .mk-nav--card .mk-nav__button:hover {
     color: var(--md-sys-color-primary);
   }
 
-  .mk-nav--guapa .mk-nav__button[aria-current='page'] {
+  .mk-nav--card .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-background);
     color: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container) 90%);
     box-shadow:
@@ -493,7 +493,7 @@
     font-variation-settings: 'FILL' 1;
   }
 
-  .mk-nav--guapa.mk-nav--accent .mk-nav__button[aria-current='page'] {
+  .mk-nav--card.mk-nav--accent .mk-nav__button[aria-current='page'] {
     background: linear-gradient(
       color-mix(in srgb, var(--md-sys-color-primary-container) 100%, var(--md-sys-color-background) 40%),
       var(--md-sys-color-primary-container)
@@ -505,30 +505,30 @@
       inset 0 1.8px #ffffff4d;
   }
 
-  .mk-nav--guapa .mk-nav__button.mk-nav__button--first {
+  .mk-nav--card .mk-nav__button.mk-nav__button--first {
     color: var(--md-sys-color-on-background);
     margin-bottom: 16px;
   }
 
-  .mk-nav--guapa .mk-nav__button--first .mk-nav__name {
+  .mk-nav--card .mk-nav__button--first .mk-nav__name {
     display: flex;
     flex-grow: 1;
   }
 
-  /* 5 · Tasks: a rail of round 56 px buttons; the current one squares off (springy radius). */
-  .mk-shell:has(> .mk-nav--tasks) {
+  /* 5 · rail: a rail of round 56 px buttons; the current one squares off (springy radius). */
+  .mk-shell:has(> .mk-nav--rail) {
     padding: 8px;
   }
 
-  .mk-shell:has(> .mk-nav--tasks) > .mk-shell__view {
+  .mk-shell:has(> .mk-nav--rail) > .mk-shell__view {
     background: var(--md-sys-color-background);
   }
 
-  .mk-shell:has(> .mk-nav--tasks) > .mk-shell__view:not(:last-of-type) .mk-shell__content {
+  .mk-shell:has(> .mk-nav--rail) > .mk-shell__view:not(:last-of-type) .mk-shell__content {
     padding-right: 0 !important;
   }
 
-  .mk-nav--tasks {
+  .mk-nav--rail {
     display: flex;
     flex-direction: column;
     width: auto;
@@ -536,19 +536,19 @@
     z-index: 1;
   }
 
-  .mk-nav--tasks .mk-nav__buttons {
+  .mk-nav--rail .mk-nav__buttons {
     display: flex;
     flex-direction: column;
     gap: 0;
   }
 
-  .mk-nav--tasks .mk-nav__actions {
+  .mk-nav--rail .mk-nav__actions {
     margin-top: auto;
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--tasks .mk-nav__button {
+  .mk-nav--rail .mk-nav__button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -567,7 +567,7 @@
       background 0.25s;
   }
 
-  .mk-nav--tasks .mk-nav__name {
+  .mk-nav--rail .mk-nav__name {
     /* Hidden from sight, not from screen readers: the button keeps its name. */
     position: absolute;
     width: 1px;
@@ -577,11 +577,11 @@
     white-space: nowrap;
   }
 
-  .mk-nav--tasks .mk-nav__button:hover {
+  .mk-nav--rail .mk-nav__button:hover {
     color: var(--md-sys-color-primary);
   }
 
-  .mk-nav--tasks .mk-nav__button[aria-current='page'] {
+  .mk-nav--rail .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-surface-container-highest);
     color: var(--md-sys-color-primary);
     animation: mk-nav-icon 125ms cubic-bezier(0.48, 0, 0, 1);
@@ -589,26 +589,26 @@
     border-radius: 12px;
   }
 
-  .mk-nav--tasks.mk-nav--accent .mk-nav__button[aria-current='page'] {
+  .mk-nav--rail.mk-nav--accent .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-primary-container);
   }
 
-  .mk-nav--tasks .mk-nav__button.mk-nav__button--first {
+  .mk-nav--rail .mk-nav__button.mk-nav__button--first {
     color: var(--md-sys-color-on-background);
     margin-bottom: 8px;
   }
 
-  .mk-nav--tasks .mk-nav__button--first .mk-nav__icon {
+  .mk-nav--rail .mk-nav__button--first .mk-nav__icon {
     display: none;
   }
 
-  /* 6 · Melon: a soft sidebar with a faint primary wash on the current page. */
-  .mk-shell:has(> .mk-nav--melon) > .mk-shell__view {
+  /* 6 · wash: a soft sidebar with a faint primary wash on the current page. */
+  .mk-shell:has(> .mk-nav--wash) > .mk-shell__view {
     border-right: 1px solid var(--md-sys-color-surface-container);
   }
 
-  .mk-nav--melon {
+  .mk-nav--wash {
     display: flex;
     flex-direction: column;
     min-width: 270px;
@@ -616,24 +616,24 @@
     z-index: 1;
   }
 
-  .mk-nav--melon .mk-nav__buttons {
+  .mk-nav--wash .mk-nav__buttons {
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--melon .mk-nav__actions {
+  .mk-nav--wash .mk-nav__actions {
     margin-top: auto;
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--melon .mk-nav__options {
+  .mk-nav--wash .mk-nav__options {
     display: flex;
     flex-direction: column;
     margin-top: 24px;
   }
 
-  .mk-nav--melon .mk-nav__label {
+  .mk-nav--wash .mk-nav__label {
     display: flex;
     align-items: center;
     height: 40px;
@@ -644,7 +644,7 @@
     font-weight: 500;
   }
 
-  .mk-nav--melon .mk-nav__button {
+  .mk-nav--wash .mk-nav__button {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -661,18 +661,18 @@
       0.15s background;
   }
 
-  .mk-nav--melon .mk-nav__button:hover {
+  .mk-nav--wash .mk-nav__button:hover {
     color: var(--md-sys-color-primary);
   }
 
-  .mk-nav--melon .mk-nav__button[aria-current='page'] {
+  .mk-nav--wash .mk-nav__button[aria-current='page'] {
     background: color-mix(in srgb, var(--md-sys-color-primary-container) 10%, var(--md-sys-color-background) 90%);
     color: var(--md-sys-color-primary);
     animation: mk-nav-icon 125ms cubic-bezier(0.48, 0, 0, 1);
     font-variation-settings: 'FILL' 1;
   }
 
-  .mk-nav--melon.mk-nav--accent .mk-nav__button {
+  .mk-nav--wash.mk-nav--accent .mk-nav__button {
     --mk-nav-icon-size: 16px;
     padding: 8px 12px;
     transition:
@@ -680,11 +680,11 @@
       0.15s background;
   }
 
-  .mk-nav--melon.mk-nav--accent .mk-nav__label {
+  .mk-nav--wash.mk-nav--accent .mk-nav__label {
     padding: 0 12px;
   }
 
-  .mk-nav--melon.mk-nav--accent .mk-nav__button[aria-current='page'] {
+  .mk-nav--wash.mk-nav--accent .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-background);
     color: color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-primary-container) 90%);
     box-shadow:
@@ -692,22 +692,22 @@
       0 0.5px 2.5px #00000014;
   }
 
-  .mk-nav--melon .mk-nav__button.mk-nav__button--first {
+  .mk-nav--wash .mk-nav__button.mk-nav__button--first {
     color: var(--md-sys-color-on-background);
     margin-bottom: 16px;
   }
 
-  .mk-nav--melon .mk-nav__button--first .mk-nav__name {
+  .mk-nav--wash .mk-nav__button--first .mk-nav__name {
     display: flex;
     flex-grow: 1;
   }
 
-  /* 7 · Tunnel: big words; the hovered one and its neighbours grow like a dock. */
-  .mk-shell:has(> .mk-nav--tunnel) > .mk-shell__view {
+  /* 7 · magnify: big words; the hovered one and its neighbours grow like a dock. */
+  .mk-shell:has(> .mk-nav--magnify) > .mk-shell__view {
     border-right: 1px solid var(--md-sys-color-surface-container);
   }
 
-  .mk-nav--tunnel {
+  .mk-nav--magnify {
     display: flex;
     flex-direction: column;
     min-width: 270px;
@@ -716,25 +716,25 @@
     z-index: 1;
   }
 
-  .mk-nav--tunnel .mk-nav__buttons {
+  .mk-nav--magnify .mk-nav__buttons {
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--tunnel .mk-nav__actions {
+  .mk-nav--magnify .mk-nav__actions {
     margin-top: auto;
     display: flex;
     flex-direction: column;
   }
 
-  .mk-nav--tunnel .mk-nav__options {
+  .mk-nav--magnify .mk-nav__options {
     display: flex;
     flex-direction: column;
     gap: 4px;
     margin-top: 24px;
   }
 
-  .mk-nav--tunnel .mk-nav__label {
+  .mk-nav--magnify .mk-nav__label {
     display: flex;
     align-items: center;
     height: 40px;
@@ -744,7 +744,7 @@
     font-weight: 500;
   }
 
-  .mk-nav--tunnel .mk-nav__button {
+  .mk-nav--magnify .mk-nav__button {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -764,35 +764,35 @@
     transform-origin: left;
   }
 
-  .mk-nav--tunnel .mk-nav__icon {
+  .mk-nav--magnify .mk-nav__icon {
     display: none;
   }
 
-  .mk-nav--tunnel .mk-nav__button:hover {
+  .mk-nav--magnify .mk-nav__button:hover {
     color: var(--md-sys-color-primary-container);
   }
 
-  .mk-nav--tunnel .mk-nav__button:not(.mk-nav__button--first):has(+ * + *:hover) {
+  .mk-nav--magnify .mk-nav__button:not(.mk-nav__button--first):has(+ * + *:hover) {
     transform: scale(1.03);
   }
 
-  .mk-nav--tunnel .mk-nav__button:not(.mk-nav__button--first):has(+ *:hover) {
+  .mk-nav--magnify .mk-nav__button:not(.mk-nav__button--first):has(+ *:hover) {
     transform: scale(1.09);
   }
 
-  .mk-nav--tunnel .mk-nav__button:hover {
+  .mk-nav--magnify .mk-nav__button:hover {
     transform: scale(1.2);
   }
 
-  .mk-nav--tunnel .mk-nav__button:not(.mk-nav__button--first):hover + * {
+  .mk-nav--magnify .mk-nav__button:not(.mk-nav__button--first):hover + * {
     transform: scale(1.09);
   }
 
-  .mk-nav--tunnel .mk-nav__button:not(.mk-nav__button--first):hover + * + * {
+  .mk-nav--magnify .mk-nav__button:not(.mk-nav__button--first):hover + * + * {
     transform: scale(1.03);
   }
 
-  .mk-nav--tunnel .mk-nav__button[aria-current='page'] {
+  .mk-nav--magnify .mk-nav__button[aria-current='page'] {
     color: var(--md-sys-color-primary);
     font-size: 28px;
     font-weight: 600;
@@ -800,13 +800,13 @@
     font-variation-settings: 'FILL' 1;
   }
 
-  .mk-nav--tunnel.mk-nav--accent .mk-nav__button[aria-current='page'] {
+  .mk-nav--magnify.mk-nav--accent .mk-nav__button[aria-current='page'] {
     background: var(--md-sys-color-primary-container);
     color: var(--md-sys-color-on-primary-container);
     box-shadow: 0 0 32px -10px var(--md-sys-color-primary-container);
   }
 
-  .mk-nav--tunnel .mk-nav__button.mk-nav__button--first {
+  .mk-nav--magnify .mk-nav__button.mk-nav__button--first {
     color: var(--md-sys-color-on-background);
     width: 40px;
     padding: 0;
@@ -818,7 +818,7 @@
     margin: 8px;
   }
 
-  .mk-nav--tunnel .mk-nav__button--first .mk-nav__name {
+  .mk-nav--magnify .mk-nav__button--first .mk-nav__name {
     /* Hidden from sight, not from screen readers: the button keeps its name. */
     position: absolute;
     width: 1px;
@@ -828,7 +828,7 @@
     white-space: nowrap;
   }
 
-  .mk-nav--tunnel .mk-nav__button--first .mk-nav__icon {
+  .mk-nav--magnify .mk-nav__button--first .mk-nav__icon {
     display: none;
   }
 }
@@ -954,11 +954,11 @@
 }
 
 /* Each style's view header. */
-.mk-shell:has(> .mk-nav--clasica) .mk-shell__title {
+.mk-shell:has(> .mk-nav--sidebar) .mk-shell__title {
   font-size: var(--md-sys-typescale-headline-small-size);
 }
 
-.mk-shell:has(> .mk-nav--clasica) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
+.mk-shell:has(> .mk-nav--sidebar) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -969,13 +969,13 @@
   padding-top: max(16px, env(safe-area-inset-top));
 }
 
-.mk-shell:has(> .mk-nav--bonita) .mk-shell__title,
-.mk-shell:has(> .mk-nav--tasks) .mk-shell__title {
+.mk-shell:has(> .mk-nav--pills) .mk-shell__title,
+.mk-shell:has(> .mk-nav--rail) .mk-shell__title {
   font-size: var(--md-sys-typescale-title-small-size);
 }
 
-.mk-shell:has(> .mk-nav--bonita) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header,
-.mk-shell:has(> .mk-nav--tasks) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
+.mk-shell:has(> .mk-nav--pills) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header,
+.mk-shell:has(> .mk-nav--rail) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
   display: flex;
   align-items: center;
   margin: 16px 16px -8px;
@@ -990,7 +990,7 @@
   padding: 0;
 }
 
-.mk-shell:has(> .mk-nav--bonita) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
+.mk-shell:has(> .mk-nav--pills) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
   padding-top: env(safe-area-inset-top);
 }
 
@@ -998,11 +998,11 @@
   margin-bottom: -24px;
 }
 
-.mk-shell:has(> .mk-nav--guapa) .mk-shell__title {
+.mk-shell:has(> .mk-nav--card) .mk-shell__title {
   font-size: var(--md-sys-typescale-title-large-size);
 }
 
-.mk-shell:has(> .mk-nav--guapa) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
+.mk-shell:has(> .mk-nav--card) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -1016,11 +1016,11 @@
   padding-top: max(12px, env(safe-area-inset-top));
 }
 
-.mk-shell:has(> .mk-nav--melon) .mk-shell__title {
+.mk-shell:has(> .mk-nav--wash) .mk-shell__title {
   font-size: var(--md-sys-typescale-headline-small-size);
 }
 
-.mk-shell:has(> .mk-nav--melon) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
+.mk-shell:has(> .mk-nav--wash) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -1031,7 +1031,7 @@
 }
 
 @media only screen and (max-width: 679.98px) {
-  .mk-shell:has(> .mk-nav--tasks) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
+  .mk-shell:has(> .mk-nav--rail) .mk-shell__view:has(> .mk-shell__content) > .mk-shell__header {
     margin: 0;
     border-radius: 0;
     background: none;