npm - @primer/react-brand - Versions diffs - 0.75.1 → 0.76.0-rc.16d4997d - Mend

@primer/react-brand 0.75.1 → 0.76.0-rc.16d4997d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (419) hide show

package/esm/SubdomainNavBar/SubdomainNavBar.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubdomainNavBar.module.js","names":[],"sources":["../../src/SubdomainNavBar/SubdomainNavBar.module.css"],"sourcesContent":["/\n Main styles for the subdomain navigation bar.\n /\n.SubdomainNavBar {\n --SubdomainNavBar-height: var(--base-size-64);\n\n position: relative;\n z-index: 90;\n font-weight: 550;\n background: var(--brand-color-canvas-default);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n height: var(--SubdomainNavBar-height);\n}\n\n.SubdomainNavBar::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-start: calc(100% + var(--brand-borderWidth-thin));\n height: var(--brand-borderWidth-thin);\n background-color: var(--brand-color-text-emphasized);\n pointer-events: none;\n}\n\n/\n * Outer container\n /\n.SubdomainNavBar-outer-container {\n --SubdomainNavBar-height: var(--base-size-64);\n\n z-index: 90;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar-outer-container {\n --SubdomainNavBar-height: calc(var(--base-size-64) - var(--base-size-8));\n }\n}\n\n.SubdomainNavBar-outer-container:not(.SubdomainNavBar-outer-container--fixed) {\n position: relative;\n}\n\n.SubdomainNavBar-outer-container--fixed {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n}\n\n/\n * Inner container\n /\n.SubdomainNavBar-inner-container {\n display: flex;\n padding: 4px 28px;\n}\n\n.SubdomainNavBar-inner-container--centered {\n max-width: 1280px;\n margin: 0 auto;\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-inner-container {\n padding: 4px 32px;\n }\n}\n\n.SubdomainNavBar-inner-container--search-open {\n animation: fade-out 150ms;\n}\n\n/\n * Logo and title area\n /\n.SubdomainNavBar-title-area {\n display: inline-flex;\n list-style-type: none;\n align-items: center;\n gap: var(--base-size-8);\n padding: 0;\n margin: 0;\n max-width: 340px;\n color: var(--brand-color-text-default);\n padding: var(--base-size-16) 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-title-area {\n gap: var(--base-size-16);\n }\n}\n\n.SubdomainNavBar-logo-mark,\n.SubdomainNavBar-title {\n display: inline-flex;\n align-items: center;\n color: var(--brand-color-text-default);\n}\n\n.SubdomainNavBar-logo-mark {\n position: relative;\n}\n\n.SubdomainNavBar-back-arrow {\n position: absolute;\n inset-inline-start: calc(-1 var(--base-size-24) + var(--base-size-4));\n color: var(--brand-color-text-muted);\n opacity: 0;\n transform: translateX(var(--base-size-4));\n transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast) ease;\n}\n\n.SubdomainNavBar-logo-mark:hover .SubdomainNavBar-back-arrow {\n opacity: 1;\n transform: translateX(0);\n}\n\n.SubdomainNavBar-logo-mark svg {\n width: 32px;\n height: 32px;\n}\n\n.SubdomainNavBar-title {\n line-height: var(--base-size-32);\n text-decoration: none;\n padding-right: var(--base-size-16);\n white-space: nowrap;\n}\n\n.SubdomainNavBar-title:hover {\n text-decoration: none;\n}\n\n.SubdomainNavBar-title-prefix {\n color: var(--brand-color-text-default);\n}\n\n.SubdomainNavBar-title-label {\n color: var(--brand-color-text-muted);\n}\n\n.SubdomainNavBar-leading-component,\n.SubdomainNavBar-trailing-component {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n}\n\n.SubdomainNavBar-leading-component {\n margin-inline-end: var(--base-size-16);\n}\n\n.SubdomainNavBar-trailing-component {\n margin-inline-start: var(--base-size-16);\n}\n\n/\n Primary navigation link area\n /\n.SubdomainNavBar-primary-nav {\n display: inline-flex;\n list-style-type: none;\n align-items: center;\n flex: 1 1 0;\n min-width: 0;\n padding: 0;\n margin: 0;\n}\n\n.SubdomainNavBar-primary-nav-list {\n list-style-type: none;\n}\n\n@media screen and (max-width: 767px) {\n .SubdomainNavBar-primary-nav-list {\n display: none;\n }\n\n .SubdomainNavBar-primary-nav-list--invisible {\n display: none;\n }\n\n .SubdomainNavBar-primary-nav-list--visible {\n display: block;\n margin: 0;\n padding: 0;\n }\n\n .SubdomainNavBar-leading-component,\n .SubdomainNavBar-trailing-component {\n flex: none;\n width: 100%;\n box-sizing: border-box;\n padding-block: var(--base-size-16);\n padding-inline: var(--base-size-16);\n }\n\n .SubdomainNavBar-leading-component {\n margin-inline-end: 0;\n }\n\n .SubdomainNavBar-trailing-component {\n margin-inline-start: 0;\n }\n\n .SubdomainNavBar-menu-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow-y: auto;\n position: absolute;\n top: var(--SubdomainNavBar-height);\n left: 0;\n right: 0;\n z-index: 2;\n background-color: var(--brand-color-canvas-default);\n width: 100%;\n max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n animation: fade-in-down 500ms;\n animation-timing-function: var(--brand-animation-easing-default);\n }\n\n .SubdomainNavBar-menu-wrapper--close {\n display: none;\n }\n\n .SubdomainNavBar-menu-wrapper-footer {\n flex: none;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-primary-nav-overflow {\n display: flex;\n align-items: center;\n flex: 1 1 0;\n min-width: 0;\n margin: 0 var(--base-size-24) 0 0;\n }\n\n .SubdomainNavBar-primary-nav-list {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n flex-wrap: nowrap;\n min-width: 0;\n block-size: var(--base-size-48);\n max-block-size: var(--base-size-48);\n overflow: hidden;\n padding: 0;\n margin: 0;\n }\n}\n\n.SubdomainNavBar-primary-nav-list-item {\n flex: 0 0 auto;\n white-space: nowrap;\n}\n\n@media screen and (max-width: 767px) {\n .SubdomainNavBar-primary-nav-list-item {\n animation-name: fade-in-down-staggered;\n animation-duration: 500ms;\n animation-delay: calc(var(--animation-order) 80ms);\n animation-fill-mode: both;\n animation-timing-function: var(--brand-animation-easing-default);\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-primary-nav-list-item--overflowed {\n visibility: hidden;\n pointer-events: none;\n }\n\n .SubdomainNavBar-primary-nav-list-item--overflow {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n position: absolute;\n inset-inline-end: 0;\n visibility: hidden;\n pointer-events: none;\n }\n\n .SubdomainNavBar-primary-nav-overflow--has-overflow .SubdomainNavBar-primary-nav-list-item--overflow {\n position: relative;\n visibility: visible;\n pointer-events: auto;\n }\n}\n\n.SubdomainNavBar-link {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--base-size-8);\n color: var(--brand-color-text-default);\n font-family: var(--brand-heading-fontFamily);\n font-weight: var(--base-text-weight-normal);\n font-size: var(--base-size-20);\n line-height: var(--base-size-20);\n padding: var(--base-size-8) var(--base-size-16) var(--base-size-16) var(--base-size-28);\n text-decoration: none;\n}\n\n.SubdomainNavBar-link:hover {\n text-decoration: none;\n}\n\n.SubdomainNavBar-link-text {\n position: relative;\n}\n\n.SubdomainNavBar-link-content {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-8);\n}\n\n@media screen and (max-width: 767px) {\n .SubdomainNavBar-link:first-of-type {\n padding-top: var(--base-size-24);\n }\n\n .SubdomainNavBar-link--title {\n font-weight: var(--base-text-weight-medium);\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-link {\n font-family: var(--brand-heading-fontFamily);\n font-weight: var(--base-text-weight-normal);\n font-size: var(--base-size-16);\n line-height: var(--base-size-16);\n padding: var(--base-size-16) var(--base-size-16);\n }\n\n .SubdomainNavBar-link-text::after {\n content: '';\n position: absolute;\n bottom: -6px;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: var(--brand-SubdomainNavBar-border-nav-default);\n opacity: 0;\n transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);\n transform: scale(0);\n transform-origin: center;\n }\n\n .SubdomainNavBar-link:hover .SubdomainNavBar-link-text::after,\n .SubdomainNavBar-link:focus .SubdomainNavBar-link-text::after {\n opacity: 1;\n transform: scale(0.75);\n }\n\n .SubdomainNavBar-link:active .SubdomainNavBar-link-text::after {\n background-color: var(--brand-SubdomainNavBar-border-nav-pressed);\n transform: scale(0.75);\n }\n\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {\n transition: background-color var(--brand-animation-easing-default) 250ms;\n background-color: var(--brand-SubdomainNavBar-canvas-overflow-default);\n color: var(--brand-SubdomainNavBar-fg-overflow-default);\n }\n\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link .SubdomainNavBar-link-text::after {\n display: none;\n }\n\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover {\n background-color: var(--brand-SubdomainNavBar-canvas-overflow-hover);\n }\n\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {\n box-shadow: inset 0px 0px 0px 2px var(--brand-color-focus);\n outline: none;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-link {\n padding: var(--base-size-16) var(--base-size-24);\n }\n}\n\n.SubdomainNavBar-more-link {\n display: none;\n}\n\n.SubdomainNavBar-more-link[aria-expanded='true']:hover::after,\n.SubdomainNavBar-more-link[aria-expanded='true']:focus::after {\n display: none;\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-more-link {\n cursor: pointer;\n appearance: none;\n border: none;\n background-color: transparent;\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-4);\n }\n}\n\n.SubdomainNavBar-overflow-menu {\n position: absolute;\n z-index: 100;\n right: auto;\n background-color: var(--base-color-scale-white-0);\n border-radius: var(--brand-borderRadius-large);\n animation: fade-in-down 0.25s, enlarge-shadow 250ms forwards;\n animation-timing-function: var(--brand-animation-easing-default);\n box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n overflow: hidden;\n}\n\n.SubdomainNavBar-overflow-menu-list {\n display: grid;\n list-style-type: none;\n padding: 0;\n margin: 0;\n width: max-content;\n}\n\n/\n Toolbar actions area for search and mobile menu\n /\n\n.SubdomainNavBar-secondary-nav {\n display: flex;\n align-items: center;\n flex: 0 1 auto;\n min-width: 0;\n margin-left: auto;\n}\n.SubdomainNavBar-search-trigger {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n min-width: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-search-trigger {\n --SubdomainNavBar-search-input-width: calc(var(--base-size-128) 2 + var(--base-size-24));\n\n flex: 0 9999 var(--SubdomainNavBar-search-input-width);\n width: var(--SubdomainNavBar-search-input-width);\n max-width: 100%;\n min-width: calc(var(--base-size-128) + var(--base-size-32));\n }\n}\n\n.SubdomainNavBar-menu-button {\n position: relative;\n cursor: pointer;\n appearance: none;\n background-color: transparent;\n border: var(--brand-borderWidth-thick) solid transparent;\n color: var(--brand-color-text-default);\n width: calc(48px - var(--brand-borderWidth-thick));\n height: calc(48px - var(--brand-borderWidth-thick));\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border 250ms var(--brand-animation-easing-default), box-shadow 250ms ease;\n border-radius: var(--brand-borderRadius-medium);\n box-shadow: 0 0 0 2px transparent;\n gap: 0;\n}\n\n.SubdomainNavBar-menu-button svg {\n width: 24px;\n height: 24px;\n}\n\n.SubdomainNavBar-search-input-button {\n cursor: pointer;\n appearance: none;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--base-size-16);\n width: 100%;\n block-size: var(--base-size-32);\n min-block-size: var(--base-size-32);\n padding: var(--base-size-4) var(--base-size-4) var(--base-size-4) calc(var(--base-size-8) + var(--base-size-2));\n overflow: hidden;\n color: var(--brand-color-text-muted);\n background-color: var(--brand-color-canvas-subtle);\n border: 0;\n border-radius: var(--brand-borderRadius-medium);\n font-family: var(--brand-body-fontFamily);\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n box-shadow var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.SubdomainNavBar-search-input-button:hover {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thin) var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-input-button:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.SubdomainNavBar-search-input-button:active {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thin) var(--brand-color-border-default);\n}\n\n.SubdomainNavBar-search-input-button-placeholder {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-8);\n min-width: 0;\n overflow: hidden;\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-normal);\n line-height: 1.2;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.SubdomainNavBar-search-input-button-placeholder svg {\n flex: none;\n}\n\n.SubdomainNavBar-search-input-button-placeholder span {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.SubdomainNavBar-search-input-button-shortcut {\n flex: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n min-width: var(--base-size-24);\n padding-inline: var(--base-size-8);\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-radius: calc(var(--brand-borderRadius-medium) / 2);\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-normal);\n line-height: 1.6;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar-search-trigger {\n flex: 0 0 var(--base-size-48);\n justify-content: center;\n width: var(--base-size-48);\n }\n\n .SubdomainNavBar-search-input-button {\n justify-content: center;\n gap: 0;\n width: var(--base-size-32);\n padding: var(--base-size-8);\n background-color: transparent;\n }\n\n .SubdomainNavBar-search-input-button-placeholder {\n gap: 0;\n }\n\n .SubdomainNavBar-search-input-button-placeholder span,\n .SubdomainNavBar-search-input-button-shortcut {\n display: none;\n }\n}\n\n.SubdomainNavBar-menu-button {\n display: inline-flex;\n align-items: center;\n align-self: center;\n}\n\n.SubdomainNavBar-menu-button-icon {\n display: inline-flex;\n flex-direction: column;\n gap: calc(var(--base-size-4) - var(--brand-borderWidth-thin));\n}\n\n.SubdomainNavBar-menu-button-label {\n display: none;\n}\n\n.SubdomainNavBar-menu-button-bar {\n width: 22px;\n height: 2px;\n background-color: var(--brand-color-text-default);\n margin: var(--base-size-4) auto;\n border-radius: var(--brand-borderRadius-large);\n display: block;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .SubdomainNavBar-menu-button-bar {\n transition-timing-function: var(--brand-animation-easing-default);\n transition-duration: 500ms;\n transition-property: opacity, transform;\n }\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform-origin: bottom right;\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform-origin: top right;\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform: rotate(-45deg) translateY(-3px);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(2) {\n opacity: 0;\n transform: scale(0);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform: rotate(45deg) translateY(3px);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close {\n position: relative;\n z-index: 3;\n background-color: var(--brand-color-canvas-muted);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close:focus-visible {\n outline: none;\n box-shadow: none;\n transition: none;\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close:focus-visible::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 2;\n pointer-events: none;\n border: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close::after {\n content: '';\n position: absolute;\n z-index: 1;\n inset-inline: 0;\n inset-block-end: calc(var(--brand-borderWidth-thin) * -2);\n height: calc(var(--brand-borderWidth-thin) * 2);\n background-color: var(--brand-color-canvas-muted);\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-menu-button:hover {\n background-color: transparent;\n border: var(--brand-borderWidth-thick) solid var(--brand-SubdomainNavBar-border-button-hover);\n }\n\n .SubdomainNavBar-menu-button:active {\n background-color: transparent;\n box-shadow: 0 0 0 1px var(--brand-SubdomainNavBar-border-button-hover);\n }\n\n .SubdomainNavBar-mobile-menu-button {\n display: none;\n }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n .SubdomainNavBar-primary-nav {\n display: none;\n }\n\n .SubdomainNavBar-secondary-nav {\n position: relative;\n flex: 0 0 auto;\n align-self: stretch;\n }\n\n .SubdomainNavBar-search-trigger {\n --SubdomainNavBar-tablet-search-width: calc(var(--base-size-128) * 2 + var(--base-size-2));\n\n flex: 0 0 var(--SubdomainNavBar-tablet-search-width);\n width: var(--SubdomainNavBar-tablet-search-width);\n padding-inline: var(--base-size-8);\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar-search-input-button {\n width: 100%;\n }\n\n .SubdomainNavBar-mobile-menu-button {\n align-self: stretch;\n flex: none;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: var(--base-size-8);\n width: max-content;\n min-width: calc(var(--base-size-64) + var(--base-size-32));\n height: 100%;\n padding-inline: var(--base-size-16);\n color: var(--brand-color-text-default);\n border: 0;\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-radius: 0;\n overflow: visible;\n font-family: var(--brand-body-fontFamily);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar-menu-button-label {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n }\n\n .SubdomainNavBar-menu-button-icon {\n flex: none;\n align-items: stretch;\n justify-content: center;\n width: var(--base-size-16);\n height: var(--base-size-16);\n overflow: visible;\n }\n\n .SubdomainNavBar-menu-button-icon .SubdomainNavBar-menu-button-bar {\n width: var(--base-size-16);\n height: var(--base-size-2);\n margin: 0;\n transform-origin: center;\n }\n\n .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform: translateY(calc(var(--base-size-6) - var(--brand-borderWidth-thin))) rotate(45deg);\n }\n\n .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform: translateY(calc(var(--brand-borderWidth-thin) - var(--base-size-6))) rotate(-45deg);\n }\n\n .SubdomainNavBar-menu-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow-y: auto;\n position: absolute;\n inset-inline: 0;\n top: var(--SubdomainNavBar-height);\n z-index: 2;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n background-color: var(--brand-color-canvas-default);\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n animation: fade-in-down var(--brand-animation-duration-default);\n animation-timing-function: var(--brand-animation-easing-default);\n }\n\n .SubdomainNavBar-menu-wrapper--close {\n display: none;\n }\n\n .SubdomainNavBar-primary-nav-list--visible {\n display: grid;\n gap: var(--brand-borderWidth-thin);\n margin: 0;\n padding: var(--base-size-8) var(--base-size-16);\n }\n\n .SubdomainNavBar-menu-wrapper-footer {\n flex: none;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link {\n box-sizing: border-box;\n width: 100%;\n min-height: var(--base-size-40);\n padding: var(--base-size-8) var(--base-size-12);\n color: var(--brand-color-text-muted);\n background-color: var(--brand-color-canvas-default);\n border-radius: var(--brand-borderRadius-medium);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item) {\n width: 100%;\n height: auto;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link {\n padding: var(--base-size-8) var(--base-size-12);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link\n > .SubdomainNavBar-link-content {\n width: 100%;\n padding: 0;\n background-color: transparent;\n border-radius: 0;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:hover\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:active\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link[aria-current]:not([aria-current='false'])\n > .SubdomainNavBar-link-content {\n background-color: transparent;\n outline: none;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:hover,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:active,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link[aria-current]:not([aria-current='false']) {\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thick) var(--brand-color-focus);\n outline: none;\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link--title {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar-menu-wrapper .SubdomainNavBar-leading-component,\n .SubdomainNavBar-menu-wrapper .SubdomainNavBar-trailing-component {\n box-sizing: border-box;\n flex: none;\n width: 100%;\n height: auto;\n margin-inline: 0;\n padding: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area {\n display: flex;\n width: 100%;\n height: auto;\n padding: 0;\n }\n\n .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area-inner {\n box-sizing: border-box;\n flex-direction: column;\n width: 100%;\n margin-block: var(--base-size-24);\n padding-inline: var(--base-size-16);\n }\n}\n\n.SubdomainNavBar .SubdomainNavBar-menu-wrapper-footer--has-leading-item,\n.SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-leading-component\n + .SubdomainNavBar-primary-nav-list--visible,\n.SubdomainNavBar\n .SubdomainNavBar-menu-wrapper-footer\n .SubdomainNavBar-trailing-component\n + .SubdomainNavBar-button-area {\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-button-area {\n display: inline-flex;\n gap: var(--base-size-16);\n align-items: center;\n min-width: 0;\n}\n\n.SubdomainNavBar-button-area-inner {\n display: flex;\n gap: var(--base-size-8);\n min-width: 0;\n}\n\n@media screen and (max-width: 48rem) {\n .SubdomainNavBar-button-area {\n display: none;\n }\n\n .SubdomainNavBar-button-area--visible {\n display: flex;\n left: 0;\n z-index: 99;\n width: 100%;\n height: auto;\n animation-name: fade-in-down-staggered;\n animation-duration: 500ms;\n animation-delay: calc(10 * 80ms);\n animation-fill-mode: both;\n animation-timing-function: var(--brand-animation-easing-default);\n }\n\n .SubdomainNavBar-inner-container--search-open .SubdomainNavBar-button-area--visible {\n display: none;\n }\n\n .SubdomainNavBar-button-area-inner {\n width: 100%;\n box-sizing: border-box;\n flex-direction: column;\n margin-block: var(--base-size-24);\n padding-inline: var(--base-size-24);\n min-width: 0;\n }\n}\n\n.SubdomainNavBar-cta-button {\n white-space: nowrap;\n}\n\n.SubdomainNavBar .SubdomainNavBar-menu-wrapper {\n top: var(--SubdomainNavBar-height);\n height: auto;\n max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n}\n\n.SubdomainNavBar-menu-backdrop {\n position: fixed;\n inset-block-start: calc(var(--SubdomainNavBar-height) + var(--SubdomainNavBar-menu-offset-block-start, 0px));\n inset-block-end: 0;\n inset-inline: 0;\n z-index: 1;\n background-color: var(--brand-SubdomainNavBar-searchDialog-backdropColor);\n animation: fade-in var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.SubdomainNavBar .SubdomainNavBar-inner-container--search-open {\n animation: none;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar {\n --SubdomainNavBar-height: calc(var(--base-size-64) - var(--base-size-8));\n --SubdomainNavBar-mobile-control-size: var(--base-size-48);\n }\n\n .SubdomainNavBar .SubdomainNavBar-inner-container {\n height: 100%;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area {\n height: 100%;\n max-width: none;\n gap: 0;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li {\n display: flex;\n align-items: center;\n height: 100%;\n padding-inline: 0 var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li:first-child {\n justify-content: center;\n width: auto;\n padding-inline: var(--base-size-16) var(--base-size-8);\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark {\n justify-content: center;\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark svg {\n width: var(--base-size-24);\n height: var(--base-size-24);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title {\n padding-inline-end: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title > * {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar .SubdomainNavBar-secondary-nav {\n height: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-trigger {\n flex: 0 0 var(--SubdomainNavBar-mobile-control-size);\n justify-content: center;\n width: var(--SubdomainNavBar-mobile-control-size);\n height: 100%;\n padding-inline: 0;\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-input-button,\n .SubdomainNavBar .SubdomainNavBar-mobile-menu-button {\n box-sizing: border-box;\n display: inline-flex;\n flex: 0 0 var(--SubdomainNavBar-mobile-control-size);\n width: var(--SubdomainNavBar-mobile-control-size);\n flex-direction: column;\n height: 100%;\n padding-inline: var(--base-size-16);\n border-radius: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-mobile-menu-button {\n gap: calc(var(--base-size-4) - var(--brand-borderWidth-thin));\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-button-bar {\n width: var(--base-size-16);\n height: var(--base-size-2);\n margin: 0 auto;\n transform-origin: center;\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform: translateY(calc(var(--base-size-6) - var(--brand-borderWidth-thin))) rotate(45deg);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform: translateY(calc(var(--brand-borderWidth-thin) - var(--base-size-6))) rotate(-45deg);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link {\n padding: var(--base-size-16);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link--title {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area-inner {\n padding-inline: var(--base-size-16);\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar .SubdomainNavBar-inner-container {\n height: 100%;\n max-width: none;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area {\n height: 100%;\n max-width: none;\n gap: 0;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li {\n display: flex;\n align-items: center;\n height: 100%;\n padding-inline: 0 var(--base-size-16);\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li:first-child {\n justify-content: center;\n width: auto;\n padding-inline: var(--base-size-16) var(--base-size-8);\n border-inline-end: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark {\n justify-content: center;\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark svg {\n width: var(--base-size-24);\n height: var(--base-size-24);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title {\n padding-inline-end: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title > * {\n font-size: var(--base-size-16);\n line-height: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav,\n .SubdomainNavBar .SubdomainNavBar-primary-nav-overflow,\n .SubdomainNavBar .SubdomainNavBar-primary-nav-list,\n .SubdomainNavBar .SubdomainNavBar-secondary-nav,\n .SubdomainNavBar .SubdomainNavBar-button-area,\n .SubdomainNavBar .SubdomainNavBar-leading-component,\n .SubdomainNavBar .SubdomainNavBar-trailing-component {\n height: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-leading-component,\n .SubdomainNavBar .SubdomainNavBar-trailing-component {\n padding-inline: var(--base-size-16);\n margin-inline: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-leading-component {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav-list {\n align-items: stretch;\n margin: 0;\n block-size: 100%;\n max-block-size: 100%;\n padding-inline-start: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav-overflow {\n margin: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav-list-item {\n display: flex;\n align-items: center;\n height: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-link {\n align-items: center;\n height: 100%;\n padding: 0 var(--base-size-16);\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link,\n .SubdomainNavBar .SubdomainNavBar-more-link {\n padding-inline: var(--base-size-4);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link > .SubdomainNavBar-link-content {\n gap: var(--base-size-4);\n padding: var(--base-size-4) var(--base-size-12);\n background-color: transparent;\n border-radius: var(--brand-borderRadius-full);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:hover\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:active\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link[aria-current]:not([aria-current='false'])\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link:hover > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link:active > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link[aria-expanded='true'] > .SubdomainNavBar-link-content {\n background-color: var(--brand-SubdomainNavBar-color-link-bgColor);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible,\n .SubdomainNavBar .SubdomainNavBar-more-link:focus-visible {\n outline: none;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link:focus-visible > .SubdomainNavBar-link-content {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n }\n\n .SubdomainNavBar .SubdomainNavBar-link-text::after {\n display: none;\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu {\n animation: fade-in-down-overflow var(--brand-animation-duration-faster);\n animation-timing-function: var(--brand-animation-easing-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n border-end-start-radius: var(--brand-borderRadius-medium);\n border-end-end-radius: var(--brand-borderRadius-medium);\n box-shadow: none;\n min-width: calc(var(--base-size-128) + var(--base-size-32));\n transform: translateY(calc(0px - var(--base-size-4)));\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-list {\n gap: var(--brand-borderWidth-thin);\n padding: var(--base-size-8);\n width: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {\n width: 100%;\n min-height: var(--base-size-40);\n padding: var(--base-size-8) var(--base-size-12);\n color: var(--brand-color-text-muted);\n background-color: var(--brand-color-canvas-default);\n border-radius: var(--brand-borderRadius-medium);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover,\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n }\n\n @media (prefers-reduced-motion: no-preference) {\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link > .SubdomainNavBar-link-content {\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n }\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-trigger {\n height: 100%;\n padding-inline: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-trigger--has-trailing-item {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-button-area {\n align-items: center;\n padding-inline: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-button-area--has-leading-item {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar .SubdomainNavBar-search-trigger {\n --SubdomainNavBar-search-input-width: clamp(\n calc(var(--base-size-128) + var(--base-size-32)),\n 28.5vw,\n calc(var(--base-size-128) * 3 + var(--base-size-36))\n );\n\n align-self: stretch;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .SubdomainNavBar-cta-button--secondary {\n display: inline-flex;\n }\n}\n\n/\n Search dialog control area\n /\n.SubdomainNavBar-search-form {\n display: flex;\n width: 100%;\n}\n\n.SubdomainNavBar-search-input-area {\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n width: 100%;\n}\n\n.SubdomainNavBar-search-close-button {\n cursor: pointer;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n min-block-size: var(--base-size-32);\n padding: var(--base-size-8) var(--base-size-12);\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n border: 0;\n border-radius: var(--brand-borderRadius-medium);\n font-family: var(--brand-body-fontFamily);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-medium);\n line-height: var(--base-size-14);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-close-button:hover {\n background-color: var(--brand-color-canvas-inset);\n}\n\n.SubdomainNavBar-search-close-button:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.SubdomainNavBar-search-dialog-control-area {\n height: var(--base-size-40);\n max-width: none;\n padding: 0;\n margin: 0;\n display: flex;\n align-items: center;\n background: transparent;\n}\n\n.SubdomainNavBar-search-text-input {\n border-color: transparent;\n}\n\n.SubdomainNavBar-search-results-area {\n width: 100%;\n}\n\n.SubdomainNavBar-search-results-container {\n animation: fade-in-down 500ms;\n padding: var(--base-size-24);\n background-color: var(--base-color-scale-white-0);\n border-radius: var(--brand-borderRadius-large);\n box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n max-height: 514px;\n height: 70vh;\n max-width: 570px;\n margin: 0 auto;\n width: 80%;\n}\n\n.SubdomainNavBar-search-results {\n overflow-y: scroll;\n list-style: none;\n padding: 0 var(--base-size-24) 0 0;\n margin: 0;\n height: 90%;\n}\n\n.SubdomainNavBar-search-results-heading {\n display: block;\n font-weight: var(--brand-heading-weight-600);\n font-size: var(--base-size-20);\n line-height: var(--base-size-24);\n margin-bottom: var(--base-size-20);\n padding: 0 var(--base-size-8);\n color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-search-result-group,\n.SubdomainNavBar-search-result-group-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.SubdomainNavBar-search-result-group + .SubdomainNavBar-search-result-group {\n margin-block-start: var(--base-size-24);\n}\n\n.SubdomainNavBar-search-result-group-heading {\n display: block;\n margin: 0 0 var(--base-size-20);\n padding: 0 var(--base-size-8);\n color: var(--brand-color-text-muted);\n font-weight: var(--brand-heading-weight-600);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n}\n\n.SubdomainNavBar-search-result-item {\n padding: var(--base-size-16) var(--base-size-8);\n border-bottom: solid var(--brand-borderWidth-thin, 1px)\n var(--brand-SubdomainNavBar-search-results-border-default, #b7bfc7);\n}\n\n.SubdomainNavBar-search-result-item-container a[aria-selected='true'] {\n outline: var(--brand-color-focus) auto var(--brand-borderWidth-thick);\n}\n\n.SubdomainNavBar-search-result-item-container {\n letter-spacing: var(--brand-heading-letterSpacing-400);\n font-size: var(--brand-text-size-400);\n}\n\n.SubdomainNavBar-search-result-item-container a {\n display: block;\n color: var(--base-color-scale-black-0);\n text-decoration: none;\n margin: 0 0 var(--base-size-12);\n font-size: var(--base-size-16);\n font-weight: var(--brand-heading-weight-400);\n font-family: var(--brand-heading-fontFamily);\n line-height: var(--brand-text-lineHeight-400);\n}\n\n.SubdomainNavBar-search-result-item-container a svg {\n flex: none;\n}\n\n.SubdomainNavBar-search-result-item-container a:hover {\n text-decoration: none;\n}\n\n.SubdomainNavBar-search-result-item-desc {\n color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-search-dialog {\n position: fixed;\n inset-block-start: calc(var(--base-size-64) + var(--base-size-8));\n inset-block-end: auto;\n inset-inline: calc(var(--base-size-64) + var(--base-size-8));\n z-index: 99;\n width: min(\n calc(100vw - ((var(--base-size-64) + var(--base-size-8)) 2)),\n calc((var(--base-size-128) * 6) + var(--base-size-36))\n );\n max-height: calc(100vh - ((var(--base-size-64) + var(--base-size-8)) * 2));\n height: auto;\n margin-inline: auto;\n padding: var(--base-size-16);\n overflow: hidden;\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-large);\n box-shadow: 0 0 calc(var(--base-size-32) + var(--base-size-2)) var(--brand-SubdomainNavBar-searchDialog-shadowColor);\n}\n\n.SubdomainNavBar-search-dialog--has-results {\n padding-block-end: var(--base-size-32);\n}\n\n.SubdomainNavBar-search-dialog::backdrop {\n background-color: var(--brand-SubdomainNavBar-searchDialog-backdropColor);\n -webkit-backdrop-filter: blur(var(--base-size-24));\n backdrop-filter: blur(var(--base-size-24));\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-input-area {\n gap: var(--base-size-16);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-form {\n min-width: 0;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-form section > span:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-text-input {\n color: var(--brand-color-text-default);\n font-size: calc(var(--base-size-16) + var(--base-size-2));\n font-weight: var(--base-text-weight-medium);\n line-height: var(--brand-text-lineHeight-300);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-close-button {\n background-color: var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-area--visible {\n margin-block-start: var(--base-size-24);\n padding-block-start: var(--base-size-24);\n border-block-start: var(--brand-borderWidth-thin) dashed var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-container {\n width: 100%;\n height: auto;\n max-width: none;\n max-height: calc(100vh - (((var(--base-size-64) + var(--base-size-8)) * 2) + var(--base-size-128)));\n padding: 0;\n margin: 0;\n overflow-y: auto;\n background-color: transparent;\n border-radius: 0;\n box-shadow: none;\n animation: none;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results {\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-heading,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-group-heading {\n margin-block-end: var(--base-size-20);\n padding: 0;\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-heading-weight-600);\n line-height: var(--brand-text-lineHeight-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-group + .SubdomainNavBar-search-result-group {\n margin-block-start: var(--base-size-24);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item {\n padding: var(--base-size-16) var(--base-size-4);\n border-block-end: 0;\n border-block-start: var(--brand-borderWidth-thin) dashed var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog\n .SubdomainNavBar-search-result-group-list\n > .SubdomainNavBar-search-result-item:first-child,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results > .SubdomainNavBar-search-result-item:first-child {\n padding-block-start: var(--base-size-12);\n border-block-start: 0;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container {\n font-size: var(--brand-text-size-300);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container a {\n display: flex;\n align-items: center;\n gap: calc(var(--base-size-8) + var(--base-size-2));\n width: 100%;\n margin: 0;\n color: var(--brand-color-text-default);\n font-size: var(--brand-text-size-300);\n font-weight: var(--brand-heading-weight-600);\n line-height: var(--brand-text-lineHeight-300);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container a span {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-desc,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-meta {\n display: none;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar-search-dialog {\n inset-block-start: var(--base-size-16);\n inset-block-end: auto;\n inset-inline: var(--base-size-16);\n width: calc(100vw - (var(--base-size-16) * 2));\n max-height: calc(100vh - (var(--base-size-16) * 2));\n height: auto;\n }\n}\n\n.SubdomainNavBar-skip-to-content {\n position: absolute;\n inset-block-start: calc(var(--SubdomainNavBar-height) / 2);\n inset-inline-start: var(--base-size-16);\n z-index: 100;\n transform: translateY(-50%);\n}\n\n/\n Reusable animations\n /\n@keyframes fade-in-down {\n 0% {\n opacity: 0;\n transform: translateY(-20px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes fade-in-down-overflow {\n 0% {\n opacity: 0;\n transform: translateY(calc(0px - var(--base-size-24)));\n }\n 100% {\n opacity: 1;\n transform: translateY(calc(0px - var(--base-size-4)));\n }\n}\n\n@keyframes fade-out {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes enlarge-shadow {\n 0% {\n scale: 0.98;\n box-shadow: 0px 8px 0 rgba(1, 4, 9, 0.15);\n }\n 100% {\n scale: 1;\n box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n }\n}\n\n@keyframes fade-in-down-staggered {\n 0% {\n opacity: 0;\n transform: scale(0.6) translateY(-8px);\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n/ Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .SubdomainNavBar,\n .SubdomainNavBar::before,\n .SubdomainNavBar::after,\n .SubdomainNavBar {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"SubdomainNavBar.module.js","names":[],"sources":["../../src/SubdomainNavBar/SubdomainNavBar.module.css"],"sourcesContent":["/\n Main styles for the subdomain navigation bar.\n /\n.SubdomainNavBar {\n position: relative;\n z-index: 90;\n font-weight: 550;\n background: var(--brand-color-canvas-default);\n height: var(--SubdomainNavBar-height);\n}\n\n.SubdomainNavBar::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-start: 100%;\n height: var(--brand-borderWidth-thin);\n background-color: var(--brand-color-text-emphasized);\n pointer-events: none;\n}\n\n/\n * Outer container\n /\n.SubdomainNavBar-outer-container {\n --SubdomainNavBar-height: var(--base-size-64);\n\n z-index: 90;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar-outer-container {\n --SubdomainNavBar-height: calc(var(--base-size-64) - var(--base-size-8));\n }\n}\n\n.SubdomainNavBar-outer-container:not(.SubdomainNavBar-outer-container--fixed) {\n position: relative;\n}\n\n.SubdomainNavBar-outer-container--fixed {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n}\n\n/\n * Inner container\n /\n.SubdomainNavBar-inner-container {\n display: flex;\n padding: 4px 28px;\n}\n\n.SubdomainNavBar-inner-container--centered {\n max-width: 1280px;\n margin: 0 auto;\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-inner-container {\n padding: 4px 32px;\n }\n}\n\n.SubdomainNavBar-inner-container--search-open {\n animation: fade-out 150ms;\n}\n\n/\n * Logo and title area\n /\n.SubdomainNavBar-title-area {\n display: inline-flex;\n list-style-type: none;\n align-items: center;\n gap: var(--base-size-8);\n padding: 0;\n margin: 0;\n max-width: 340px;\n color: var(--brand-color-text-default);\n padding: var(--base-size-16) 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-title-area {\n gap: var(--base-size-16);\n }\n}\n\n.SubdomainNavBar-logo-mark,\n.SubdomainNavBar-title {\n display: inline-flex;\n align-items: center;\n color: var(--brand-color-text-default);\n}\n\n.SubdomainNavBar-logo-mark {\n position: relative;\n}\n\n.SubdomainNavBar-back-arrow {\n position: absolute;\n display: flex;\n inset-inline-start: calc(-1 var(--base-size-24) + var(--base-size-4));\n inset-block-start: 50%;\n color: var(--brand-color-text-muted);\n opacity: 0;\n transform: translate(var(--base-size-4), -50%);\n transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast) ease;\n}\n\n.SubdomainNavBar-logo-mark:hover .SubdomainNavBar-back-arrow {\n opacity: 1;\n transform: translate(0, -50%);\n}\n\n.SubdomainNavBar-logo-mark svg {\n width: 32px;\n height: 32px;\n}\n\n.SubdomainNavBar-title {\n line-height: var(--base-size-32);\n text-decoration: none;\n padding-right: var(--base-size-16);\n white-space: nowrap;\n}\n\n.SubdomainNavBar-title:hover {\n text-decoration: none;\n}\n\n.SubdomainNavBar--variant-featured .SubdomainNavBar-title-prefix {\n color: var(--brand-color-text-default);\n}\n\n.SubdomainNavBar-title-label {\n color: inherit;\n}\n\n.SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-area > li:first-child {\n display: flex;\n align-items: center;\n align-self: stretch;\n}\n\n.SubdomainNavBar--variant-default.SubdomainNavBar--has-title .SubdomainNavBar-title-area > li:first-child::after {\n content: '';\n box-sizing: border-box;\n align-self: center;\n flex: none;\n width: var(--brand-borderWidth-thin);\n height: var(--SubdomainNavBar-height);\n margin-inline: var(--base-size-16);\n background-color: var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-leading-component,\n.SubdomainNavBar-trailing-component {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n}\n\n.SubdomainNavBar-leading-component {\n margin-inline-end: var(--base-size-16);\n}\n\n.SubdomainNavBar-trailing-component {\n margin-inline-start: var(--base-size-16);\n}\n\n/\n Primary navigation link area\n /\n.SubdomainNavBar-primary-nav {\n display: inline-flex;\n list-style-type: none;\n align-items: center;\n flex: 1 1 0;\n min-width: 0;\n padding: 0;\n margin: 0;\n}\n\n.SubdomainNavBar-primary-nav-list {\n list-style-type: none;\n}\n\n@media screen and (max-width: 767px) {\n .SubdomainNavBar-primary-nav-list {\n display: none;\n }\n\n .SubdomainNavBar-primary-nav-list--invisible {\n display: none;\n }\n\n .SubdomainNavBar-primary-nav-list--visible {\n display: block;\n margin: 0;\n padding: 0;\n }\n\n .SubdomainNavBar-leading-component,\n .SubdomainNavBar-trailing-component {\n flex: none;\n width: 100%;\n box-sizing: border-box;\n padding-block: var(--base-size-16);\n padding-inline: var(--base-size-16);\n }\n\n .SubdomainNavBar-leading-component {\n margin-inline-end: 0;\n }\n\n .SubdomainNavBar-trailing-component {\n margin-inline-start: 0;\n }\n\n .SubdomainNavBar-menu-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow-y: auto;\n position: absolute;\n top: var(--SubdomainNavBar-height);\n left: 0;\n right: 0;\n z-index: 2;\n background-color: var(--brand-color-canvas-default);\n width: 100%;\n max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n animation: fade-in-down 500ms;\n animation-timing-function: var(--brand-animation-easing-default);\n }\n\n .SubdomainNavBar-menu-wrapper--close {\n display: none;\n }\n\n .SubdomainNavBar-menu-wrapper-footer {\n flex: none;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-primary-nav-overflow {\n display: flex;\n align-items: center;\n flex: 1 1 0;\n min-width: 0;\n margin: 0 var(--base-size-24) 0 0;\n }\n\n .SubdomainNavBar-primary-nav-list {\n display: flex;\n align-items: center;\n flex: 1 1 auto;\n flex-wrap: nowrap;\n min-width: 0;\n block-size: var(--base-size-48);\n max-block-size: var(--base-size-48);\n overflow: hidden;\n padding: 0;\n margin: 0;\n }\n}\n\n.SubdomainNavBar-primary-nav-list-item {\n flex: 0 0 auto;\n white-space: nowrap;\n}\n\n@media screen and (max-width: 767px) {\n .SubdomainNavBar-primary-nav-list-item {\n animation-name: fade-in-down-staggered;\n animation-duration: 500ms;\n animation-delay: calc(var(--animation-order) 80ms);\n animation-fill-mode: both;\n animation-timing-function: var(--brand-animation-easing-default);\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-primary-nav-list-item--overflowed {\n visibility: hidden;\n pointer-events: none;\n }\n\n .SubdomainNavBar-primary-nav-list-item--overflow {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n position: absolute;\n inset-inline-end: 0;\n visibility: hidden;\n pointer-events: none;\n }\n\n .SubdomainNavBar-primary-nav-overflow--has-overflow .SubdomainNavBar-primary-nav-list-item--overflow {\n position: relative;\n visibility: visible;\n pointer-events: auto;\n }\n}\n\n.SubdomainNavBar-link {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--base-size-8);\n color: var(--brand-color-text-default);\n font-family: var(--brand-heading-fontFamily);\n font-weight: var(--base-text-weight-normal);\n font-size: var(--base-size-20);\n line-height: var(--base-size-20);\n padding: var(--base-size-8) var(--base-size-16) var(--base-size-16) var(--base-size-28);\n text-decoration: none;\n}\n\n.SubdomainNavBar-link:hover {\n text-decoration: none;\n}\n\n.SubdomainNavBar-link-text {\n position: relative;\n}\n\n.SubdomainNavBar-link-content {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-8);\n}\n\n@media screen and (max-width: 767px) {\n .SubdomainNavBar-link:first-of-type {\n padding-top: var(--base-size-24);\n }\n\n .SubdomainNavBar-link--title {\n font-weight: var(--base-text-weight-medium);\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-link {\n font-family: var(--brand-heading-fontFamily);\n font-weight: var(--base-text-weight-normal);\n font-size: var(--base-size-16);\n line-height: var(--base-size-16);\n padding: var(--base-size-16) var(--base-size-16);\n }\n\n .SubdomainNavBar-link-text::after {\n content: '';\n position: absolute;\n bottom: -6px;\n left: 0;\n width: 100%;\n height: 2px;\n background-color: var(--brand-SubdomainNavBar-border-nav-default);\n opacity: 0;\n transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);\n transform: scale(0);\n transform-origin: center;\n }\n\n .SubdomainNavBar-link:hover .SubdomainNavBar-link-text::after,\n .SubdomainNavBar-link:focus .SubdomainNavBar-link-text::after {\n opacity: 1;\n transform: scale(0.75);\n }\n\n .SubdomainNavBar-link:active .SubdomainNavBar-link-text::after {\n background-color: var(--brand-SubdomainNavBar-border-nav-pressed);\n transform: scale(0.75);\n }\n\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {\n transition: background-color var(--brand-animation-easing-default) 250ms;\n background-color: var(--brand-SubdomainNavBar-canvas-overflow-default);\n color: var(--brand-SubdomainNavBar-fg-overflow-default);\n }\n\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link .SubdomainNavBar-link-text::after {\n display: none;\n }\n\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover {\n background-color: var(--brand-SubdomainNavBar-canvas-overflow-hover);\n }\n\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,\n .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {\n box-shadow: inset 0px 0px 0px 2px var(--brand-color-focus);\n outline: none;\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-link {\n padding: var(--base-size-16) var(--base-size-24);\n }\n}\n\n.SubdomainNavBar-more-link {\n display: none;\n}\n\n.SubdomainNavBar-more-link[aria-expanded='true']:hover::after,\n.SubdomainNavBar-more-link[aria-expanded='true']:focus::after {\n display: none;\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar-more-link {\n cursor: pointer;\n appearance: none;\n border: none;\n background-color: transparent;\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-4);\n }\n}\n\n.SubdomainNavBar-overflow-menu {\n position: absolute;\n z-index: 100;\n right: auto;\n background-color: var(--brand-color-canvas-default);\n border-radius: var(--brand-borderRadius-large);\n animation: fade-in-down 0.25s, enlarge-shadow 250ms forwards;\n animation-timing-function: var(--brand-animation-easing-default);\n box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n overflow: hidden;\n}\n\n.SubdomainNavBar-overflow-menu-list {\n display: grid;\n list-style-type: none;\n padding: 0;\n margin: 0;\n width: max-content;\n}\n\n/\n Toolbar actions area for search and mobile menu\n /\n\n.SubdomainNavBar-secondary-nav {\n display: flex;\n align-items: center;\n flex: 0 1 auto;\n min-width: 0;\n margin-left: auto;\n}\n.SubdomainNavBar-search-trigger {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n min-width: 0;\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-search-trigger {\n --SubdomainNavBar-search-input-width: calc(var(--base-size-128) 2 + var(--base-size-24));\n\n flex: 0 9999 var(--SubdomainNavBar-search-input-width);\n width: var(--SubdomainNavBar-search-input-width);\n max-width: 100%;\n min-width: calc(var(--base-size-128) + var(--base-size-32));\n }\n}\n\n.SubdomainNavBar-menu-button {\n position: relative;\n cursor: pointer;\n appearance: none;\n background-color: transparent;\n border: var(--brand-borderWidth-thick) solid transparent;\n color: var(--brand-color-text-default);\n width: calc(48px - var(--brand-borderWidth-thick));\n height: calc(48px - var(--brand-borderWidth-thick));\n display: flex;\n align-items: center;\n justify-content: center;\n transition: border 250ms var(--brand-animation-easing-default), box-shadow 250ms ease;\n border-radius: var(--brand-borderRadius-medium);\n box-shadow: 0 0 0 2px transparent;\n gap: 0;\n}\n\n.SubdomainNavBar-menu-button svg {\n width: 24px;\n height: 24px;\n}\n\n.SubdomainNavBar-search-input-button {\n cursor: pointer;\n appearance: none;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--base-size-16);\n width: 100%;\n block-size: var(--base-size-32);\n min-block-size: var(--base-size-32);\n padding: var(--base-size-4) var(--base-size-4) var(--base-size-4) calc(var(--base-size-8) + var(--base-size-2));\n overflow: hidden;\n color: var(--brand-color-text-muted);\n background-color: var(--brand-color-canvas-subtle);\n border: 0;\n border-radius: var(--brand-borderRadius-medium);\n font-family: var(--brand-body-fontFamily);\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),\n box-shadow var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.SubdomainNavBar-search-input-button:hover {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thin) var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-input-button:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.SubdomainNavBar-search-input-button:active {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thin) var(--brand-color-border-default);\n}\n\n.SubdomainNavBar-search-input-button-placeholder {\n display: inline-flex;\n align-items: center;\n gap: var(--base-size-8);\n min-width: 0;\n overflow: hidden;\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-normal);\n line-height: 1.2;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.SubdomainNavBar-search-input-button-placeholder svg {\n flex: none;\n}\n\n.SubdomainNavBar-search-input-button-placeholder span {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.SubdomainNavBar-search-input-button-shortcut {\n flex: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n min-width: var(--base-size-24);\n padding-inline: var(--base-size-8);\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-radius: calc(var(--brand-borderRadius-medium) / 2);\n font-family: var(--brand-fontStack-monospace);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-normal);\n line-height: 1.6;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar-search-trigger {\n flex: 0 0 var(--base-size-48);\n justify-content: center;\n width: var(--base-size-48);\n }\n\n .SubdomainNavBar-search-input-button {\n justify-content: center;\n gap: 0;\n width: var(--base-size-32);\n padding: var(--base-size-8);\n background-color: transparent;\n }\n\n .SubdomainNavBar-search-input-button-placeholder {\n gap: 0;\n }\n\n .SubdomainNavBar-search-input-button-placeholder span,\n .SubdomainNavBar-search-input-button-shortcut {\n display: none;\n }\n}\n\n.SubdomainNavBar-menu-button {\n display: inline-flex;\n align-items: center;\n align-self: center;\n}\n\n.SubdomainNavBar-menu-button-icon {\n display: inline-flex;\n flex-direction: column;\n gap: calc(var(--base-size-4) - var(--brand-borderWidth-thin));\n}\n\n.SubdomainNavBar-menu-button-label {\n display: none;\n}\n\n.SubdomainNavBar-menu-button-bar {\n width: 22px;\n height: 2px;\n background-color: var(--brand-color-text-default);\n margin: var(--base-size-4) auto;\n border-radius: var(--brand-borderRadius-large);\n display: block;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .SubdomainNavBar-menu-button-bar {\n transition-timing-function: var(--brand-animation-easing-default);\n transition-duration: 500ms;\n transition-property: opacity, transform;\n }\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform-origin: bottom right;\n}\n\n.SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform-origin: top right;\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform: rotate(-45deg) translateY(-3px);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(2) {\n opacity: 0;\n transform: scale(0);\n}\n\n.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform: rotate(45deg) translateY(3px);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close {\n position: relative;\n z-index: 3;\n background-color: var(--brand-color-canvas-muted);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close:focus-visible {\n outline: none;\n box-shadow: none;\n transition: none;\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close:focus-visible::before {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 2;\n pointer-events: none;\n border: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n}\n\n.SubdomainNavBar-mobile-menu-button.SubdomainNavBar-menu-button--close::after {\n content: '';\n position: absolute;\n z-index: 1;\n inset-inline: 0;\n inset-block-end: calc(var(--brand-borderWidth-thin) * -2);\n height: calc(var(--brand-borderWidth-thin) * 2);\n background-color: var(--brand-color-canvas-muted);\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar-menu-button:hover {\n background-color: transparent;\n border: var(--brand-borderWidth-thick) solid var(--brand-SubdomainNavBar-border-button-hover);\n }\n\n .SubdomainNavBar-menu-button:active {\n background-color: transparent;\n box-shadow: 0 0 0 1px var(--brand-SubdomainNavBar-border-button-hover);\n }\n\n .SubdomainNavBar-mobile-menu-button {\n display: none;\n }\n}\n\n@media screen and (min-width: 48rem) and (max-width: 63.24rem) {\n .SubdomainNavBar-primary-nav {\n display: none;\n }\n\n .SubdomainNavBar-secondary-nav {\n position: relative;\n flex: 0 0 auto;\n align-self: stretch;\n }\n\n .SubdomainNavBar-search-trigger {\n --SubdomainNavBar-tablet-search-width: calc(var(--base-size-128) * 2 + var(--base-size-2));\n\n flex: 0 0 var(--SubdomainNavBar-tablet-search-width);\n width: var(--SubdomainNavBar-tablet-search-width);\n padding-inline: var(--base-size-8);\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar-search-input-button {\n width: 100%;\n }\n\n .SubdomainNavBar-mobile-menu-button {\n align-self: stretch;\n flex: none;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: var(--base-size-8);\n width: max-content;\n min-width: calc(var(--base-size-64) + var(--base-size-32));\n height: 100%;\n padding-inline: var(--base-size-16);\n color: var(--brand-color-text-default);\n border: 0;\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-radius: 0;\n overflow: visible;\n font-family: var(--brand-body-fontFamily);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar-menu-button-label {\n display: inline-flex;\n align-items: center;\n white-space: nowrap;\n }\n\n .SubdomainNavBar-menu-button-icon {\n flex: none;\n align-items: stretch;\n justify-content: center;\n width: var(--base-size-16);\n height: var(--base-size-16);\n overflow: visible;\n }\n\n .SubdomainNavBar-menu-button-icon .SubdomainNavBar-menu-button-bar {\n width: var(--base-size-16);\n height: var(--base-size-2);\n margin: 0;\n transform-origin: center;\n }\n\n .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform: translateY(calc(var(--base-size-6) - var(--brand-borderWidth-thin))) rotate(45deg);\n }\n\n .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform: translateY(calc(var(--brand-borderWidth-thin) - var(--base-size-6))) rotate(-45deg);\n }\n\n .SubdomainNavBar-menu-wrapper {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n overflow-y: auto;\n position: absolute;\n inset-inline: 0;\n top: var(--SubdomainNavBar-height);\n z-index: 2;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n background-color: var(--brand-color-canvas-default);\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n animation: fade-in-down var(--brand-animation-duration-default);\n animation-timing-function: var(--brand-animation-easing-default);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-menu-wrapper {\n inset-inline-start: auto;\n min-width: calc(var(--base-size-128) * 3);\n }\n\n .SubdomainNavBar-menu-wrapper--close {\n display: none;\n }\n\n .SubdomainNavBar-primary-nav-list--visible {\n display: grid;\n gap: var(--brand-borderWidth-thin);\n margin: 0;\n padding: var(--base-size-8) var(--base-size-16);\n }\n\n .SubdomainNavBar-menu-wrapper-footer {\n flex: none;\n display: flex;\n flex-direction: column;\n width: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link {\n box-sizing: border-box;\n width: 100%;\n min-height: var(--base-size-40);\n padding: var(--base-size-8) var(--base-size-12);\n color: var(--brand-color-text-muted);\n background-color: var(--brand-color-canvas-default);\n border-radius: var(--brand-borderRadius-medium);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item) {\n width: 100%;\n height: auto;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link {\n padding: var(--base-size-8) var(--base-size-12);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link\n > .SubdomainNavBar-link-content {\n width: 100%;\n padding: 0;\n background-color: transparent;\n border-radius: 0;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:hover\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:active\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link[aria-current]:not([aria-current='false'])\n > .SubdomainNavBar-link-content {\n background-color: transparent;\n outline: none;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:hover,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:active,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link[aria-current]:not([aria-current='false']) {\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus,\n .SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible {\n box-shadow: inset 0 0 0 var(--brand-borderWidth-thick) var(--brand-color-focus);\n outline: none;\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link--title {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar-menu-wrapper .SubdomainNavBar-leading-component,\n .SubdomainNavBar-menu-wrapper .SubdomainNavBar-trailing-component {\n box-sizing: border-box;\n flex: none;\n width: 100%;\n height: auto;\n margin-inline: 0;\n padding: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area {\n display: flex;\n width: 100%;\n height: auto;\n padding: 0;\n }\n\n .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area-inner {\n box-sizing: border-box;\n flex-direction: column;\n width: 100%;\n margin-block: var(--base-size-24);\n padding-inline: var(--base-size-16);\n }\n}\n\n.SubdomainNavBar .SubdomainNavBar-menu-wrapper-footer--has-leading-item,\n.SubdomainNavBar\n .SubdomainNavBar-menu-wrapper\n .SubdomainNavBar-leading-component\n + .SubdomainNavBar-primary-nav-list--visible,\n.SubdomainNavBar\n .SubdomainNavBar-menu-wrapper-footer\n .SubdomainNavBar-trailing-component\n + .SubdomainNavBar-button-area {\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-button-area {\n display: inline-flex;\n gap: var(--base-size-16);\n align-items: center;\n min-width: 0;\n}\n\n.SubdomainNavBar-button-area-inner {\n display: flex;\n gap: var(--base-size-8);\n min-width: 0;\n}\n\n@media screen and (max-width: 48rem) {\n .SubdomainNavBar-button-area {\n display: none;\n }\n\n .SubdomainNavBar-button-area--visible {\n display: flex;\n left: 0;\n z-index: 99;\n width: 100%;\n height: auto;\n animation-name: fade-in-down-staggered;\n animation-duration: 500ms;\n animation-delay: calc(10 * 80ms);\n animation-fill-mode: both;\n animation-timing-function: var(--brand-animation-easing-default);\n }\n\n .SubdomainNavBar-inner-container--search-open .SubdomainNavBar-button-area--visible {\n display: none;\n }\n\n .SubdomainNavBar-button-area-inner {\n width: 100%;\n box-sizing: border-box;\n flex-direction: column;\n margin-block: var(--base-size-24);\n padding-inline: var(--base-size-24);\n min-width: 0;\n }\n}\n\n.SubdomainNavBar-cta-button {\n white-space: nowrap;\n}\n\n.SubdomainNavBar .SubdomainNavBar-menu-wrapper {\n top: var(--SubdomainNavBar-height);\n height: auto;\n max-height: calc(100vh - var(--SubdomainNavBar-height) - var(--SubdomainNavBar-menu-offset-block-start, 0px));\n}\n\n.SubdomainNavBar-menu-backdrop {\n position: fixed;\n inset-block-start: calc(var(--SubdomainNavBar-height) + var(--SubdomainNavBar-menu-offset-block-start, 0px));\n inset-block-end: 0;\n inset-inline: 0;\n z-index: 1;\n background-color: var(--brand-SubdomainNavBar-searchDialog-backdropColor);\n animation: fade-in var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);\n}\n\n.SubdomainNavBar .SubdomainNavBar-inner-container--search-open {\n animation: none;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar {\n --SubdomainNavBar-mobile-control-size: var(--base-size-48);\n }\n\n .SubdomainNavBar .SubdomainNavBar-inner-container {\n height: 100%;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area {\n height: 100%;\n max-width: none;\n gap: 0;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li {\n display: flex;\n align-items: center;\n height: 100%;\n padding-inline: 0 var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li:first-child {\n justify-content: center;\n width: auto;\n padding-inline: var(--base-size-16) var(--base-size-8);\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark {\n justify-content: center;\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark svg {\n width: var(--base-size-24);\n height: var(--base-size-24);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title {\n padding-inline-end: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title > * {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar .SubdomainNavBar-secondary-nav {\n height: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-trigger {\n flex: 0 0 var(--SubdomainNavBar-mobile-control-size);\n justify-content: center;\n width: var(--SubdomainNavBar-mobile-control-size);\n height: 100%;\n padding-inline: 0;\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-input-button,\n .SubdomainNavBar .SubdomainNavBar-mobile-menu-button {\n box-sizing: border-box;\n display: inline-flex;\n flex: 0 0 var(--SubdomainNavBar-mobile-control-size);\n width: var(--SubdomainNavBar-mobile-control-size);\n flex-direction: column;\n height: 100%;\n padding-inline: var(--base-size-16);\n border-radius: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-mobile-menu-button {\n gap: calc(var(--base-size-4) - var(--brand-borderWidth-thin));\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-button-bar {\n width: var(--base-size-16);\n height: var(--base-size-2);\n margin: 0 auto;\n transform-origin: center;\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {\n transform: translateY(calc(var(--base-size-6) - var(--brand-borderWidth-thin))) rotate(45deg);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {\n transform: translateY(calc(var(--brand-borderWidth-thin) - var(--base-size-6))) rotate(-45deg);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link {\n padding: var(--base-size-16);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-link--title {\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n }\n\n .SubdomainNavBar .SubdomainNavBar-menu-wrapper .SubdomainNavBar-button-area-inner {\n padding-inline: var(--base-size-16);\n }\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar .SubdomainNavBar-inner-container {\n height: 100%;\n max-width: none;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area {\n height: 100%;\n max-width: none;\n gap: 0;\n padding: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li {\n display: flex;\n align-items: center;\n height: 100%;\n padding-inline: 0 var(--base-size-16);\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title-area > li:first-child {\n justify-content: center;\n width: auto;\n padding-inline: var(--base-size-16) var(--base-size-8);\n border-inline-end: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark {\n justify-content: center;\n }\n\n .SubdomainNavBar .SubdomainNavBar-logo-mark svg {\n width: var(--base-size-24);\n height: var(--base-size-24);\n }\n\n .SubdomainNavBar .SubdomainNavBar-title {\n padding-inline-end: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-title > * {\n font-size: var(--base-size-16);\n line-height: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav,\n .SubdomainNavBar .SubdomainNavBar-primary-nav-overflow,\n .SubdomainNavBar .SubdomainNavBar-primary-nav-list,\n .SubdomainNavBar .SubdomainNavBar-secondary-nav,\n .SubdomainNavBar .SubdomainNavBar-button-area,\n .SubdomainNavBar .SubdomainNavBar-leading-component,\n .SubdomainNavBar .SubdomainNavBar-trailing-component {\n height: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-leading-component,\n .SubdomainNavBar .SubdomainNavBar-trailing-component {\n padding-inline: var(--base-size-16);\n margin-inline: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-leading-component {\n border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav-list {\n align-items: stretch;\n margin: 0;\n block-size: 100%;\n max-block-size: 100%;\n padding-inline-start: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav-overflow {\n margin: 0;\n }\n\n .SubdomainNavBar .SubdomainNavBar-primary-nav-list-item {\n display: flex;\n align-items: center;\n height: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-link {\n align-items: center;\n height: 100%;\n padding: 0 var(--base-size-16);\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link,\n .SubdomainNavBar .SubdomainNavBar-more-link {\n padding-inline: var(--base-size-4);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link > .SubdomainNavBar-link-content {\n gap: var(--base-size-4);\n padding: var(--base-size-4) var(--base-size-12);\n background-color: transparent;\n border-radius: var(--brand-borderRadius-full);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:hover\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:active\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link[aria-current]:not([aria-current='false'])\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link:hover > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link:active > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link[aria-expanded='true'] > .SubdomainNavBar-link-content {\n background-color: var(--brand-SubdomainNavBar-color-link-bgColor);\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible,\n .SubdomainNavBar .SubdomainNavBar-more-link:focus-visible {\n outline: none;\n }\n\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link:focus-visible\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link:focus-visible > .SubdomainNavBar-link-content {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n }\n\n .SubdomainNavBar .SubdomainNavBar-link-text::after {\n display: none;\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu {\n animation: fade-in-down-overflow var(--brand-animation-duration-faster);\n animation-timing-function: var(--brand-animation-easing-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n border-end-start-radius: var(--brand-borderRadius-medium);\n border-end-end-radius: var(--brand-borderRadius-medium);\n box-shadow: none;\n min-width: calc(var(--base-size-128) + var(--base-size-32));\n transform: translateY(calc(0px - var(--base-size-4)));\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-list {\n gap: var(--brand-borderWidth-thin);\n padding: var(--base-size-8);\n width: 100%;\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link {\n width: 100%;\n min-height: var(--base-size-40);\n padding: var(--base-size-8) var(--base-size-12);\n color: var(--brand-color-text-muted);\n background-color: var(--brand-color-canvas-default);\n border-radius: var(--brand-borderRadius-medium);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-200);\n }\n\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:hover,\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus,\n .SubdomainNavBar .SubdomainNavBar-overflow-menu-item .SubdomainNavBar-link:focus-visible {\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n }\n\n @media (prefers-reduced-motion: no-preference) {\n .SubdomainNavBar\n .SubdomainNavBar-primary-nav-list-item:not(.SubdomainNavBar-overflow-menu-item)\n > .SubdomainNavBar-link\n > .SubdomainNavBar-link-content,\n .SubdomainNavBar .SubdomainNavBar-more-link > .SubdomainNavBar-link-content {\n transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n }\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-trigger {\n height: 100%;\n padding-inline: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-search-trigger--has-trailing-item {\n border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar .SubdomainNavBar-button-area {\n align-items: center;\n padding-inline: var(--base-size-16);\n }\n\n .SubdomainNavBar .SubdomainNavBar-button-area--has-leading-item {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n@media screen and (min-width: 63.25rem) {\n .SubdomainNavBar .SubdomainNavBar-search-trigger {\n --SubdomainNavBar-search-input-width: clamp(\n calc(var(--base-size-128) + var(--base-size-32)),\n 28.5vw,\n calc(var(--base-size-128) * 3 + var(--base-size-36))\n );\n\n align-self: stretch;\n }\n\n .SubdomainNavBar--variant-default.SubdomainNavBar--has-primary-nav {\n border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n height: calc(var(--SubdomainNavBar-height) + var(--base-size-48));\n }\n\n .SubdomainNavBar--variant-default::after {\n inset-block-start: var(--SubdomainNavBar-height);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-inner-container {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr) auto;\n grid-template-rows: var(--SubdomainNavBar-height);\n }\n\n .SubdomainNavBar--variant-default.SubdomainNavBar--has-primary-nav .SubdomainNavBar-inner-container {\n grid-template-rows: var(--SubdomainNavBar-height) var(--base-size-48);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-title-navigation {\n grid-column: 1;\n grid-row: 1;\n min-width: 0;\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-primary-nav {\n grid-column: 1 / -1;\n grid-row: 2;\n min-width: 0;\n border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-primary-nav-list {\n padding-inline-start: calc(var(--base-size-64) + var(--brand-borderWidth-thin));\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-inner-container > .SubdomainNavBar-leading-component {\n grid-column: 2;\n grid-row: 1;\n justify-self: start;\n border-inline-start: 0;\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-inner-container > .SubdomainNavBar-secondary-nav {\n grid-column: 3;\n grid-row: 1;\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-search-trigger {\n border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);\n }\n}\n\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button {\n justify-content: center;\n gap: 0;\n width: var(--base-size-32);\n padding: var(--base-size-8);\n background-color: transparent;\n}\n\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button-placeholder {\n gap: 0;\n}\n\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button-placeholder-text,\n.SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button-shortcut {\n display: none;\n}\n\n@media screen and (min-width: 48rem) {\n .SubdomainNavBar--variant-default .SubdomainNavBar-search-trigger {\n flex: 0 0 var(--base-size-48);\n width: var(--base-size-48);\n min-width: var(--base-size-48);\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-search-trigger {\n padding-inline: 0;\n }\n\n .SubdomainNavBar--variant-default .SubdomainNavBar-search-input-button {\n width: 100%;\n block-size: 100%;\n padding-inline: var(--base-size-16);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .SubdomainNavBar-cta-button--secondary {\n display: inline-flex;\n }\n}\n\n/\n Search dialog control area\n /\n.SubdomainNavBar-search-form {\n display: flex;\n width: 100%;\n}\n\n.SubdomainNavBar-search-input-area {\n display: flex;\n align-items: center;\n gap: var(--base-size-8);\n width: 100%;\n}\n\n.SubdomainNavBar-search-close-button {\n cursor: pointer;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n min-block-size: var(--base-size-32);\n padding: var(--base-size-8) var(--base-size-12);\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-subtle);\n border: 0;\n border-radius: var(--brand-borderRadius-medium);\n font-family: var(--brand-body-fontFamily);\n font-size: var(--brand-text-size-100);\n font-weight: var(--base-text-weight-medium);\n line-height: var(--base-size-14);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-close-button:hover {\n background-color: var(--brand-color-canvas-inset);\n}\n\n.SubdomainNavBar-search-close-button:focus-visible {\n outline: var(--base-size-4) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.SubdomainNavBar-search-dialog-control-area {\n height: var(--base-size-40);\n max-width: none;\n padding: 0;\n margin: 0;\n display: flex;\n align-items: center;\n background: transparent;\n}\n\n.SubdomainNavBar-search-text-input {\n border-color: transparent;\n}\n\n.SubdomainNavBar-search-results-area {\n width: 100%;\n}\n\n.SubdomainNavBar-search-results-container {\n animation: fade-in-down 500ms;\n padding: var(--base-size-24);\n background-color: var(--base-color-scale-white-0);\n border-radius: var(--brand-borderRadius-large);\n box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n max-height: 514px;\n height: 70vh;\n max-width: 570px;\n margin: 0 auto;\n width: 80%;\n}\n\n.SubdomainNavBar-search-results {\n overflow-y: scroll;\n list-style: none;\n padding: 0 var(--base-size-24) 0 0;\n margin: 0;\n height: 90%;\n}\n\n.SubdomainNavBar-search-results-heading {\n display: block;\n font-weight: var(--brand-heading-weight-600);\n font-size: var(--base-size-20);\n line-height: var(--base-size-24);\n margin-bottom: var(--base-size-20);\n padding: 0 var(--base-size-8);\n color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-search-result-group,\n.SubdomainNavBar-search-result-group-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.SubdomainNavBar-search-result-group + .SubdomainNavBar-search-result-group {\n margin-block-start: var(--base-size-24);\n}\n\n.SubdomainNavBar-search-result-group-heading {\n display: block;\n margin: 0 0 var(--base-size-20);\n padding: 0 var(--base-size-8);\n color: var(--brand-color-text-muted);\n font-weight: var(--brand-heading-weight-600);\n font-size: var(--brand-text-size-100);\n line-height: var(--brand-text-lineHeight-100);\n}\n\n.SubdomainNavBar-search-result-item {\n padding: var(--base-size-16) var(--base-size-8);\n border-bottom: solid var(--brand-borderWidth-thin, 1px)\n var(--brand-SubdomainNavBar-search-results-border-default, #b7bfc7);\n}\n\n.SubdomainNavBar-search-result-item-container a[aria-selected='true'] {\n outline: var(--brand-color-focus) auto var(--brand-borderWidth-thick);\n}\n\n.SubdomainNavBar-search-result-item-container {\n letter-spacing: var(--brand-heading-letterSpacing-400);\n font-size: var(--brand-text-size-400);\n}\n\n.SubdomainNavBar-search-result-item-container a {\n display: block;\n color: var(--base-color-scale-black-0);\n text-decoration: none;\n margin: 0 0 var(--base-size-12);\n font-size: var(--base-size-16);\n font-weight: var(--brand-heading-weight-400);\n font-family: var(--brand-heading-fontFamily);\n line-height: var(--brand-text-lineHeight-400);\n}\n\n.SubdomainNavBar-search-result-item-container a svg {\n flex: none;\n}\n\n.SubdomainNavBar-search-result-item-container a:hover {\n text-decoration: none;\n}\n\n.SubdomainNavBar-search-result-item-desc {\n color: var(--base-color-scale-black-0);\n}\n\n.SubdomainNavBar-search-dialog {\n position: fixed;\n inset-block-start: calc(var(--base-size-64) + var(--base-size-8));\n inset-block-end: auto;\n inset-inline: calc(var(--base-size-64) + var(--base-size-8));\n z-index: 99;\n width: min(\n calc(100vw - ((var(--base-size-64) + var(--base-size-8)) 2)),\n calc((var(--base-size-128) * 6) + var(--base-size-36))\n );\n max-height: calc(100vh - ((var(--base-size-64) + var(--base-size-8)) * 2));\n height: auto;\n margin-inline: auto;\n padding: var(--base-size-16);\n overflow: hidden;\n color: var(--brand-color-text-default);\n background-color: var(--brand-color-canvas-default);\n border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);\n border-radius: var(--brand-borderRadius-large);\n box-shadow: 0 0 calc(var(--base-size-32) + var(--base-size-2)) var(--brand-SubdomainNavBar-searchDialog-shadowColor);\n}\n\n.SubdomainNavBar-search-dialog--has-results {\n padding-block-end: var(--base-size-32);\n}\n\n.SubdomainNavBar-search-dialog::backdrop {\n background-color: var(--brand-SubdomainNavBar-searchDialog-backdropColor);\n -webkit-backdrop-filter: blur(var(--base-size-24));\n backdrop-filter: blur(var(--base-size-24));\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-input-area {\n gap: var(--base-size-16);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-form {\n min-width: 0;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-form section > span:focus-within {\n border-color: transparent;\n box-shadow: none;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-text-input {\n color: var(--brand-color-text-default);\n font-size: calc(var(--base-size-16) + var(--base-size-2));\n font-weight: var(--base-text-weight-medium);\n line-height: var(--brand-text-lineHeight-300);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-close-button {\n background-color: var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-area--visible {\n margin-block-start: var(--base-size-24);\n padding-block-start: var(--base-size-24);\n border-block-start: var(--brand-borderWidth-thin) dashed var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-container {\n width: 100%;\n height: auto;\n max-width: none;\n max-height: calc(100vh - (((var(--base-size-64) + var(--base-size-8)) * 2) + var(--base-size-128)));\n padding: 0;\n margin: 0;\n overflow-y: auto;\n background-color: transparent;\n border-radius: 0;\n box-shadow: none;\n animation: none;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results {\n height: auto;\n padding: 0;\n margin: 0;\n overflow: visible;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results-heading,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-group-heading {\n margin-block-end: var(--base-size-20);\n padding: 0;\n color: var(--brand-color-text-muted);\n font-size: var(--brand-text-size-100);\n font-weight: var(--brand-heading-weight-600);\n line-height: var(--brand-text-lineHeight-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-group + .SubdomainNavBar-search-result-group {\n margin-block-start: var(--base-size-24);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item {\n padding: var(--base-size-16) var(--base-size-4);\n border-block-end: 0;\n border-block-start: var(--brand-borderWidth-thin) dashed var(--brand-color-border-muted);\n}\n\n.SubdomainNavBar-search-dialog\n .SubdomainNavBar-search-result-group-list\n > .SubdomainNavBar-search-result-item:first-child,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-results > .SubdomainNavBar-search-result-item:first-child {\n padding-block-start: var(--base-size-12);\n border-block-start: 0;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container {\n font-size: var(--brand-text-size-300);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container a {\n display: flex;\n align-items: center;\n gap: calc(var(--base-size-8) + var(--base-size-2));\n width: 100%;\n margin: 0;\n color: var(--brand-color-text-default);\n font-size: var(--brand-text-size-300);\n font-weight: var(--brand-heading-weight-600);\n line-height: var(--brand-text-lineHeight-300);\n letter-spacing: var(--brand-text-letterSpacing-100);\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-container a span {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-desc,\n.SubdomainNavBar-search-dialog .SubdomainNavBar-search-result-item-meta {\n display: none;\n}\n\n@media screen and (max-width: 47.99rem) {\n .SubdomainNavBar-search-dialog {\n inset-block-start: var(--base-size-16);\n inset-block-end: auto;\n inset-inline: var(--base-size-16);\n width: calc(100vw - (var(--base-size-16) * 2));\n max-height: calc(100vh - (var(--base-size-16) * 2));\n height: auto;\n }\n}\n\n.SubdomainNavBar-skip-to-content {\n position: absolute;\n inset-block-start: calc(var(--SubdomainNavBar-height) / 2);\n inset-inline-start: var(--base-size-16);\n z-index: 100;\n transform: translateY(-50%);\n}\n\n/\n Reusable animations\n /\n@keyframes fade-in-down {\n 0% {\n opacity: 0;\n transform: translateY(-20px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n\n@keyframes fade-in-down-overflow {\n 0% {\n opacity: 0;\n transform: translateY(calc(0px - var(--base-size-24)));\n }\n 100% {\n opacity: 1;\n transform: translateY(calc(0px - var(--base-size-4)));\n }\n}\n\n@keyframes fade-out {\n 0% {\n opacity: 1;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes enlarge-shadow {\n 0% {\n scale: 0.98;\n box-shadow: 0px 8px 0 rgba(1, 4, 9, 0.15);\n }\n 100% {\n scale: 1;\n box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);\n }\n}\n\n@keyframes fade-in-down-staggered {\n 0% {\n opacity: 0;\n transform: scale(0.6) translateY(-8px);\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n/ Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .SubdomainNavBar,\n .SubdomainNavBar::before,\n .SubdomainNavBar::after,\n .SubdomainNavBar {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}

package/esm/VideoPlayer/VideoPlayer.module-Cb7UilXP.css ADDED Viewed

@@ -0,0 +1 @@

+ .Primer_Brand__VideoPlayer-module__VideoPlayer__container___zr6Iu{border-radius:var(--brand-borderRadius-medium);background-color:var(--base-color-scale-black-0);flex-direction:column;width:100%;display:flex;overflow:hidden}.Primer_Brand__VideoPlayer-module__VideoPlayer__overlayContainer___KADCQ{flex:1;height:100%;position:relative}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__container___zr6Iu{border:var(--brand-borderWidth-thin) solid ButtonBorder}}.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9{--brand-VideoPlayer-controls-min-height:56px;width:100%;max-height:calc(100vh - 56px);max-height:calc(100vh - var(--brand-VideoPlayer-controls-min-height));margin:0 auto;display:block}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--fullscreen___MChxa .Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9{height:100%;position:absolute}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2{font:inherit;z-index:1;background:#0003;border:none;width:100%;height:100%;position:absolute;top:0;left:0}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2 svg{top:calc(var(--brand-VideoPlayer-controls-min-height) / 2);position:relative}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay--transparent___0UmfX{background:0 0}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2:focus-visible{outline:var(--brand-borderWidth-thicker) solid var(--brand-color-focus);outline-offset:var(--base-size-2)}.Primer_Brand__VideoPlayer-module__VideoPlayer__playButton___UmSvY{width:25%;height:25%;max-width:var(--brand-VideoPlayer-playButton-width);max-height:var(--brand-VideoPlayer-playButton-height);opacity:.8;color:var(--brand-videoPlayer-playButton-fgColor-rest)}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__playButton___UmSvY{color:highlight;opacity:1}}.Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_{transition:var(--brand-VideoPlayer-transition);z-index:2;width:100%;padding:var(--base-size-16);color:var(--brand-videoPlayer-title-fgColor);grid-gap:var(--base-size-12);background:var(--brand-videoPlayer-title-bgColor);transition:all var(--brand-animation-duration-fast) var(--brand-animation-easing-default);grid-template-columns:auto auto;justify-content:flex-start;align-items:center;display:grid;position:absolute;top:0;left:0}.Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_.Primer_Brand__VideoPlayer-module__VideoPlayer__title--hidden___t7cGG{opacity:0;visibility:hidden}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_{color:canvastext;background:canvas}}.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___B_mfd{min-height:var(--brand-VideoPlayer-controls-min-height);grid-gap:var(--base-size-16);justify-content:space-between;align-items:center;gap:var(--base-size-16);border-bottom-right-radius:var(--brand-borderRadius-medium);border-bottom-left-radius:var(--brand-borderRadius-medium);width:100%;padding:var(--base-size-12) var(--base-size-16);pointer-events:all;opacity:1;grid-template-columns:1fr;grid-auto-flow:column;display:grid}.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row1___Vz_Zo,.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row2___pzzds{align-items:center;gap:var(--base-size-16);display:flex}@media (width<=34rem){.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___B_mfd{gap:var(--base-size-12);grid-template-rows:auto auto;grid-template-columns:1fr;grid-auto-flow:row}.Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row2___pzzds{justify-self:space-evenly;justify-content:space-evenly;width:100%}}.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___FYZtO:focus,.Primer_Brand__VideoPlayer-module__VideoPlayer__controls___FYZtO:focus-within{bottom:0}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5{font:inherit;cursor:pointer;width:auto;height:var(--base-size-24);box-sizing:content-box;background:0 0;border:none;padding:0;position:relative}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-6);opacity:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5:not(.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4):focus-visible{border-radius:var(--brand-borderRadius-small)}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5 svg{color:var(--brand-videoPlayer-controls-fgColor)}.Primer_Brand__VideoPlayer-module__VideoPlayer__seek___OwcjI{align-items:center;gap:var(--base-size-16);flex:1;display:flex}.Primer_Brand__VideoPlayer-module__VideoPlayer__progressTime___9p6bX{color:var(--brand-videoPlayer-controls-fgColor)}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d .Primer_Brand__VideoPlayer-module__VideoPlayer__totalTime___5JBGC{display:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__progressBar___86Eto{height:var(--base-size-6);flex:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4{border-radius:var(--brand-borderRadius-medium);padding:.125rem var(--base-size-4);border:.125rem solid var(--brand-videoPlayer-closedCaption-borderColor-enabled);background:var(--brand-videoPlayer-closedCaption-bgColor-enabled);position:relative}.Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6{background-color:#0000}.Primer_Brand__VideoPlayer-module__VideoPlayer__ccText___7TAGa{color:var(--brand-videoPlayer-closedCaption-fgColor-enabled);line-height:25px}.Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6 .Primer_Brand__VideoPlayer-module__VideoPlayer__ccText___7TAGa{color:var(--brand-videoPlayer-closedCaption-fgColor-disabled)}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5 svg{color:buttontext}.Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5:focus-visible{outline-color:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4:focus-visible{outline:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4:not(.Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6){background:highlight;border-color:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4:not(.Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6) .Primer_Brand__VideoPlayer-module__VideoPlayer__ccText___7TAGa{color:highlighttext;background-color:highlight}}.Primer_Brand__VideoPlayer-module__VideoPlayer__range___h4_en{width:100%;min-width:var(--brand-VideoPlayer-range-minWidth);height:var(--brand-VideoPlayer-range-height);background-color:var(--brand-videoPlayer-range-bgColor-default);border-radius:var(--brand-VideoPlayer-range-borderRadius);position:relative}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ{font:inherit;appearance:none;z-index:1;width:100%;height:var(--brand-VideoPlayer-range-height);cursor:pointer;opacity:0;background:0 0;margin:0;display:block;position:absolute;top:0;left:0}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ:focus-visible{outline:var(--brand-borderWidth-thick) solid var(--brand-color-focus);outline-offset:var(--base-size-8);border-radius:var(--brand-borderRadius-small);opacity:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__range___h4_en:hover .Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ{opacity:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ::-moz-range-track{background:0 0;border:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ::-webkit-slider-runnable-track{background:0 0;border:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr{appearance:none;border-radius:var(--brand-VideoPlayer-range-borderRadius);width:100%;height:var(--brand-VideoPlayer-range-height);border:0;position:absolute;top:0;left:0;overflow:hidden}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-webkit-progress-bar{background-color:var(--brand-videoPlayer-range-bgColor-default)}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-webkit-progress-value{background-color:var(--brand-videoPlayer-range-bgColor-progress)}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-moz-progress-bar{background:var(--brand-videoPlayer-range-bgColor-progress)}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-ms-fill-lower{background-color:var(--brand-videoPlayer-range-bgColor-progress);border:none}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-ms-fill-upper{background-color:var(--brand-videoPlayer-range-bgColor-default);border:none}@media (forced-colors:active){.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-webkit-progress-bar{background-color:fieldtext}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-webkit-progress-value{background-color:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-moz-progress-bar{background:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-ms-fill-lower{background-color:highlight}.Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr::-ms-fill-upper{background-color:fieldtext}}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___QrVwV{z-index:2;width:var(--base-size-8);height:var(--base-size-8);margin-bottom:var(--base-size-16);opacity:0;position:absolute;bottom:100%;left:50%;transform:translate(-50%,50%)}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___QrVwV:before{bottom:calc(var(--base-size-4) * -1);width:var(--base-size-12);height:var(--base-size-12);content:"";background:var(--base-color-scale-white-0);border-radius:var(--brand-borderRadius-small);position:absolute;left:0;transform:rotate(45deg)}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipContent___IOBAO{z-index:-1;box-shadow:0 var(--base-size-4) var(--base-size-4) #1b1f2433;padding:var(--brand-VideoPlayer-tooltip-padding-block) var(--brand-VideoPlayer-tooltip-padding-inline);border-radius:var(--brand-borderRadius-medium);background:#fff;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipText___SPfNc{color:var(--base-color-scale-gray-9)}.Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip-visible___nqoFm{opacity:1}.Primer_Brand__VideoPlayer-module__VideoPlayer__controlTextColor___Ih3yg{color:var(--base-color-scale-white-0)}.Primer_Brand__VideoPlayer-module__VideoPlayer__seekTime___Wb0Ol{white-space:nowrap}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d .Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_ span{font-weight:var(--brand-text-weight-300);font-size:var(--brand-text-size-300);line-height:var(--brand-text-lineHeight-300);letter-spacing:var(--brand-text-letterSpacing-300)}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d .Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_ svg{width:var(--base-size-24);height:var(--base-size-24)}.Primer_Brand__VideoPlayer-module__VideoPlayer__container--small___aQE4d .Primer_Brand__VideoPlayer-module__VideoPlayer__controls___FYZtO{position:initial;position:static}@media (prefers-reduced-motion:reduce){.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9,.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9:before,.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9:after,.Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9 *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

package/esm/VideoPlayer/VideoPlayer.module.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './VideoPlayer.module-BpVcE2WB.css';//#region src/VideoPlayer/VideoPlayer.module.css
+import './VideoPlayer.module-Cb7UilXP.css';//#region src/VideoPlayer/VideoPlayer.module.css
 var e = "Primer_Brand__VideoPlayer-module__VideoPlayer__container___zr6Iu", t = "Primer_Brand__VideoPlayer-module__VideoPlayer__overlayContainer___KADCQ", n = "Primer_Brand__VideoPlayer-module__VideoPlayer___GJSo9", r = "Primer_Brand__VideoPlayer-module__VideoPlayer__playButtonOverlay___uXPU2", i = "Primer_Brand__VideoPlayer-module__VideoPlayer__playButton___UmSvY", a = "Primer_Brand__VideoPlayer-module__VideoPlayer__title___3e5F_", o = "Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar___B_mfd", s = "Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row1___Vz_Zo", c = "Primer_Brand__VideoPlayer-module__VideoPlayer__controlsBar__row2___pzzds", l = "Primer_Brand__VideoPlayer-module__VideoPlayer__controls___FYZtO", u = "Primer_Brand__VideoPlayer-module__VideoPlayer__iconControl____tvm5", d = "Primer_Brand__VideoPlayer-module__VideoPlayer__closedCaption___ODIq4", f = "Primer_Brand__VideoPlayer-module__VideoPlayer__seek___OwcjI", p = "Primer_Brand__VideoPlayer-module__VideoPlayer__progressTime___9p6bX", m = "Primer_Brand__VideoPlayer-module__VideoPlayer__totalTime___5JBGC", h = "Primer_Brand__VideoPlayer-module__VideoPlayer__progressBar___86Eto", g = "Primer_Brand__VideoPlayer-module__VideoPlayer__ccOff___NHsg6", _ = "Primer_Brand__VideoPlayer-module__VideoPlayer__ccText___7TAGa", v = "Primer_Brand__VideoPlayer-module__VideoPlayer__range___h4_en", y = "Primer_Brand__VideoPlayer-module__VideoPlayer__rangeInput___ma_RQ", b = "Primer_Brand__VideoPlayer-module__VideoPlayer__rangeProgress___t_oOr", x = "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltip___QrVwV", S = "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipContent___IOBAO", C = "Primer_Brand__VideoPlayer-module__VideoPlayer__tooltipText___SPfNc", w = "Primer_Brand__VideoPlayer-module__VideoPlayer__controlTextColor___Ih3yg", T = "Primer_Brand__VideoPlayer-module__VideoPlayer__seekTime___Wb0Ol", E = {
 	VideoPlayer__container: e,
 	VideoPlayer__overlayContainer: t,

package/esm/VideoPlayer/VideoPlayer.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VideoPlayer.module.js","names":[],"sources":["../../src/VideoPlayer/VideoPlayer.module.css"],"sourcesContent":["/* ---------------------------------------------------------- /\n/ VideoPlayer Contents /\n/ ---------------------------------------------------------- /\n/ Table of contents: /\n/ 1. Container /\n/ 2. Player /\n/ 2. Center Play Button /\n/ 4. Title /\n/ 5. Controls /\n/ 6. Range Element /\n/ 7. Tooltip /\n/ 8. Captions /\n/ ---------------------------------------------------------- /\n\n/ ---------------------------------------------------------- /\n/ 1. Container /\n/ ---------------------------------------------------------- /\n\n.VideoPlayer__container {\n width: 100%;\n border-radius: var(--brand-borderRadius-medium);\n overflow: hidden;\n background-color: var(--base-color-scale-black-0);\n display: flex;\n flex-direction: column;\n}\n\n.VideoPlayer__overlayContainer {\n flex: 1;\n position: relative;\n height: 100%;\n}\n\n@media (forced-colors: active) {\n .VideoPlayer__container {\n border: var(--brand-borderWidth-thin) solid ButtonBorder;\n }\n}\n\n/ ---------------------------------------------------------- /\n/ 2. Player /\n/ ---------------------------------------------------------- /\n\n.VideoPlayer {\n / Private variable used for internal calculations /\n --brand-VideoPlayer-controls-min-height: 56px;\n width: 100%;\n max-height: calc(100vh - var(--brand-VideoPlayer-controls-min-height));\n margin: 0 auto;\n display: block;\n}\n\n.VideoPlayer__container--fullscreen .VideoPlayer {\n position: absolute;\n height: 100%;\n}\n\n/ ---------------------------------------------------------- /\n/ 3. Center Play Button /\n/ ---------------------------------------------------------- /\n\n.VideoPlayer__playButtonOverlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #00000033; / TODO Use a token for this once v8 migration has been completed /\n border: none;\n z-index: 1;\n}\n\n.VideoPlayer__playButtonOverlay svg {\n position: relative;\n top: calc(var(--brand-VideoPlayer-controls-min-height) / 2);\n}\n\n.VideoPlayer__playButtonOverlay.VideoPlayer__playButtonOverlay--transparent {\n background: transparent;\n}\n\n.VideoPlayer__playButtonOverlay:focus-visible {\n outline: var(--brand-borderWidth-thicker) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.VideoPlayer__playButton {\n width: 25%;\n height: 25%;\n max-width: var(--brand-VideoPlayer-playButton-width);\n max-height: var(--brand-VideoPlayer-playButton-height);\n opacity: 0.8;\n color: var(--brand-videoPlayer-playButton-fgColor-rest);\n}\n\n@media (forced-colors: active) {\n .VideoPlayer__playButton {\n color: Highlight;\n opacity: 1;\n }\n}\n\n/ ---------------------------------------------------------- /\n/ 4. Title /\n/ ---------------------------------------------------------- /\n\n.VideoPlayer__title {\n transition: var(--brand-VideoPlayer-transition);\n top: 0;\n position: absolute;\n left: 0;\n width: 100%;\n z-index: 2;\n padding: var(--base-size-16);\n color: var(--brand-videoPlayer-title-fgColor);\n display: grid;\n align-items: center;\n justify-content: flex-start;\n grid-gap: var(--base-size-12);\n grid-template-columns: auto auto;\n background: var(--brand-videoPlayer-title-bgColor);\n transition: all var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.VideoPlayer__title.VideoPlayer__title--hidden {\n opacity: 0;\n visibility: hidden;\n}\n\n@media (forced-colors: active) {\n .VideoPlayer__title {\n background: Canvas;\n color: CanvasText;\n }\n}\n\n/ ---------------------------------------------------------- /\n/ 5. Controls /\n/ ---------------------------------------------------------- /\n\n.VideoPlayer__controlsBar {\n min-height: var(--brand-VideoPlayer-controls-min-height);\n display: grid;\n grid-template-columns: 1fr;\n grid-auto-flow: column;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-16);\n border-bottom-right-radius: var(--brand-borderRadius-medium);\n border-bottom-left-radius: var(--brand-borderRadius-medium);\n width: 100%;\n padding: var(--base-size-12) var(--base-size-16);\n pointer-events: all;\n opacity: 1;\n}\n\n.VideoPlayer__controlsBar__row1,\n.VideoPlayer__controlsBar__row2 {\n display: flex;\n align-items: center;\n gap: var(--base-size-16);\n}\n\n@media (max-width: 34rem) {\n .VideoPlayer__controlsBar {\n grid-template-columns: 1fr;\n grid-auto-flow: row;\n grid-template-rows: auto auto;\n gap: var(--base-size-12);\n }\n\n .VideoPlayer__controlsBar__row2 {\n justify-self: space-evenly;\n justify-content: space-evenly;\n width: 100%;\n }\n}\n\n.VideoPlayer__controls:focus,\n.VideoPlayer__controls:focus-within {\n bottom: 0;\n}\n\n.VideoPlayer__iconControl {\n width: auto;\n background: none;\n border: none;\n cursor: pointer;\n height: var(--base-size-24);\n box-sizing: content-box;\n position: relative;\n padding: 0;\n}\n\n.VideoPlayer__iconControl:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-6);\n opacity: 1;\n}\n\n.VideoPlayer__iconControl:not(.VideoPlayer__closedCaption):focus-visible {\n border-radius: var(--brand-borderRadius-small);\n}\n\n.VideoPlayer__iconControl svg {\n color: var(--brand-videoPlayer-controls-fgColor);\n}\n\n.VideoPlayer__seek {\n flex: 1;\n display: flex;\n align-items: center;\n gap: var(--base-size-16);\n}\n\n.VideoPlayer__progressTime {\n color: var(--brand-videoPlayer-controls-fgColor);\n}\n\n.VideoPlayer__container--small .VideoPlayer__totalTime {\n display: none;\n}\n\n.VideoPlayer__progressBar {\n flex: 1;\n height: var(--base-size-6);\n}\n\n.VideoPlayer__closedCaption {\n border-radius: var(--brand-borderRadius-medium);\n padding: 0.125rem var(--base-size-4);\n border: 0.125rem solid var(--brand-videoPlayer-closedCaption-borderColor-enabled);\n background: var(--brand-videoPlayer-closedCaption-bgColor-enabled);\n position: relative;\n}\n\n.VideoPlayer__ccOff {\n background-color: transparent;\n}\n\n.VideoPlayer__ccText {\n color: var(--brand-videoPlayer-closedCaption-fgColor-enabled);\n line-height: 25px; / visual alignment /\n}\n\n.VideoPlayer__ccOff .VideoPlayer__ccText {\n color: var(--brand-videoPlayer-closedCaption-fgColor-disabled);\n}\n\n@media (forced-colors: active) {\n .VideoPlayer__iconControl svg {\n color: ButtonText;\n }\n\n .VideoPlayer__iconControl:focus-visible {\n outline-color: Highlight;\n }\n\n .VideoPlayer__closedCaption:focus-visible {\n outline: none;\n }\n\n .VideoPlayer__closedCaption:not(.VideoPlayer__ccOff) {\n background: Highlight;\n border-color: Highlight;\n }\n\n .VideoPlayer__closedCaption:not(.VideoPlayer__ccOff) .VideoPlayer__ccText {\n background-color: Highlight;\n color: HighlightText;\n }\n}\n\n/ ---------------------------------------------------------- /\n/ 6. Range Element /\n/ ---------------------------------------------------------- /\n.VideoPlayer__range {\n position: relative;\n width: 100%;\n min-width: var(--brand-VideoPlayer-range-minWidth);\n height: var(--brand-VideoPlayer-range-height);\n background-color: var(--brand-videoPlayer-range-bgColor-default);\n border-radius: var(--brand-VideoPlayer-range-borderRadius);\n}\n\n.VideoPlayer__rangeInput {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n z-index: 1;\n display: block;\n width: 100%;\n height: var(--brand-VideoPlayer-range-height);\n margin: 0;\n cursor: pointer;\n background: transparent;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n}\n\n.VideoPlayer__rangeInput:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-8);\n border-radius: var(--brand-borderRadius-small);\n opacity: 1;\n}\n\n.VideoPlayer__range:hover .VideoPlayer__rangeInput {\n opacity: 1;\n}\n\n.VideoPlayer__rangeInput::-moz-range-track,\n.VideoPlayer__rangeInput::-webkit-slider-runnable-track {\n background: transparent;\n border: none;\n}\n\n.VideoPlayer__rangeProgress {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n overflow: hidden;\n border: 0;\n border-radius: var(--brand-VideoPlayer-range-borderRadius);\n width: 100%;\n position: absolute;\n height: var(--brand-VideoPlayer-range-height);\n top: 0;\n left: 0;\n}\n\n.VideoPlayer__rangeProgress::-webkit-progress-bar {\n background-color: var(--brand-videoPlayer-range-bgColor-default);\n}\n\n.VideoPlayer__rangeProgress::-webkit-progress-value {\n background-color: var(--brand-videoPlayer-range-bgColor-progress);\n}\n\n.VideoPlayer__rangeProgress::-moz-progress-bar {\n background: var(--brand-videoPlayer-range-bgColor-progress);\n}\n\n.VideoPlayer__rangeProgress::-ms-fill-lower {\n background-color: var(--brand-videoPlayer-range-bgColor-progress);\n border: none;\n}\n\n.VideoPlayer__rangeProgress::-ms-fill-upper {\n background-color: var(--brand-videoPlayer-range-bgColor-default);\n border: none;\n}\n\n@media (forced-colors: active) {\n .VideoPlayer__rangeProgress::-webkit-progress-bar {\n background-color: FieldText;\n }\n\n .VideoPlayer__rangeProgress::-webkit-progress-value {\n background-color: Highlight;\n }\n\n .VideoPlayer__rangeProgress::-moz-progress-bar {\n background: Highlight;\n }\n\n .VideoPlayer__rangeProgress::-ms-fill-lower {\n background-color: Highlight;\n }\n\n .VideoPlayer__rangeProgress::-ms-fill-upper {\n background-color: FieldText;\n }\n}\n\n/ ---------------------------------------------------------- /\n/ 7. Tooltip /\n/ ---------------------------------------------------------- /\n\n.VideoPlayer__tooltip {\n position: absolute;\n left: 50%;\n bottom: 100%;\n z-index: 2;\n width: var(--base-size-8);\n height: var(--base-size-8);\n margin-bottom: var(--base-size-16);\n opacity: 0;\n transform: translate(-50%, 50%);\n}\n\n.VideoPlayer__tooltip::before {\n position: absolute;\n bottom: calc(var(--base-size-4) -1);\n left: 0;\n width: var(--base-size-12);\n height: var(--base-size-12);\n content: '';\n background: var(--base-color-scale-white-0);\n border-radius: var(--brand-borderRadius-small);\n transform: rotate(45deg);\n}\n\n.VideoPlayer__tooltipContent {\n position: absolute;\n bottom: 0;\n left: 50%;\n z-index: -1;\n background: white;\n box-shadow: 0 var(--base-size-4) var(--base-size-4) #1b1f2433;\n transform: translate3d(-50%, 0, 0);\n padding: var(--brand-VideoPlayer-tooltip-padding-block) var(--brand-VideoPlayer-tooltip-padding-inline);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.VideoPlayer__tooltipText {\n color: var(--base-color-scale-gray-9);\n}\n\n.VideoPlayer__tooltip-visible {\n opacity: 1;\n}\n\n.VideoPlayer__controlTextColor {\n color: var(--base-color-scale-white-0);\n}\n\n.VideoPlayer__seekTime {\n white-space: nowrap;\n}\n\n.VideoPlayer__container--small .VideoPlayer__title span {\n font-weight: var(--brand-text-weight-300);\n font-size: var(--brand-text-size-300);\n line-height: var(--brand-text-lineHeight-300);\n letter-spacing: var(--brand-text-letterSpacing-300);\n}\n\n.VideoPlayer__container--small .VideoPlayer__title svg {\n width: var(--base-size-24);\n height: var(--base-size-24);\n}\n\n.VideoPlayer__container--small .VideoPlayer__controls {\n position: initial;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .VideoPlayer,\n .VideoPlayer::before,\n .VideoPlayer::after,\n .VideoPlayer {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"VideoPlayer.module.js","names":[],"sources":["../../src/VideoPlayer/VideoPlayer.module.css"],"sourcesContent":["/* ---------------------------------------------------------- /\n/ VideoPlayer Contents /\n/ ---------------------------------------------------------- /\n/ Table of contents: /\n/ 1. Container /\n/ 2. Player /\n/ 2. Center Play Button /\n/ 4. Title /\n/ 5. Controls /\n/ 6. Range Element /\n/ 7. Tooltip /\n/ 8. Captions /\n/ ---------------------------------------------------------- /\n\n/ ---------------------------------------------------------- /\n/ 1. Container /\n/ ---------------------------------------------------------- /\n\n.VideoPlayer__container {\n width: 100%;\n border-radius: var(--brand-borderRadius-medium);\n overflow: hidden;\n background-color: var(--base-color-scale-black-0);\n display: flex;\n flex-direction: column;\n}\n\n.VideoPlayer__overlayContainer {\n flex: 1;\n position: relative;\n height: 100%;\n}\n\n@media (forced-colors: active) {\n .VideoPlayer__container {\n border: var(--brand-borderWidth-thin) solid ButtonBorder;\n }\n}\n\n/ ---------------------------------------------------------- /\n/ 2. Player /\n/ ---------------------------------------------------------- /\n\n.VideoPlayer {\n / Private variable used for internal calculations /\n --brand-VideoPlayer-controls-min-height: 56px;\n width: 100%;\n max-height: calc(100vh - var(--brand-VideoPlayer-controls-min-height));\n margin: 0 auto;\n display: block;\n}\n\n.VideoPlayer__container--fullscreen .VideoPlayer {\n position: absolute;\n height: 100%;\n}\n\n/ ---------------------------------------------------------- /\n/ 3. Center Play Button /\n/ ---------------------------------------------------------- /\n\n.VideoPlayer__playButtonOverlay {\n font: inherit;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: #00000033; / TODO Use a token for this once v8 migration has been completed /\n border: none;\n z-index: 1;\n}\n\n.VideoPlayer__playButtonOverlay svg {\n position: relative;\n top: calc(var(--brand-VideoPlayer-controls-min-height) / 2);\n}\n\n.VideoPlayer__playButtonOverlay.VideoPlayer__playButtonOverlay--transparent {\n background: transparent;\n}\n\n.VideoPlayer__playButtonOverlay:focus-visible {\n outline: var(--brand-borderWidth-thicker) solid var(--brand-color-focus);\n outline-offset: var(--base-size-2);\n}\n\n.VideoPlayer__playButton {\n width: 25%;\n height: 25%;\n max-width: var(--brand-VideoPlayer-playButton-width);\n max-height: var(--brand-VideoPlayer-playButton-height);\n opacity: 0.8;\n color: var(--brand-videoPlayer-playButton-fgColor-rest);\n}\n\n@media (forced-colors: active) {\n .VideoPlayer__playButton {\n color: Highlight;\n opacity: 1;\n }\n}\n\n/ ---------------------------------------------------------- /\n/ 4. Title /\n/ ---------------------------------------------------------- /\n\n.VideoPlayer__title {\n transition: var(--brand-VideoPlayer-transition);\n top: 0;\n position: absolute;\n left: 0;\n width: 100%;\n z-index: 2;\n padding: var(--base-size-16);\n color: var(--brand-videoPlayer-title-fgColor);\n display: grid;\n align-items: center;\n justify-content: flex-start;\n grid-gap: var(--base-size-12);\n grid-template-columns: auto auto;\n background: var(--brand-videoPlayer-title-bgColor);\n transition: all var(--brand-animation-duration-fast) var(--brand-animation-easing-default);\n}\n\n.VideoPlayer__title.VideoPlayer__title--hidden {\n opacity: 0;\n visibility: hidden;\n}\n\n@media (forced-colors: active) {\n .VideoPlayer__title {\n background: Canvas;\n color: CanvasText;\n }\n}\n\n/ ---------------------------------------------------------- /\n/ 5. Controls /\n/ ---------------------------------------------------------- /\n\n.VideoPlayer__controlsBar {\n min-height: var(--brand-VideoPlayer-controls-min-height);\n display: grid;\n grid-template-columns: 1fr;\n grid-auto-flow: column;\n justify-content: space-between;\n align-items: center;\n gap: var(--base-size-16);\n border-bottom-right-radius: var(--brand-borderRadius-medium);\n border-bottom-left-radius: var(--brand-borderRadius-medium);\n width: 100%;\n padding: var(--base-size-12) var(--base-size-16);\n pointer-events: all;\n opacity: 1;\n}\n\n.VideoPlayer__controlsBar__row1,\n.VideoPlayer__controlsBar__row2 {\n display: flex;\n align-items: center;\n gap: var(--base-size-16);\n}\n\n@media (max-width: 34rem) {\n .VideoPlayer__controlsBar {\n grid-template-columns: 1fr;\n grid-auto-flow: row;\n grid-template-rows: auto auto;\n gap: var(--base-size-12);\n }\n\n .VideoPlayer__controlsBar__row2 {\n justify-self: space-evenly;\n justify-content: space-evenly;\n width: 100%;\n }\n}\n\n.VideoPlayer__controls:focus,\n.VideoPlayer__controls:focus-within {\n bottom: 0;\n}\n\n.VideoPlayer__iconControl {\n font: inherit;\n width: auto;\n background: none;\n border: none;\n cursor: pointer;\n height: var(--base-size-24);\n box-sizing: content-box;\n position: relative;\n padding: 0;\n}\n\n.VideoPlayer__iconControl:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-6);\n opacity: 1;\n}\n\n.VideoPlayer__iconControl:not(.VideoPlayer__closedCaption):focus-visible {\n border-radius: var(--brand-borderRadius-small);\n}\n\n.VideoPlayer__iconControl svg {\n color: var(--brand-videoPlayer-controls-fgColor);\n}\n\n.VideoPlayer__seek {\n flex: 1;\n display: flex;\n align-items: center;\n gap: var(--base-size-16);\n}\n\n.VideoPlayer__progressTime {\n color: var(--brand-videoPlayer-controls-fgColor);\n}\n\n.VideoPlayer__container--small .VideoPlayer__totalTime {\n display: none;\n}\n\n.VideoPlayer__progressBar {\n flex: 1;\n height: var(--base-size-6);\n}\n\n.VideoPlayer__closedCaption {\n border-radius: var(--brand-borderRadius-medium);\n padding: 0.125rem var(--base-size-4);\n border: 0.125rem solid var(--brand-videoPlayer-closedCaption-borderColor-enabled);\n background: var(--brand-videoPlayer-closedCaption-bgColor-enabled);\n position: relative;\n}\n\n.VideoPlayer__ccOff {\n background-color: transparent;\n}\n\n.VideoPlayer__ccText {\n color: var(--brand-videoPlayer-closedCaption-fgColor-enabled);\n line-height: 25px; / visual alignment /\n}\n\n.VideoPlayer__ccOff .VideoPlayer__ccText {\n color: var(--brand-videoPlayer-closedCaption-fgColor-disabled);\n}\n\n@media (forced-colors: active) {\n .VideoPlayer__iconControl svg {\n color: ButtonText;\n }\n\n .VideoPlayer__iconControl:focus-visible {\n outline-color: Highlight;\n }\n\n .VideoPlayer__closedCaption:focus-visible {\n outline: none;\n }\n\n .VideoPlayer__closedCaption:not(.VideoPlayer__ccOff) {\n background: Highlight;\n border-color: Highlight;\n }\n\n .VideoPlayer__closedCaption:not(.VideoPlayer__ccOff) .VideoPlayer__ccText {\n background-color: Highlight;\n color: HighlightText;\n }\n}\n\n/ ---------------------------------------------------------- /\n/ 6. Range Element /\n/ ---------------------------------------------------------- /\n.VideoPlayer__range {\n position: relative;\n width: 100%;\n min-width: var(--brand-VideoPlayer-range-minWidth);\n height: var(--brand-VideoPlayer-range-height);\n background-color: var(--brand-videoPlayer-range-bgColor-default);\n border-radius: var(--brand-VideoPlayer-range-borderRadius);\n}\n\n.VideoPlayer__rangeInput {\n font: inherit;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n z-index: 1;\n display: block;\n width: 100%;\n height: var(--brand-VideoPlayer-range-height);\n margin: 0;\n cursor: pointer;\n background: transparent;\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n}\n\n.VideoPlayer__rangeInput:focus-visible {\n outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);\n outline-offset: var(--base-size-8);\n border-radius: var(--brand-borderRadius-small);\n opacity: 1;\n}\n\n.VideoPlayer__range:hover .VideoPlayer__rangeInput {\n opacity: 1;\n}\n\n.VideoPlayer__rangeInput::-moz-range-track,\n.VideoPlayer__rangeInput::-webkit-slider-runnable-track {\n background: transparent;\n border: none;\n}\n\n.VideoPlayer__rangeProgress {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n overflow: hidden;\n border: 0;\n border-radius: var(--brand-VideoPlayer-range-borderRadius);\n width: 100%;\n position: absolute;\n height: var(--brand-VideoPlayer-range-height);\n top: 0;\n left: 0;\n}\n\n.VideoPlayer__rangeProgress::-webkit-progress-bar {\n background-color: var(--brand-videoPlayer-range-bgColor-default);\n}\n\n.VideoPlayer__rangeProgress::-webkit-progress-value {\n background-color: var(--brand-videoPlayer-range-bgColor-progress);\n}\n\n.VideoPlayer__rangeProgress::-moz-progress-bar {\n background: var(--brand-videoPlayer-range-bgColor-progress);\n}\n\n.VideoPlayer__rangeProgress::-ms-fill-lower {\n background-color: var(--brand-videoPlayer-range-bgColor-progress);\n border: none;\n}\n\n.VideoPlayer__rangeProgress::-ms-fill-upper {\n background-color: var(--brand-videoPlayer-range-bgColor-default);\n border: none;\n}\n\n@media (forced-colors: active) {\n .VideoPlayer__rangeProgress::-webkit-progress-bar {\n background-color: FieldText;\n }\n\n .VideoPlayer__rangeProgress::-webkit-progress-value {\n background-color: Highlight;\n }\n\n .VideoPlayer__rangeProgress::-moz-progress-bar {\n background: Highlight;\n }\n\n .VideoPlayer__rangeProgress::-ms-fill-lower {\n background-color: Highlight;\n }\n\n .VideoPlayer__rangeProgress::-ms-fill-upper {\n background-color: FieldText;\n }\n}\n\n/ ---------------------------------------------------------- /\n/ 7. Tooltip /\n/ ---------------------------------------------------------- /\n\n.VideoPlayer__tooltip {\n position: absolute;\n left: 50%;\n bottom: 100%;\n z-index: 2;\n width: var(--base-size-8);\n height: var(--base-size-8);\n margin-bottom: var(--base-size-16);\n opacity: 0;\n transform: translate(-50%, 50%);\n}\n\n.VideoPlayer__tooltip::before {\n position: absolute;\n bottom: calc(var(--base-size-4) -1);\n left: 0;\n width: var(--base-size-12);\n height: var(--base-size-12);\n content: '';\n background: var(--base-color-scale-white-0);\n border-radius: var(--brand-borderRadius-small);\n transform: rotate(45deg);\n}\n\n.VideoPlayer__tooltipContent {\n position: absolute;\n bottom: 0;\n left: 50%;\n z-index: -1;\n background: white;\n box-shadow: 0 var(--base-size-4) var(--base-size-4) #1b1f2433;\n transform: translate3d(-50%, 0, 0);\n padding: var(--brand-VideoPlayer-tooltip-padding-block) var(--brand-VideoPlayer-tooltip-padding-inline);\n border-radius: var(--brand-borderRadius-medium);\n}\n\n.VideoPlayer__tooltipText {\n color: var(--base-color-scale-gray-9);\n}\n\n.VideoPlayer__tooltip-visible {\n opacity: 1;\n}\n\n.VideoPlayer__controlTextColor {\n color: var(--base-color-scale-white-0);\n}\n\n.VideoPlayer__seekTime {\n white-space: nowrap;\n}\n\n.VideoPlayer__container--small .VideoPlayer__title span {\n font-weight: var(--brand-text-weight-300);\n font-size: var(--brand-text-size-300);\n line-height: var(--brand-text-lineHeight-300);\n letter-spacing: var(--brand-text-letterSpacing-300);\n}\n\n.VideoPlayer__container--small .VideoPlayer__title svg {\n width: var(--base-size-24);\n height: var(--base-size-24);\n}\n\n.VideoPlayer__container--small .VideoPlayer__controls {\n position: initial;\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them /\n@media (prefers-reduced-motion: reduce) {\n .VideoPlayer,\n .VideoPlayer::before,\n .VideoPlayer::after,\n .VideoPlayer {\n animation: none !important;\n transition: none !important;\n scroll-behavior: auto !important;\n }\n}\n"],"mappings":""}

package/esm/css/{reset-CSgu34_f.css → reset-CbGp2YkS.css} RENAMED Viewed

	@@ -1 +1 @@
1	- *,:before,:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html,html:focus-within{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html,html:focus-within{scroll-behavior:auto}}body{min-height:100vh;line-height:1.5}a:not([class]){-webkit-text-decoration-skip:ink;-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto}img,picture{max-width:100%}input,button,textarea,select{font:inherit}
1	+ *,:before,:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html,html:focus-within{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html,html:focus-within{scroll-behavior:auto}}body{min-height:100vh;line-height:1.5}a:not([class]){-webkit-text-decoration-skip:ink;-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto}img,picture{max-width:100%}input,button,textarea,select{font-family:inherit}

package/esm/css/stylesheets.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import './utilities-BivJncWo.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/colors/global-with-modes-Bdet_nBw.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/border-B0NqqX5b.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/breakpoints-DV9ZFHGu.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/typography/typography-responsive-D6GwCHec.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/size-SXubYfUg.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/animation/base-BIr7u5g8.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/typography/typography-CAC6sGQ3.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/size/size-6EfgMG7y.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes-BVk7bh0Y.css';import './reset-CSgu34_f.css';/* empty css      */
+import './utilities-BivJncWo.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/colors/global-with-modes-Bdet_nBw.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/border-B0NqqX5b.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/breakpoints-DV9ZFHGu.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/typography/typography-responsive-D6GwCHec.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/size/size-SXubYfUg.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/animation/base-BIr7u5g8.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/typography/typography-CAC6sGQ3.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/size/size-6EfgMG7y.css';import '../packages/design-tokens/lib/design-tokens/css/tokens/base/colors/color-scales-with-modes-BVk7bh0Y.css';import './reset-CbGp2YkS.css';/* empty css      */
 /* empty css                                                                                         */
 /* empty css                                                                    */
 /* empty css                                                                                */

package/lib/SubdomainNavBar/SubdomainNavBar.d.ts CHANGED Viewed

@@ -17,6 +17,7 @@ export type SubdomainNavBarMenuLabels = {
      */
     overflowMenuLabel: string;
 };
+export type SubdomainNavBarVariant = 'default' | 'featured';
 export type SubdomainNavBarProps = Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'title'> & {
     /**
      * Valid child elements are `SubdomainNavBar.Link`, `SubdomainNavBar.PrimaryAction`,
@@ -31,6 +32,10 @@ export type SubdomainNavBarProps = Omit<React.HTMLAttributes<HTMLElement>, 'chil
      * Fill the maximum width of the parent container. Defaults to `false`.
      */
     fullWidth?: boolean;
+    /**
+     * Sets the navigation layout. Defaults to `default`.
+     */
+    variant?: SubdomainNavBarVariant;
     /**
      * Optional React element rendered after the navigation links.
      */
@@ -173,6 +178,10 @@ export declare const SubdomainNavBar: React.ForwardRefExoticComponent<Omit<React
      * Fill the maximum width of the parent container. Defaults to `false`.
      */
     fullWidth?: boolean;
+    /**
+     * Sets the navigation layout. Defaults to `default`.
+     */
+    variant?: SubdomainNavBarVariant;
     /**
      * Optional React element rendered after the navigation links.
      */