@dnanpm/ui-components 0.6.0 → 0.8.0

package/dist/components/MainNavigation/MainNavigation.css

@@ -0,0 +1,948 @@
+@layer dds-components {/* Root navigation container */
+._main-navigation_1h5w0_2 {
+    --_main-navigation-organization-strip-height: calc(30px + (2 * var(--spacing-space-4)));
+    --_main-navigation-space-5: calc(var(--spacing-space-20) / 4);
+    --_main-navigation-space-6: calc((3 * var(--spacing-space-8)) / 4);
+    --_main-navigation-space-10: calc(var(--spacing-space-20) / 2);
+    --_main-navigation-space-15: calc((3 * var(--spacing-space-20)) / 4);
+    --_main-navigation-navbar-height: 60px;
+    --_main-navigation-height: calc(
+        var(--_main-navigation-organization-strip-height) + var(--_main-navigation-navbar-height)
+    );
+    --_main-navigation-z-root: 10;
+    --_main-navigation-z-overlay: 1;
+    --_main-navigation-z-mobile-panel: 2;
+    --_main-navigation-z-desktop-panel: 3;
+    --_main-navigation-z-organization-strip: 4;
+    --_main-navigation-z-navbar: 5;
+    --_main-navigation-z-mobile-drawer: 6;
+    position: sticky;
+    top: calc(-1 * var(--_main-navigation-height));
+    left: 0;
+    right: 0;
+    z-index: var(--_main-navigation-z-root);
+    height: var(--_main-navigation-height);
+    width: 100%;
+    min-width: 320px;
+    max-width: 2560px;
+    margin: 0 auto;
+    overflow-x: clip;
+    container-name: main-navigation;
+    container-type: inline-size;
+    transition: top 0.2s ease-in-out;
+}
+
+@media (min-width: 1024px) {
+    ._main-navigation_1h5w0_2 {
+        --_main-navigation-organization-strip-height: calc(32px + (2 * var(--spacing-space-8)));
+        --_main-navigation-height: calc(
+            var(--_main-navigation-organization-strip-height) +
+                var(--_main-navigation-navbar-height)
+        );
+    }
+}
+
+._main-navigation--open_1h5w0_45 {
+    top: 0 !important;
+}
+
+._main-navigation--overlay_1h5w0_49::before {
+    z-index: var(--_main-navigation-z-overlay);
+}
+
+/* Organization strip (top bar) */
+._main-navigation__organization-strip_1h5w0_54 {
+    position: relative;
+    z-index: var(--_main-navigation-z-organization-strip);
+    display: flex;
+    height: 30px;
+    box-sizing: content-box;
+    align-items: center;
+    gap: var(--spacing-space-12);
+    padding: var(--spacing-space-4) var(--spacing-space-8);
+    background: var(--color-semantic-surface-secondary-soft);
+}
+
+/* Organization links */
+._main-navigation__organization-list_1h5w0_67 {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-space-12);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+._main-navigation__organization-link_1h5w0_76 {
+    display: inline-flex;
+    min-width: 0;
+    height: 20px;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    font: var(--typography-body-sm);
+    color: var(--color-semantic-foreground-inverse);
+    border-radius: var(--radius-semantic-full);
+    text-decoration: none;
+    padding: var(--spacing-space-4) var(--spacing-space-8);
+    background: transparent;
+    transition:
+        background-color 0.2s ease-in-out,
+        color 0.2s ease-in-out,
+        border-color 0.2s ease-in-out,
+        box-shadow 0.2s ease-in-out;
+
+    &:hover,
+    &:focus-visible {
+        background: var(--color-semantic-surface-secondary-strong);
+        color: var(--color-semantic-foreground-inverse);
+    }
+
+    &:active {
+        background: var(--color-semantic-interactive-inverse-active);
+        color: var(--color-semantic-foreground-secondary-strong);
+    }
+}
+
+._main-navigation__organization-link--current_1h5w0_107 {
+    background: var(--color-semantic-surface-base);
+    color: var(--color-semantic-foreground-default);
+    font: var(--typography-body-sm-medium);
+
+    &:hover,
+    &:focus-visible,
+    &:active {
+        background: var(--color-semantic-surface-base);
+        color: var(--color-semantic-foreground-default);
+    }
+}
+
+@container main-navigation (max-width: 320px) {
+    ._main-navigation__organization-link_1h5w0_76,
+    ._main-navigation__organization-link--current_1h5w0_107 {
+        font: var(--typography-body-xs);
+    }
+}
+
+@container main-navigation (max-width: 1023px) {
+    /* Keep short organization labels (e.g. DNA OYJ) on a single line. */
+    ._main-navigation__organization-link_1h5w0_76,
+    ._main-navigation__organization-link--current_1h5w0_107 {
+        white-space: nowrap;
+    }
+}
+
+/* Main navbar */
+._main-navigation__navbar_1h5w0_136 {
+    box-sizing: border-box;
+    position: relative;
+    z-index: var(--_main-navigation-z-navbar);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0;
+    box-shadow: inset 0 -1px 0 var(--color-semantic-border-neutral-base);
+    background: var(--color-semantic-surface-base);
+    height: 60px;
+    min-height: 60px;
+}
+
+/* Logo area */
+._main-navigation__logo_1h5w0_151 {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    flex: 0 0 auto;
+    background: var(--color-semantic-surface-base);
+}
+
+._main-navigation__logo_1h5w0_151 img {
+    width: 60px;
+    height: 60px;
+}
+
+._main-navigation__logo-mark_1h5w0_164 {
+    font: var(--typography-label-lg-bold);
+}
+
+/* Primary navigation */
+._main-navigation__primary_1h5w0_169 {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: var(--_main-navigation-z-mobile-drawer);
+    display: block;
+    width: 100%;
+    max-width: 480px;
+    height: calc(100dvh - var(--_main-navigation-height));
+    overflow: hidden;
+    border-bottom: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
+    background: var(--color-semantic-surface-base);
+    pointer-events: none;
+    transform: translateX(100%);
+    visibility: hidden;
+    will-change: transform;
+    transition:
+        transform 0.2s ease-in-out,
+        visibility 0s linear 0.2s;
+}
+
+._main-navigation_1h5w0_2:not(._main-navigation--menu-open_1h5w0_190):not(._main-navigation--menu-closing_1h5w0_190)
+    ._main-navigation__primary_1h5w0_169 {
+    transition: none;
+}
+
+._main-navigation__primary-list_1h5w0_195 {
+    display: flex;
+    align-items: stretch;
+    flex-direction: column;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+/* Primary navigation item states */
+._main-navigation__item_1h5w0_206 {
+    min-width: 0;
+    margin: 0;
+    border-bottom: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-mid);
+}
+
+._main-navigation__item-link_1h5w0_212,
+._main-navigation__item-toggle_1h5w0_213 {
+    display: flex;
+    width: 100%;
+    height: auto;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-space-4);
+    padding: var(--spacing-space-16) var(--spacing-space-20);
+    font: var(--typography-body-md-bold);
+    border: none;
+    cursor: pointer;
+    background: var(--color-semantic-surface-base);
+    color: var(--color-semantic-foreground-default);
+    text-decoration: none;
+    border-bottom: none;
+    transition:
+        color 0.2s ease-in-out,
+        border-color 0.2s ease-in-out;
+
+    &:hover,
+    &:focus-visible,
+    &:active {
+        color: var(--color-semantic-interactive-primary-hover);
+    }
+}
+
+._main-navigation__item-icon_1h5w0_239,
+._main-navigation__top-level-toggle-icon_1h5w0_240 {
+    width: 24px;
+    height: 24px;
+    flex: 0 0 24px;
+    color: var(--color-semantic-foreground-primary-strong);
+    transform: rotate(0deg);
+    transition: transform 0.2s ease-in-out;
+}
+
+._main-navigation__item-toggle--open_1h5w0_249 {
+    ._main-navigation__item-icon_1h5w0_239,
+    ._main-navigation__top-level-toggle-icon_1h5w0_240 {
+        transform: rotate(0deg);
+    }
+}
+
+._main-navigation__item-label_1h5w0_256 {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    align-self: stretch;
+}
+
+._main-navigation__item-link--current_1h5w0_263 {
+    color: var(--color-semantic-interactive-primary-active);
+    border-bottom-color: transparent;
+
+    &:active {
+        color: var(--color-semantic-interactive-primary-hover);
+    }
+
+    ._main-navigation__item-label_1h5w0_256::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        border-bottom: var(--borderwidth-semantic-sm) solid
+            var(--color-semantic-interactive-primary-active);
+    }
+}
+
+/* Utility icon navigation */
+._main-navigation__icon-nav_1h5w0_283 {
+    display: flex;
+    align-items: center;
+    gap: var(--_main-navigation-space-10);
+    margin-left: auto;
+    padding-inline: 0;
+    height: 60px;
+}
+
+._main-navigation__icon-nav-item_1h5w0_292 {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-space-4);
+    width: 40px;
+    height: 60px;
+    border: none;
+    background: transparent;
+    color: var(--color-semantic-foreground-default);
+    font: var(--typography-label-sm);
+    cursor: pointer;
+
+    &:hover,
+    &:focus-visible {
+        color: var(--color-semantic-interactive-primary-hover);
+    }
+
+    &:active {
+        color: var(--color-semantic-interactive-primary-active);
+    }
+}
+
+._main-navigation__icon-nav-label_1h5w0_317 {
+    display: none;
+}
+
+._main-navigation__icon-nav-item--counter_1h5w0_321 {
+    position: absolute;
+    top: var(--_main-navigation-space-6);
+    right: 0;
+    width: 16px;
+    height: 16px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-semantic-full);
+    background: var(--color-semantic-interactive-primary-default);
+    color: var(--color-semantic-foreground-inverse);
+    text-align: center;
+    font-family: var(--typography-font-family-text);
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 14px;
+}
+
+/* Navigation panels and columns */
+._main-navigation__panel_1h5w0_342 {
+    border-bottom: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
+    background: var(--color-semantic-surface-base);
+}
+
+._main-navigation__panel-content_1h5w0_347 {
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+._main-navigation__panel-main_1h5w0_352 {
+    min-width: 0;
+}
+
+._main-navigation__mobile-panel-content_1h5w0_356,
+._main-navigation__mobile-level-2-content_1h5w0_357 {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 100%;
+    overflow: auto;
+    background: var(--color-semantic-surface-neutral-soft);
+}
+
+._main-navigation__mobile-back-item_1h5w0_368 {
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    gap: var(--spacing-space-8);
+    padding: var(--spacing-space-16) var(--spacing-space-20);
+    border: none;
+    border-bottom: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-mid);
+    background: var(--color-semantic-surface-base);
+    cursor: pointer;
+    text-align: left;
+}
+
+._main-navigation__mobile-back-icon_1h5w0_381 {
+    transform: rotate(180deg);
+    color: var(--color-semantic-foreground-primary-strong);
+    flex: 0 0 24px;
+}
+
+._main-navigation__mobile-back-label_1h5w0_387 {
+    font: var(--typography-body-md-bold);
+    color: var(--color-semantic-foreground-primary-strong);
+}
+
+._main-navigation__mobile-feature-links_1h5w0_392,
+._main-navigation__mobile-level-2-feature-links_1h5w0_393 {
+    background: var(--color-semantic-surface-neutral-mid);
+    padding-block: var(--spacing-space-8);
+}
+
+._main-navigation__mobile-feature-list_1h5w0_398,
+._main-navigation__mobile-level-2-feature-list_1h5w0_399 {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+
+    ._main-navigation__panel-list-item_1h5w0_406 {
+        padding: var(--spacing-space-8) var(--spacing-space-20);
+    }
+}
+
+._main-navigation__mobile-level-2-feature-list_1h5w0_399 {
+    ._main-navigation__mobile-level-2-feature-list-item_1h5w0_412 {
+        padding: var(--spacing-space-8) var(--spacing-space-20);
+    }
+}
+
+._main-navigation__mobile-feature-link_1h5w0_392 {
+    text-decoration: none;
+
+    &:hover,
+    &:focus-visible {
+        text-decoration: none;
+    }
+
+    & [class*='icon-button__label'] {
+        text-decoration-color: transparent;
+    }
+
+    &:hover [class*='icon-button__label'],
+    &:focus-visible [class*='icon-button__label'] {
+        text-decoration-color: currentColor;
+    }
+}
+
+._main-navigation__mobile-category-list_1h5w0_435,
+._main-navigation__mobile-level-2-category-list_1h5w0_436 {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+._main-navigation__mobile-category-item_1h5w0_442,
+._main-navigation__mobile-level-2-category-item_1h5w0_443 {
+    margin: 0;
+}
+
+._main-navigation__mobile-category-button_1h5w0_447,
+._main-navigation__mobile-level-2-category-button_1h5w0_448 {
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--spacing-space-16) var(--spacing-space-20);
+    border: none;
+    border-bottom: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-mid);
+    background: var(--color-semantic-surface-neutral-soft);
+    color: var(--color-semantic-foreground-default);
+    font: var(--typography-body-md);
+    cursor: pointer;
+    text-align: left;
+}
+
+._main-navigation__mobile-category-button_1h5w0_447 > svg,
+._main-navigation__mobile-level-2-category-button_1h5w0_448 > svg {
+    color: var(--color-semantic-foreground-primary-strong);
+}
+
+._main-navigation__mobile-third-panel_1h5w0_468,
+._main-navigation__mobile-level-3-panel_1h5w0_469 {
+    position: absolute;
+    inset: 0;
+    z-index: calc(var(--_main-navigation-z-mobile-panel) + 1);
+    height: 100%;
+    overflow: auto;
+    background: var(--color-semantic-surface-neutral-soft);
+    backface-visibility: hidden;
+    transform: translate3d(100%, 0, 0);
+    visibility: hidden;
+    pointer-events: none;
+    will-change: transform;
+    transition: transform 0.2s ease-in-out;
+}
+
+._main-navigation__mobile-third-panel--open_1h5w0_484,
+._main-navigation__mobile-level-3-panel--open_1h5w0_485 {
+    transform: translate3d(0, 0, 0);
+    visibility: visible;
+    pointer-events: auto;
+}
+
+._main-navigation__mobile-third-panel--closing_1h5w0_491,
+._main-navigation__mobile-level-3-panel--is-closing_1h5w0_492 {
+    pointer-events: none;
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+}
+
+._main-navigation__mobile-third-list_1h5w0_498,
+._main-navigation__mobile-level-3-list_1h5w0_499 {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+._main-navigation__mobile-third-item_1h5w0_505,
+._main-navigation__mobile-level-3-item_1h5w0_506 {
+    margin: 0;
+}
+
+._main-navigation__mobile-third-link_1h5w0_510,
+._main-navigation__mobile-level-3-link_1h5w0_511 {
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    padding: var(--spacing-space-16) var(--spacing-space-20);
+    border-bottom: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-mid);
+    color: var(--color-semantic-foreground-default);
+    font: var(--typography-body-md);
+    text-decoration: none;
+}
+
+._main-navigation__panel-columns_1h5w0_522 {
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+._main-navigation__panel-columns_1h5w0_522 > * {
+    min-width: 0;
+}
+
+._main-navigation__panel-column_1h5w0_522 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-8);
+    border-right: none;
+    border-bottom: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
+    padding: var(--spacing-space-16) var(--spacing-space-20);
+    min-width: 0;
+}
+
+._main-navigation__panel-column--highlighted_1h5w0_541 {
+    background: var(--color-semantic-surface-neutral-mid);
+}
+
+._main-navigation__panel-column--mobile-only_1h5w0_545 {
+    display: flex;
+}
+
+._main-navigation__panel-column--desktop-only_1h5w0_549 {
+    display: none;
+}
+
+._main-navigation__panel-heading_1h5w0_553 {
+    font: var(--typography-heading-xs);
+    padding-inline: var(--spacing-space-20);
+    margin: 0;
+    color: var(--color-semantic-foreground-default);
+}
+
+._main-navigation__panel-list_1h5w0_406 {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    gap: var(--spacing-space-8);
+}
+
+._main-navigation__panel-list-item_1h5w0_406 {
+    margin: 0;
+    display: flex;
+}
+
+._main-navigation__mobile-level-2-feature-list-item_1h5w0_412 {
+    margin: 0;
+    display: flex;
+}
+
+._main-navigation__panel-link_1h5w0_578 {
+    width: 100%;
+    display: inline-flex;
+    align-items: center;
+    padding: var(--spacing-space-4) var(--spacing-space-32);
+    color: var(--color-semantic-foreground-default);
+    font: var(--typography-body-md);
+    text-decoration: none;
+    transition: none;
+
+    &:hover,
+    &:focus-visible {
+        color: var(--color-semantic-interactive-primary-hover);
+        background: var(--color-semantic-surface-neutral-strong);
+    }
+}
+
+._main-navigation__panel-link--current_1h5w0_595 {
+    color: var(--color-semantic-foreground-link);
+    font: var(--typography-body-md-bold);
+}
+
+/* Feature links block inside panel */
+._main-navigation__feature-links_1h5w0_601 {
+    padding-block: var(--spacing-space-16);
+    padding-inline: 0;
+    background: var(--color-semantic-surface-neutral-soft);
+}
+
+._main-navigation__feature-links--empty_1h5w0_607 {
+    display: none;
+}
+
+._main-navigation__feature-list_1h5w0_611 {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--spacing-space-8);
+
+    ._main-navigation__panel-list-item_1h5w0_406 {
+        justify-content: flex-start;
+    }
+
+    ._main-navigation__feature-link_1h5w0_601 {
+        justify-content: flex-start;
+        text-align: left;
+    }
+}
+
+._main-navigation__feature-link_1h5w0_601 {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--spacing-space-8);
+    width: 100%;
+    font: var(--typography-body-md-bold);
+    color: var(--color-semantic-foreground-default);
+    text-decoration: none;
+
+    &:hover,
+    &:focus-visible {
+        color: var(--color-semantic-interactive-primary-hover);
+    }
+}
+
+._main-navigation__feature-link-icon_1h5w0_645 {
+    flex: 0 0 24px;
+    color: var(--color-semantic-foreground-primary-strong);
+}
+
+._main-navigation__feature-link-label_1h5w0_650 {
+    min-width: 0;
+}
+
+._main-navigation__sr-only_1h5w0_654 {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
+
+/* Mobile menu toggle and open states */
+._main-navigation__menu-toggle_1h5w0_667 {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--color-semantic-foreground-default);
+    border-radius: var(--radius-semantic-sm);
+    padding: 0 var(--_main-navigation-space-15);
+    cursor: pointer;
+}
+
+._main-navigation__menu-toggle--open_1h5w0_680 {
+    color: var(--color-semantic-foreground-primary-strong);
+}
+
+._main-navigation__panel--modal_1h5w0_684,
+._main-navigation__panel--mobile_1h5w0_685 {
+    display: grid;
+    grid-template-columns: 1fr;
+    border-bottom: none;
+    position: absolute;
+    inset: 0;
+    z-index: var(--_main-navigation-z-mobile-panel);
+    height: calc(
+        100dvh -
+            (
+                var(--_main-navigation-organization-strip-height) +
+                    var(--_main-navigation-navbar-height)
+            )
+    );
+    overflow: hidden;
+    animation: _show-mobile-navigation-section_1h5w0_1 0.2s forwards;
+}
+
+._main-navigation__panel--modal-closing_1h5w0_703,
+._main-navigation__panel--is-closing_1h5w0_704 {
+    pointer-events: none;
+    animation: _hide-mobile-navigation-section_1h5w0_1 0.2s forwards;
+}
+
+._main-navigation__panel--desktop_1h5w0_709 {
+    display: none;
+}
+
+._main-navigation__primary--open_1h5w0_713 {
+    pointer-events: auto;
+    transform: translateX(0);
+    visibility: visible;
+    transition: transform 0.2s ease-in-out;
+}
+
+._main-navigation--menu-closing_1h5w0_190 ._main-navigation__primary_1h5w0_169 {
+    pointer-events: none;
+    visibility: visible;
+}
+
+@keyframes _show-mobile-navigation-section_1h5w0_1 {
+    0% {
+        transform: translate3d(100%, 0, 0);
+    }
+
+    100% {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+@keyframes _hide-mobile-navigation-section_1h5w0_1 {
+    0% {
+        transform: translate3d(0, 0, 0);
+    }
+
+    100% {
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+@keyframes _show-megamenu_1h5w0_1 {
+    0% {
+        opacity: 0.8;
+        transform: translateY(-3px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Desktop layout overrides */
+@container main-navigation (min-width: 1024px) {
+    ._main-navigation__organization-strip_1h5w0_54 {
+        height: 32px;
+        padding: var(--spacing-space-8) var(--spacing-space-16);
+    }
+
+    ._main-navigation__menu-toggle_1h5w0_667 {
+        display: none;
+    }
+
+    ._main-navigation__primary_1h5w0_169 {
+        position: static;
+        display: block;
+        flex: 1 1 auto;
+        min-width: 0;
+        width: auto;
+        max-width: none;
+        height: auto;
+        overflow: visible;
+        border-bottom: none;
+        background: transparent;
+        pointer-events: auto;
+        transform: none;
+        visibility: visible;
+        transition: none;
+    }
+
+    ._main-navigation__navbar_1h5w0_136 {
+        gap: var(--spacing-space-16);
+    }
+
+    ._main-navigation__primary--open_1h5w0_713 {
+        z-index: auto;
+    }
+
+    ._main-navigation__primary-list_1h5w0_195 {
+        align-items: center;
+        flex-direction: row;
+        gap: var(--spacing-space-16);
+    }
+
+    ._main-navigation__item_1h5w0_206 {
+        border-bottom: none;
+    }
+
+    ._main-navigation__item-link_1h5w0_212,
+    ._main-navigation__item-toggle_1h5w0_213 {
+        width: auto;
+        height: 60px;
+        justify-content: flex-start;
+        padding: 0 var(--_main-navigation-space-5);
+        font: var(--typography-body-md-medium);
+        background: transparent;
+    }
+
+    ._main-navigation__item-icon_1h5w0_239,
+    ._main-navigation__top-level-toggle-icon_1h5w0_240 {
+        width: 12px;
+        height: 12px;
+        flex: 0 0 12px;
+        color: currentColor;
+        transform: rotate(90deg);
+    }
+
+    ._main-navigation__item-toggle--open_1h5w0_249 {
+        ._main-navigation__item-icon_1h5w0_239,
+        ._main-navigation__top-level-toggle-icon_1h5w0_240 {
+            transform: rotate(-90deg);
+        }
+    }
+
+    ._main-navigation__item-toggle--current_1h5w0_829 {
+        color: var(--color-semantic-interactive-primary-active);
+        border-bottom-color: transparent;
+
+        ._main-navigation__item-label_1h5w0_256::after {
+            content: '';
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            border-bottom: var(--borderwidth-semantic-sm) solid
+                var(--color-semantic-interactive-primary-active);
+        }
+    }
+
+    ._main-navigation__panel--desktop_1h5w0_709 {
+        display: block;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        left: 0;
+        z-index: var(--_main-navigation-z-desktop-panel);
+        max-height: calc(100dvh - var(--_main-navigation-height) - var(--spacing-space-40));
+        overflow: hidden auto;
+        animation: _show-megamenu_1h5w0_1 0.2s forwards;
+    }
+
+    ._main-navigation__panel--modal_1h5w0_684,
+    ._main-navigation__panel--mobile_1h5w0_685 {
+        display: none;
+    }
+
+    ._main-navigation__panel-columns_1h5w0_522 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    ._main-navigation__icon-nav-label_1h5w0_317 {
+        display: inline;
+    }
+
+    ._main-navigation__icon-nav-item_1h5w0_292 {
+        width: 60px;
+        height: 60px;
+    }
+
+    ._main-navigation__icon-nav-item--counter_1h5w0_321 {
+        right: var(--_main-navigation-space-6);
+    }
+
+    ._main-navigation__icon-nav_1h5w0_283 {
+        gap: var(--spacing-space-20);
+        padding-inline: var(--spacing-space-16);
+    }
+
+    ._main-navigation__panel-column_1h5w0_522 {
+        padding: var(--spacing-space-20) 0;
+        border-right: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
+        border-bottom: none;
+    }
+
+    ._main-navigation__panel-columns_1h5w0_522 > ._main-navigation__panel-column_1h5w0_522:nth-child(3n) {
+        border-right: none;
+    }
+
+    ._main-navigation__panel-content_1h5w0_347 {
+        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
+    }
+
+    ._main-navigation__panel-column--mobile-only_1h5w0_545 {
+        display: none;
+    }
+
+    ._main-navigation__panel-column--desktop-only_1h5w0_549 {
+        display: flex;
+    }
+
+    ._main-navigation__feature-links_1h5w0_601 {
+        padding-block: var(--spacing-space-8);
+        padding-inline: 0;
+        border-radius: 0;
+    }
+
+    ._main-navigation__feature-links--empty_1h5w0_607 {
+        display: flex;
+    }
+
+    ._main-navigation__feature-links_1h5w0_601._main-navigation__panel-column--last_1h5w0_915 {
+        border-radius: 0;
+        border-bottom: none;
+        border-top: none;
+    }
+
+    ._main-navigation__feature-list_1h5w0_611 {
+        grid-template-columns: 1fr;
+        gap: var(--spacing-space-16);
+        padding: var(--spacing-space-20) var(--spacing-space-20) var(--spacing-space-20)
+            var(--spacing-space-32);
+    }
+}
+
+@container main-navigation (min-width: 1024px) and (max-width: 1279px) {
+    ._main-navigation__item-label_1h5w0_256 {
+        font: var(--typography-body-sm-medium);
+        white-space: nowrap;
+    }
+}
+
+/* High contrast / forced colors support */
+@media (forced-colors: active) {
+    ._main-navigation__organization-link_1h5w0_76,
+    ._main-navigation__item-link_1h5w0_212,
+    ._main-navigation__item-toggle_1h5w0_213,
+    ._main-navigation__icon-nav-item_1h5w0_292,
+    ._main-navigation__panel-link_1h5w0_578,
+    ._main-navigation__feature-link_1h5w0_601,
+    ._main-navigation__menu-toggle_1h5w0_667 {
+        border: 1px solid transparent;
+    }
+}
+}