@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/dist/css/components/nav.css

@@ -132,12 +132,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;
@@ -146,26 +146,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;
@@ -176,7 +176,7 @@
     font-weight: 500;
   }
 
-  .mk-nav--clasica .mk-nav__button {
+  .mk-nav--sidebar .mk-nav__button {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -193,34 +193,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;
@@ -230,8 +230,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;
@@ -240,20 +240,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;
@@ -273,16 +273,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);
@@ -290,22 +290,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;
@@ -410,23 +410,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;
@@ -434,24 +434,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;
@@ -462,7 +462,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;
@@ -480,11 +480,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:
@@ -494,7 +494,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)
@@ -506,30 +506,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;
@@ -537,19 +537,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;
@@ -568,7 +568,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;
@@ -578,11 +578,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);
@@ -590,26 +590,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;
@@ -617,24 +617,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;
@@ -645,7 +645,7 @@
     font-weight: 500;
   }
 
-  .mk-nav--melon .mk-nav__button {
+  .mk-nav--wash .mk-nav__button {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -662,18 +662,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:
@@ -681,11 +681,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:
@@ -693,22 +693,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;
@@ -717,25 +717,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;
@@ -745,7 +745,7 @@
     font-weight: 500;
   }
 
-  .mk-nav--tunnel .mk-nav__button {
+  .mk-nav--magnify .mk-nav__button {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -765,35 +765,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;
@@ -801,13 +801,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;
@@ -819,7 +819,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;
@@ -829,7 +829,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;
   }
 }
@@ -955,11 +955,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;
@@ -970,13 +970,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;
@@ -991,7 +991,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);
 }
 
@@ -999,11 +999,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;
@@ -1017,11 +1017,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;
@@ -1032,7 +1032,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;