.sls-hm-shell {
--sls-hm-touch-target: var(--sdb-touch-target-min, 44px);
--sls-hm-fade: 2rem;
--sls-hm-gap: var(--sdb-nav-strip-gap, var(--sdb-space-md, 1.25rem));
--sls-hm-gap-mobile: var(--sdb-nav-strip-gap-mobile, var(--sdb-space-sm, .75rem));
--sls-hm-color: var(--sdb-nav-strip-color, inherit);
--sls-hm-color-active: var(--sdb-nav-strip-color-active, currentColor);
--sls-hm-muted: var(--sdb-nav-strip-muted-color, var(--sdb-color-muted, inherit));
--sls-hm-surface: var(--sdb-nav-dropdown-bg, var(--sdb-color-surface, Canvas));
--sls-hm-border: var(--sdb-color-outline-variant, var(--sdb-color-border, rgba(0, 0, 0, .14)));
--sls-hm-radius: var(--sdb-shape-md, var(--sdb-radius-md, 12px));
--sls-hm-shadow: var(--sdb-nav-dropdown-shadow, var(--sdb-shadow-element, 0 8px 22px rgba(19, 39, 61, .1)));
--sls-hm-hover-bg: var(--sdb-state-hover-bg, rgba(0, 0, 0, .04));
--sls-hm-selected-bg: var(--sdb-state-selected-bg, rgba(0, 0, 0, .05));
--sls-hm-duration-enter: var(--sdb-motion-duration-enter, 180ms);
--sls-hm-duration-exit: var(--sdb-motion-duration-exit, 140ms);
--sls-hm-duration-fast: var(--sdb-motion-duration-fast, 120ms);
--sls-hm-easing: var(--sdb-motion-easing-standard, cubic-bezier(.2, 0, 0, 1));
--sls-hm-mask-direction: to right;
--sls-hm-mask-start: 0px;
--sls-hm-mask-end: 0px;
position: relative;
display: block;
width: 100%;
max-width: 100%;
clear: both;
margin-block: var(--sdb-space-sm, .75rem) var(--sdb-space-md, 1.25rem);
}
[dir="rtl"] .sls-hm-shell {
--sls-hm-mask-direction: to left;
} @supports (color: color-mix(in srgb, currentColor 16%, transparent)) {
.sls-hm-shell {
--sls-hm-border: var(--sdb-color-outline-variant, var(--sdb-color-border, color-mix(in srgb, currentColor 16%, transparent)));
}
} .sls-hm-shell.sls-hm-is-sticky {
position: sticky;
top: var(--sls-hm-sticky-offset, 0px);
z-index: 30;
background: var(--sls-hm-surface);
padding-block: var(--sdb-space-sm, .75rem);
}
@media screen and (min-width: 783px) {
body.admin-bar .sls-hm-shell.sls-hm-is-sticky {
--sls-hm-sticky-offset: 32px;
}
} .sls-hm-wrapper {
display: block;
width: 100%;
max-width: 100%;
}
.sls-hm-wrapper.sdb-nav-strip {
background: transparent;
border: 0;
outline: 0;
}
.sls-hm-wrapper.sdb-nav-strip::before,
.sls-hm-wrapper.sdb-nav-strip::after {
display: none;
content: none;
} .sls-hm-shell .sls-hm-menu {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.sls-hm-shell .sls-hm-menu > li {
display: block;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.sls-hm-shell .sls-hm-menu > li::before,
.sls-hm-shell .sls-hm-menu > li::marker {
content: none;
}
:where(.sls-hm-shell .sls-hm-menu) {
gap: var(--sls-hm-gap);
row-gap: var(--sdb-space-sm, .75rem);
}
:where(.sls-hm-style-2 .sls-hm-menu) {
gap: var(--sdb-nav-strip-gap, var(--sdb-space-md, 1.25rem));
}
.sls-hm-align-left .sls-hm-menu {
justify-content: flex-start;
}
.sls-hm-align-center .sls-hm-menu {
justify-content: center;
}
.sls-hm-align-right .sls-hm-menu {
justify-content: flex-end;
} .sls-hm-shell .sls-hm-link {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
text-decoration: none;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
}
:where(.sls-hm-shell .sls-hm-link) {
min-height: var(--sls-hm-touch-target);
padding: var(--sdb-nav-strip-link-padding-y, .5rem) var(--sdb-nav-strip-link-padding-x, 0);
color: var(--sls-hm-color);
line-height: 1.35;
white-space: nowrap;
transition:
color var(--sls-hm-duration-fast) var(--sls-hm-easing),
background-color var(--sls-hm-duration-fast) var(--sls-hm-easing),
border-color var(--sls-hm-duration-fast) var(--sls-hm-easing);
}
:where(.sls-hm-style-2 .sls-hm-link) {
padding-inline: var(--sdb-space-sm, .75rem);
} @media (hover: hover) and (pointer: fine) {
:where([data-sls-hm-mode="wrap"] .sls-hm-link) {
min-height: 38px;
}
} @media (hover: hover) and (pointer: fine) {
:where(.sls-hm-shell .sls-hm-link:hover) {
color: var(--sls-hm-color-active);
border-bottom-color: currentColor;
}
}
:where(.sls-hm-shell .sls-hm-link:focus-visible),
:where(.sls-hm-shell .sls-hm-menu > li.current-menu-item > .sls-hm-link),
:where(.sls-hm-shell .sls-hm-menu > li.current-menu-ancestor > .sls-hm-link),
:where(.sls-hm-shell .sls-hm-menu > li.current-menu-parent > .sls-hm-link),
:where(.sls-hm-shell .sls-hm-menu > li.current_page_item > .sls-hm-link),
:where(.sls-hm-shell .sls-hm-menu > li.current_page_ancestor > .sls-hm-link),
:where(.sls-hm-shell .sls-hm-menu > li.current_page_parent > .sls-hm-link),
:where(.sls-hm-shell .sls-hm-menu > li > .sdb-nav-strip__link--active),
:where(.sls-hm-shell .sls-hm-menu > li > [aria-current="page"]) {
color: var(--sls-hm-color-active);
border-bottom-color: currentColor;
}
.sls-hm-shell a:focus-visible,
.sls-hm-shell button:focus-visible {
outline: 2px solid var(--sdb-color-secondary, currentColor);
outline-offset: 2px;
border-radius: var(--sdb-shape-xs, 4px);
}
:where(.sls-hm-shell .sls-menu-back > .sdb-nav-strip__link--muted) {
color: var(--sls-hm-muted);
} .sls-hm-shell .sls-menu-back > .sls-hm-link::before,
.sls-hm-shell .sls-menu-home > .sls-hm-link::before {
content: '';
display: inline-flex;
flex: 0 0 auto;
width: 1em;
height: 1em;
background-color: currentColor;
line-height: 1;
transition: transform var(--sls-hm-duration-fast) var(--sls-hm-easing);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.sls-hm-shell .sls-menu-back > .sls-hm-link::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 11H6.83l5.59-5.59L11 4 3 12l8 8 1.42-1.41L6.83 13H20v-2Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 11H6.83l5.59-5.59L11 4 3 12l8 8 1.42-1.41L6.83 13H20v-2Z'/%3E%3C/svg%3E");
}
.sls-hm-shell .sls-menu-home > .sls-hm-link::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11.5 12 4l9 7.5v8a1 1 0 0 1-1 1h-5.25a1 1 0 0 1-1-1v-4.75h-3.5v4.75a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-8Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 11.5 12 4l9 7.5v8a1 1 0 0 1-1 1h-5.25a1 1 0 0 1-1-1v-4.75h-3.5v4.75a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-8Z'/%3E%3C/svg%3E");
}
@media (hover: hover) and (pointer: fine) {
.sls-hm-shell .sls-menu-back > .sls-hm-link:hover::before {
transform: translateX(-2px);
}
.sls-hm-shell .sls-menu-home > .sls-hm-link:hover::before {
transform: translateY(-1px);
}
}
.sls-hm-shell .sls-menu-back > .sls-hm-link:focus-visible::before {
transform: translateX(-2px);
}
.sls-hm-shell .sls-menu-home > .sls-hm-link:focus-visible::before {
transform: translateY(-1px);
} .sls-hm-shell .sls-hm-toggle {
box-sizing: border-box;
display: none;
align-items: center;
justify-content: center;
flex: 0 0 auto;
min-width: var(--sls-hm-touch-target);
min-height: var(--sls-hm-touch-target);
margin: 0;
padding: 0;
color: inherit;
background: transparent;
border: 0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.sls-hm-js .sls-hm-item > .sls-hm-toggle {
display: inline-flex;
} .sls-hm-shell:not(.sls-hm-js).sls-hm-has-dropdown .menu-item-has-children > .sls-hm-link::after,
.sls-hm-shell .sls-hm-toggle::after {
content: '';
display: inline-block;
flex: 0 0 auto;
width: .5rem;
height: .5rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--sls-hm-duration-fast) var(--sls-hm-easing);
}
.sls-hm-shell:not(.sls-hm-js).sls-hm-has-dropdown .menu-item-has-children > .sls-hm-link::after {
margin-inline-start: .375rem;
}
.sls-hm-shell .sls-hm-toggle[aria-expanded="true"]::after {
transform: translateY(1px) rotate(-135deg);
} .sls-hm-js .sls-hm-menu > li.menu-item-has-children {
display: flex;
align-items: center;
}
.sls-hm-js .sls-hm-item > .sls-hm-toggle {
min-width: 1.75rem;
margin-inline-start: .125rem;
} .sls-hm-shell:not(.sls-hm-js) .sls-hm-menu,
[data-sls-hm-mode="wrap"] .sls-hm-menu {
flex-wrap: wrap;
overflow: visible;
}
.sls-hm-shell .sls-hm-submenu {
box-sizing: border-box;
position: absolute;
top: 100%;
inset-inline-start: 0;
z-index: 40;
min-width: 240px;
max-width: min(88vw, 22rem);
display: flex;
flex-direction: column;
list-style: none;
margin: .375rem 0 0;
padding: .375rem;
background-color: var(--sls-hm-surface);
border: 1px solid var(--sls-hm-border);
border-radius: var(--sls-hm-radius);
box-shadow: var(--sls-hm-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(.375rem); transition:
opacity var(--sls-hm-duration-exit) var(--sls-hm-easing),
transform var(--sls-hm-duration-exit) var(--sls-hm-easing),
visibility 0s linear var(--sls-hm-duration-exit);
}
.sls-hm-shell .sls-hm-submenu.sls-hm-submenu--flip {
inset-inline-start: auto;
inset-inline-end: 0;
} .sls-hm-shell:not(.sls-hm-js) .menu-item-has-children:hover > .sls-hm-submenu,
.sls-hm-shell:not(.sls-hm-js) .menu-item-has-children:focus-within > .sls-hm-submenu,
.sls-hm-js .sls-hm-item.sls-hm-is-open > .sls-hm-submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
opacity var(--sls-hm-duration-enter) var(--sls-hm-easing),
transform var(--sls-hm-duration-enter) var(--sls-hm-easing),
visibility 0s linear 0s;
}
.sls-hm-shell:not(.sls-hm-js) .menu-item-has-children:hover > .sls-hm-link::after,
.sls-hm-shell:not(.sls-hm-js) .menu-item-has-children:focus-within > .sls-hm-link::after {
transform: translateY(1px) rotate(-135deg);
}
.sls-hm-shell .sls-hm-submenu li {
display: block;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.sls-hm-shell .sls-hm-submenu li::before,
.sls-hm-shell .sls-hm-submenu li::marker {
content: none;
}
.sls-hm-shell .sls-hm-submenu-link {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
min-height: var(--sls-hm-touch-target);
padding: .5rem .75rem;
border: 0;
border-radius: var(--sdb-shape-sm, 6px);
text-decoration: none;
}
:where(.sls-hm-shell .sls-hm-submenu-link) {
color: var(--sls-hm-color);
background: transparent;
line-height: 1.45;
text-transform: none;
transition:
background-color var(--sls-hm-duration-fast) var(--sls-hm-easing),
color var(--sls-hm-duration-fast) var(--sls-hm-easing);
}
@media (hover: hover) and (pointer: fine) {
:where(.sls-hm-shell .sls-hm-submenu-link:hover) {
background-color: var(--sls-hm-hover-bg);
color: var(--sls-hm-color-active);
}
}
:where(.sls-hm-shell .sls-hm-submenu-link:focus-visible) {
background-color: var(--sls-hm-hover-bg);
color: var(--sls-hm-color-active);
}
:where(.sls-hm-shell .sls-hm-submenu-link[aria-current="page"]) {
background-color: var(--sls-hm-selected-bg);
color: var(--sls-hm-color-active);
font-weight: var(--sdb-font-weight-semibold, 600);
} .sls-hm-shell:not(.sls-hm-js)[data-sls-hm-style="3"][data-sls-hm-has-children="false"] .sls-hm-menu {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.sls-hm-shell:not(.sls-hm-js)[data-sls-hm-style="3"][data-sls-hm-has-children="false"] .sls-hm-menu > li {
flex: 0 0 auto;
}
@media (max-width: 782px) {
.sls-hm-shell:not(.sls-hm-js) .sls-hm-menu {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
gap: var(--sls-hm-gap-mobile);
}
.sls-hm-shell:not(.sls-hm-js) .sls-hm-menu > li {
flex: 0 0 auto;
}
}
[data-sls-hm-mode="rail"] .sls-hm-menu {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scroll-snap-type: x proximity;
scroll-padding-inline: var(--sls-hm-fade);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding-block: 2px 6px;
gap: var(--sls-hm-gap-mobile);
-webkit-mask-image: linear-gradient(
var(--sls-hm-mask-direction),
transparent 0,
#000 var(--sls-hm-mask-start),
#000 calc(100% - var(--sls-hm-mask-end)),
transparent 100%
);
mask-image: linear-gradient(
var(--sls-hm-mask-direction),
transparent 0,
#000 var(--sls-hm-mask-start),
#000 calc(100% - var(--sls-hm-mask-end)),
transparent 100%
);
}
.sls-hm-shell .sls-hm-menu::-webkit-scrollbar {
display: none;
}
[data-sls-hm-mode="rail"] .sls-hm-menu > li {
flex: 0 0 auto;
scroll-snap-align: start;
}
[data-sls-hm-overflow="start"],
[data-sls-hm-overflow="both"] {
--sls-hm-mask-start: var(--sls-hm-fade);
}
[data-sls-hm-overflow="end"],
[data-sls-hm-overflow="both"] {
--sls-hm-mask-end: var(--sls-hm-fade);
} .sls-hm-shell .sls-hm-scroll-control {
position: absolute;
top: 50%;
z-index: 10;
display: none;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
padding: 0;
color: inherit;
background-color: var(--sls-hm-surface);
border: 1px solid var(--sls-hm-border);
border-radius: var(--sdb-radius-pill, 999px);
box-shadow: var(--sdb-shadow-sm, 0 4px 14px rgba(16, 40, 70, .06));
transform: translateY(-50%);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.sls-hm-shell .sls-hm-scroll-control--prev {
inset-inline-start: -.5rem;
}
.sls-hm-shell .sls-hm-scroll-control--next {
inset-inline-end: -.5rem;
}
.sls-hm-shell .sls-hm-scroll-control::after {
content: '';
width: .5rem;
height: .5rem;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.sls-hm-shell .sls-hm-scroll-control--prev::after {
transform: rotate(-135deg);
margin-inline-start: 3px;
}
.sls-hm-shell .sls-hm-scroll-control--next::after {
transform: rotate(45deg);
margin-inline-end: 3px;
}
@media (hover: hover) and (pointer: fine) {
[data-sls-hm-mode="rail"][data-sls-hm-overflow="start"] .sls-hm-scroll-control--prev,
[data-sls-hm-mode="rail"][data-sls-hm-overflow="both"] .sls-hm-scroll-control--prev,
[data-sls-hm-mode="rail"][data-sls-hm-overflow="end"] .sls-hm-scroll-control--next,
[data-sls-hm-mode="rail"][data-sls-hm-overflow="both"] .sls-hm-scroll-control--next {
display: inline-flex;
}
} [data-sls-hm-mode="rail"] .sls-hm-item > .sls-hm-toggle {
display: none;
}
[data-sls-hm-mode="rail"] .sls-hm-submenu {
display: none;
} .sls-hm-shell .sls-hm-trigger {
box-sizing: border-box;
display: none;
align-items: center;
justify-content: space-between;
gap: .75rem;
width: 100%;
min-height: var(--sls-hm-touch-target);
margin: 0;
padding: .5rem .875rem;
color: inherit;
text-align: start;
background-color: var(--sls-hm-surface);
border: 1px solid var(--sls-hm-border);
border-radius: var(--sls-hm-radius);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
[data-sls-hm-mode="panel"] .sls-hm-trigger {
display: flex;
}
.sls-hm-trigger__text {
display: flex;
flex-direction: column;
gap: .0625rem;
min-width: 0;
}
:where(.sls-hm-trigger__eyebrow) {
color: var(--sls-hm-muted);
font-size: .75em;
line-height: 1.3;
}
:where(.sls-hm-trigger__current) {
color: var(--sls-hm-color-active);
font-weight: var(--sdb-font-weight-semibold, 600);
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sls-hm-trigger__icon {
flex: 0 0 auto;
width: .5rem;
height: .5rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform var(--sls-hm-duration-fast) var(--sls-hm-easing);
}
.sls-hm-trigger[aria-expanded="true"] .sls-hm-trigger__icon {
transform: translateY(1px) rotate(-135deg);
}
[data-sls-hm-mode="panel"] .sls-hm-wrapper {
position: absolute;
inset-inline: 0;
top: calc(100% + .375rem);
z-index: 40;
box-sizing: border-box;
max-height: min(70vh, 32rem);
padding: .375rem;
overflow-y: auto;
overscroll-behavior: contain;
background-color: var(--sls-hm-surface);
border: 1px solid var(--sls-hm-border);
border-radius: var(--sls-hm-radius);
box-shadow: var(--sls-hm-shadow);
opacity: 0;
transform: translateY(-.25rem);
transition:
opacity var(--sls-hm-duration-exit) var(--sls-hm-easing),
transform var(--sls-hm-duration-exit) var(--sls-hm-easing);
}
[data-sls-hm-mode="panel"] .sls-hm-wrapper.sls-hm-is-open {
opacity: 1;
transform: translateY(0);
transition-duration: var(--sls-hm-duration-enter);
} [data-sls-hm-mode="panel"] .sls-hm-wrapper[hidden] {
display: none;
}
[data-sls-hm-mode="panel"] .sls-hm-menu {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
flex-wrap: nowrap;
gap: .125rem;
overflow: visible;
}
[data-sls-hm-mode="panel"] .sls-hm-menu > li,
[data-sls-hm-mode="panel"] .sls-hm-menu > li.menu-item-has-children {
display: block;
width: 100%;
}
[data-sls-hm-mode="panel"] .sls-hm-link,
[data-sls-hm-mode="panel"] .sls-hm-submenu-link {
justify-content: flex-start;
width: 100%;
min-height: var(--sls-hm-touch-target);
padding: .5rem .75rem;
border-bottom: 0;
border-inline-start: 3px solid transparent;
border-radius: var(--sdb-shape-sm, 6px);
white-space: normal;
}
[data-sls-hm-mode="panel"] .sls-hm-menu > li > .sls-hm-link[aria-current="page"],
[data-sls-hm-mode="panel"] .sls-hm-submenu-link[aria-current="page"] {
border-inline-start-color: currentColor;
background-color: var(--sls-hm-selected-bg);
}
[data-sls-hm-mode="panel"] .sls-hm-item > .sls-hm-toggle {
display: none;
} [data-sls-hm-mode="panel"] .sls-hm-submenu {
position: static;
display: flex;
min-width: 0;
max-width: none;
margin: 0;
padding: 0 0 .25rem;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
transition: none;
}
[data-sls-hm-mode="panel"] .sls-hm-submenu-item > .sls-hm-submenu-link {
padding-inline-start: 1.75rem;
font-size: .95em;
} [data-sls-hm-mode="panel"] .sls-hm-menu > li:has(> .sls-hm-submenu) + li {
margin-block-start: .25rem;
border-block-start: 1px solid var(--sls-hm-border);
padding-block-start: .25rem;
}
[data-sls-hm-mode="panel"] .sls-hm-scroll-control {
display: none;
} @media (prefers-reduced-motion: reduce) {
.sls-hm-shell *,
.sls-hm-shell *::before,
.sls-hm-shell *::after {
transition-duration: 1ms !important;
transition-delay: 0s !important;
animation-duration: 1ms !important;
}
.sls-hm-shell .sls-hm-menu {
scroll-behavior: auto;
}
}
@media (forced-colors: active) {
.sls-hm-shell .sls-hm-menu {
-webkit-mask-image: none;
mask-image: none;
}
.sls-hm-shell .sls-hm-submenu,
.sls-hm-shell .sls-hm-trigger,
.sls-hm-shell .sls-hm-scroll-control,
[data-sls-hm-mode="panel"] .sls-hm-wrapper {
background-color: Canvas;
border: 1px solid CanvasText;
}
.sls-hm-shell .sls-hm-link[aria-current="page"],
.sls-hm-shell .sls-hm-submenu-link[aria-current="page"] {
border-color: Highlight;
color: Highlight;
}
.sls-hm-shell a:focus-visible,
.sls-hm-shell button:focus-visible {
outline: 2px solid CanvasText;
}
}