.ehn-sw {
--ehn-sw-bg: #111827;
--ehn-sw-fg: #fff;
--ehn-sw-icon: currentColor;
--ehn-sw-active: #fff;
--ehn-sw-active-bg: rgba(255,255,255,.14);
--ehn-sw-hover: var(--ehn-sw-active);
--ehn-sw-hover-icon: var(--ehn-sw-hover);
--ehn-sw-hover-bg: var(--ehn-sw-active-bg);
--ehn-sw-hover-shadow: none;
--ehn-sw-hover-transform: none;
--ehn-sw-button-bg: #111827;
--ehn-sw-button-fg: #fff;
--ehn-sw-radius: 999px;
--ehn-sw-bar-radius: 24px 24px 0 0;
--ehn-sw-bar-margin-x: 20px;
--ehn-sw-bar-zone-left: 33.333%;
--ehn-sw-bar-zone-center: 33.333%;
--ehn-sw-bar-zone-right: 33.334%;
--ehn-sw-bar-border-top: 0;
--ehn-sw-bar-border-right: 0;
--ehn-sw-bar-border-bottom: 0;
--ehn-sw-bar-border-left: 0;
--ehn-sw-bar-border-color: #fff;
--ehn-sw-shadow: 0 14px 40px rgba(0,0,0,.22);
--ehn-sw-z: 99999;
--ehn-sw-item-size: 56px;
--ehn-sw-offset-x: 24px;
--ehn-sw-offset-y: 24px;
box-sizing: border-box;
color: var(--ehn-sw-fg);
font-family: inherit;
z-index: var(--ehn-sw-z) !important;
isolation: isolate;
}
.ehn-sw *,
.ehn-sw *::before,
.ehn-sw *::after {
box-sizing: inherit;
}
.ehn-sw-list {
list-style: none !important;
margin: 0;
padding: 0;
}
.ehn-sw-list > .ehn-sw-item {
list-style: none !important;
margin: 0;
padding: 0;
}
.ehn-sw-list > .ehn-sw-item::marker {
content: "" !important;
font-size: 0 !important;
}
.ehn-sw-link,
.ehn-sw-toggle {
appearance: none;
border: 0;
font: inherit;
text-decoration: none;
color: var(--ehn-sw-fg);
background: transparent;
cursor: pointer;
transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
-webkit-tap-highlight-color: transparent;
}
.ehn-sw-link:focus-visible,
.ehn-sw-toggle:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
.ehn-sw-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: var(--ehn-sw-icon);
line-height: 1;
}
.ehn-sw-icon svg,
.ehn-sw-toggle svg,
.ehn-sw-mobile-menu-icon svg {
display: block !important;
width: 1em;
height: 1em;
min-width: 1em;
min-height: 1em;
color: currentColor;
stroke: currentColor;
fill: none;
overflow: visible;
}
.ehn-sw-icon .ehn-sw-svg {
width: var(--ehn-sw-icon-render-size, 24px);
height: var(--ehn-sw-icon-render-size, 24px);
}
.ehn-sw-label,
.ehn-sw-text-content {
display: block;
font-weight: 650;
line-height: 1.15;
white-space: nowrap;
}
.ehn-sw-label {
font-size: 12px;
}
.ehn-sw-text-content {
color: inherit;
font-size: var(--ehn-sw-text-font-size, 12px);
}
.ehn-sw-text-inner {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
max-width: 100%;
min-width: 0;
vertical-align: middle;
}
.ehn-sw-text .ehn-sw-icon {
color: var(--ehn-sw-icon);
font-size: var(--ehn-sw-icon-render-size, 24px);
}
.ehn-sw-text .ehn-sw-text-content {
min-width: 0;
}
.ehn-sw--no-shadow,
.ehn-sw--no-shadow.ehn-sw--bar,
.ehn-sw--no-shadow .ehn-sw-toggle,
.ehn-sw--no-shadow .ehn-sw-link,
.ehn-sw--no-shadow .ehn-sw-text,
.ehn-sw--no-shadow .ehn-sw-image,
.ehn-sw--no-shadow .ehn-sw-mobile-menu-toggle,
.ehn-sw--no-shadow .ehn-sw-mobile-menu {
box-shadow: none !important;
}
.ehn-sw--bar {
position: fixed !important;
left: var(--ehn-sw-bar-margin-x);
right: var(--ehn-sw-bar-margin-x);
left: max(var(--ehn-sw-bar-margin-x), env(safe-area-inset-left));
right: max(var(--ehn-sw-bar-margin-x), env(safe-area-inset-right));
background: var(--ehn-sw-bg);
box-shadow: var(--ehn-sw-shadow) !important;
border-color: var(--ehn-sw-bar-border-color);
border-style: solid;
border-width: var(--ehn-sw-bar-border-top) var(--ehn-sw-bar-border-right) var(--ehn-sw-bar-border-bottom) var(--ehn-sw-bar-border-left);
border-radius: var(--ehn-sw-bar-radius);
z-index: var(--ehn-sw-z) !important;
padding: 8px;
padding-bottom: calc(8px + constant(safe-area-inset-bottom));
padding-bottom: calc(8px + env(safe-area-inset-bottom));
padding-left: calc(8px + constant(safe-area-inset-left));
padding-left: calc(8px + env(safe-area-inset-left));
padding-right: calc(8px + constant(safe-area-inset-right));
padding-right: calc(8px + env(safe-area-inset-right));
}
.ehn-sw--bar .ehn-sw-bar-zones {
display: grid;
grid-template-columns: minmax(0, var(--ehn-sw-bar-zone-left)) minmax(0, var(--ehn-sw-bar-zone-center)) minmax(0, var(--ehn-sw-bar-zone-right));
gap: 0;
align-items: stretch;
width: 100%;
}
.ehn-sw--bar .ehn-sw-bar-zone {
display: flex;
gap: 6px;
align-items: stretch;
min-width: 0;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
scrollbar-width: thin;
}
.ehn-sw--bar .ehn-sw-bar-zone--left {
justify-content: flex-start;
}
.ehn-sw--bar .ehn-sw-bar-zone--center {
justify-content: center;
}
.ehn-sw--bar .ehn-sw-bar-zone--right {
justify-content: flex-end;
}
.ehn-sw-mobile-menu-toggle,
.ehn-sw-mobile-menu {
display: none;
}
.ehn-sw--bar-bottom {
bottom: 0;
}
.ehn-sw--bar-top {
top: 0;
border-radius: var(--ehn-sw-bar-radius);
}
.ehn-sw--bar .ehn-sw-item {
flex: 0 0 auto;
min-width: min(92px, 24vw);
}
.ehn-sw--bar .ehn-sw-link,
.ehn-sw--bar .ehn-sw-text,
.ehn-sw--bar .ehn-sw-image {
min-height: var(--ehn-sw-item-size);
border-radius: 18px;
display: grid;
place-items: center;
gap: 5px;
padding: 8px 12px;
color: var(--ehn-sw-fg);
text-align: center;
}
.ehn-sw--bar .ehn-sw-text,
.ehn-sw--bar .ehn-sw-image {
cursor: default;
}
.ehn-sw--bar .ehn-sw-text {
color: var(--ehn-sw-item-text-color, var(--ehn-sw-fg));
}
.ehn-sw--wheel .ehn-sw-text {
color: var(--ehn-sw-item-text-color, var(--ehn-sw-fg));
}
.ehn-sw--bar .ehn-sw-link {
justify-items: center;
text-align: center;
}
.ehn-sw--bar .ehn-sw-link .ehn-sw-icon,
.ehn-sw--bar .ehn-sw-link .ehn-sw-label {
justify-self: center;
text-align: center;
}
.ehn-sw--bar .ehn-sw-align-left .ehn-sw-text {
justify-items: start;
text-align: left;
}
.ehn-sw--bar .ehn-sw-align-left .ehn-sw-text-inner {
justify-content: flex-start;
}
.ehn-sw--bar .ehn-sw-align-center .ehn-sw-text,
.ehn-sw--bar .ehn-sw-align-center .ehn-sw-image {
justify-items: center;
text-align: center;
}
.ehn-sw--bar .ehn-sw-align-center .ehn-sw-text-inner {
justify-content: center;
}
.ehn-sw--bar .ehn-sw-align-right .ehn-sw-text {
justify-items: end;
text-align: right;
}
.ehn-sw--bar .ehn-sw-align-right .ehn-sw-text-inner {
justify-content: flex-end;
}
.ehn-sw--bar .ehn-sw-link:hover,
.ehn-sw--bar .ehn-sw-link:focus-visible {
background: var(--ehn-sw-hover-bg);
color: var(--ehn-sw-hover);
box-shadow: var(--ehn-sw-hover-shadow) !important;
transform: var(--ehn-sw-hover-transform);
}
.ehn-sw--bar .ehn-sw-link:hover .ehn-sw-icon,
.ehn-sw--bar .ehn-sw-link:focus-visible .ehn-sw-icon {
color: var(--ehn-sw-hover-icon);
}
.ehn-sw--bar .ehn-sw-link.is-active {
background: var(--ehn-sw-active-bg);
color: var(--ehn-sw-active);
}
.ehn-sw--bar .ehn-sw-link.is-active .ehn-sw-icon {
color: currentColor;
}
.ehn-sw--wheel {
position: fixed !important;
width: var(--ehn-sw-item-size);
height: var(--ehn-sw-item-size);
z-index: var(--ehn-sw-z) !important;
}
.ehn-sw--bottom-right {
right: max(var(--ehn-sw-offset-x), env(safe-area-inset-right));
bottom: max(var(--ehn-sw-offset-y), env(safe-area-inset-bottom));
}
.ehn-sw--bottom-left {
left: max(var(--ehn-sw-offset-x), env(safe-area-inset-left));
bottom: max(var(--ehn-sw-offset-y), env(safe-area-inset-bottom));
}
.ehn-sw--top-right {
right: max(var(--ehn-sw-offset-x), env(safe-area-inset-right));
top: var(--ehn-sw-offset-y);
}
.ehn-sw--top-left {
left: max(var(--ehn-sw-offset-x), env(safe-area-inset-left));
top: var(--ehn-sw-offset-y);
}
.ehn-sw--center-right {
right: max(var(--ehn-sw-offset-x), env(safe-area-inset-right));
top: 50%;
transform: translateY(-50%);
}
.ehn-sw--center-left {
left: max(var(--ehn-sw-offset-x), env(safe-area-inset-left));
top: 50%;
transform: translateY(-50%);
}
.ehn-sw-toggle {
position: absolute;
inset: 0;
z-index: 2;
width: var(--ehn-sw-item-size);
height: var(--ehn-sw-item-size);
display: grid;
place-items: center;
border-radius: var(--ehn-sw-radius);
color: var(--ehn-sw-button-fg);
background: var(--ehn-sw-button-bg);
box-shadow: var(--ehn-sw-shadow) !important;
transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .2s ease, filter .2s ease;
}
.ehn-sw-toggle:hover,
.ehn-sw-toggle:focus-visible {
background: var(--ehn-sw-hover-bg);
color: var(--ehn-sw-hover);
box-shadow: var(--ehn-sw-hover-shadow) !important;
filter: none;
}
.ehn-sw-toggle:hover .ehn-sw-icon,
.ehn-sw-toggle:focus-visible .ehn-sw-icon {
color: var(--ehn-sw-hover-icon);
}
.ehn-sw[data-open="true"] .ehn-sw-toggle {
transform: rotate(90deg);
}
.ehn-sw-toggle-icon {
grid-area: 1 / 1;
display: inline-flex;
transition: opacity .18s ease, transform .18s ease;
}
.ehn-sw-toggle-icon--close,
.ehn-sw[data-open="true"] .ehn-sw-toggle-icon--open {
opacity: 0;
transform: scale(.6);
}
.ehn-sw[data-open="true"] .ehn-sw-toggle-icon--close {
opacity: 1;
transform: scale(1);
}
.ehn-sw--wheel .ehn-sw-list {
position: absolute;
inset: 0;
pointer-events: none;
}
.ehn-sw--wheel .ehn-sw-item {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transform: translate(0,0) scale(.72);
transition: opacity .2s ease, transform .24s cubic-bezier(.2,.8,.2,1);
}
.ehn-sw--wheel .ehn-sw-link,
.ehn-sw--wheel .ehn-sw-text,
.ehn-sw--wheel .ehn-sw-image {
width: var(--ehn-sw-item-size);
min-height: var(--ehn-sw-item-size);
border-radius: var(--ehn-sw-radius);
background: var(--ehn-sw-bg);
box-shadow: var(--ehn-sw-shadow) !important;
display: grid;
place-items: center;
gap: 4px;
padding: 8px;
text-align: center;
color: var(--ehn-sw-fg);
}
.ehn-sw--wheel .ehn-sw-text,
.ehn-sw--wheel .ehn-sw-image {
cursor: default;
}
.ehn-sw--wheel .ehn-sw-link:hover,
.ehn-sw--wheel .ehn-sw-link:focus-visible {
background: var(--ehn-sw-hover-bg);
color: var(--ehn-sw-hover);
box-shadow: var(--ehn-sw-hover-shadow) !important;
transform: var(--ehn-sw-hover-transform);
}
.ehn-sw--wheel .ehn-sw-link:hover .ehn-sw-icon,
.ehn-sw--wheel .ehn-sw-link:focus-visible .ehn-sw-icon {
color: var(--ehn-sw-hover-icon);
}
.ehn-sw--wheel .ehn-sw-link.is-active {
background: var(--ehn-sw-active-bg);
color: var(--ehn-sw-active);
}
.ehn-sw--wheel .ehn-sw-link.is-active .ehn-sw-icon {
color: currentColor;
}
.ehn-sw--wheel[data-open="true"] .ehn-sw-list {
pointer-events: auto;
}
.ehn-sw--wheel[data-open="true"] .ehn-sw-item {
opacity: 1;
pointer-events: auto;
}
.ehn-sw--wheel-radial[data-open="true"] .ehn-sw-item {
transform: rotate(calc((var(--ehn-sw-i) * 42deg) - ((var(--ehn-sw-count) - 1) * 21deg))) translateY(calc(var(--ehn-sw-item-size) * -1.55)) rotate(calc(((var(--ehn-sw-i) * 42deg) - ((var(--ehn-sw-count) - 1) * 21deg)) * -1)) scale(1);
}
.ehn-sw--bottom-left.ehn-sw--wheel-radial[data-open="true"] .ehn-sw-item,
.ehn-sw--center-left.ehn-sw--wheel-radial[data-open="true"] .ehn-sw-item,
.ehn-sw--top-left.ehn-sw--wheel-radial[data-open="true"] .ehn-sw-item {
transform: rotate(calc(90deg + (var(--ehn-sw-i) * 42deg) - ((var(--ehn-sw-count) - 1) * 21deg))) translateY(calc(var(--ehn-sw-item-size) * -1.55)) rotate(calc((90deg + (var(--ehn-sw-i) * 42deg) - ((var(--ehn-sw-count) - 1) * 21deg)) * -1)) scale(1);
}
.ehn-sw--wheel-stack[data-open="true"] .ehn-sw-item {
transform: translateY(calc((var(--ehn-sw-i) + 1) * (var(--ehn-sw-item-size) + 10px) * -1)) scale(1);
}
.ehn-sw--top-right.ehn-sw--wheel-stack[data-open="true"] .ehn-sw-item,
.ehn-sw--top-left.ehn-sw--wheel-stack[data-open="true"] .ehn-sw-item {
transform: translateY(calc((var(--ehn-sw-i) + 1) * (var(--ehn-sw-item-size) + 10px))) scale(1);
}
.ehn-sw--center-right.ehn-sw--wheel-stack[data-open="true"] .ehn-sw-item,
.ehn-sw--center-left.ehn-sw--wheel-stack[data-open="true"] .ehn-sw-item {
transform: translateX(calc((var(--ehn-sw-i) + 1) * (var(--ehn-sw-item-size) + 10px) * -1)) scale(1);
}
.ehn-sw--center-left.ehn-sw--wheel-stack[data-open="true"] .ehn-sw-item {
transform: translateX(calc((var(--ehn-sw-i) + 1) * (var(--ehn-sw-item-size) + 10px))) scale(1);
}
.ehn-sw--animation-none .ehn-sw-item,
.ehn-sw--animation-none .ehn-sw-toggle,
.ehn-sw--animation-none .ehn-sw-toggle-icon {
transition: none !important;
}
.ehn-sw--animation-fade .ehn-sw-item {
transform: none;
}
.ehn-sw--animation-slide.ehn-sw--wheel[data-open="true"] .ehn-sw-item {
transition-duration: .32s;
}
.ehn-sw-custom-icon {
display: none;
width: 1.5em;
height: 1.5em;
object-fit: contain;
}
.ehn-sw[data-theme="dark-bg"] .ehn-sw-custom-icon--light,
.ehn-sw[data-theme="light-bg"] .ehn-sw-custom-icon--dark,
.ehn-sw[data-theme="manual"] .ehn-sw-custom-icon:first-child {
display: block;
}
.ehn-sw-icon--custom .ehn-sw-custom-icon:only-child {
display: block;
}
.ehn-sw-item--is-hidden {
display: none !important;
}
.ehn-sw-image-element {
display: block;
width: var(--ehn-sw-image-width, auto);
max-width: 100%;
max-height: calc(var(--ehn-sw-item-size) - 12px);
height: auto;
object-fit: contain;
}
.ehn-sw--bar .ehn-sw-image-element {
max-height: calc(var(--ehn-sw-item-size) - 16px);
}
.ehn-sw--wheel .ehn-sw-image-element {
max-width: calc(var(--ehn-sw-item-size) - 16px);
}
.ehn-sw--hide-until-scroll {
opacity: 0;
pointer-events: none;
transition: opacity .24s ease, transform .24s ease;
}
.ehn-sw--hide-until-scroll.ehn-sw--bar-bottom {
transform: translateY(calc(100% + 24px));
}
.ehn-sw--hide-until-scroll.ehn-sw--bar-top {
transform: translateY(calc(-100% - 24px));
}
.ehn-sw--hide-until-scroll.ehn-sw--scroll-visible {
opacity: 1;
pointer-events: auto;
}
.ehn-sw--hide-until-scroll.ehn-sw--scroll-visible.ehn-sw--bar {
transform: translateY(0);
}
@media (min-width: 1025px) {
.ehn-sw--hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
.ehn-sw--hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
.ehn-sw--hide-mobile { display: none !important; }
.ehn-sw--bar {
left: 0 !important;
right: 0 !important;
width: 100%;
max-width: none;
border-radius: var(--ehn-sw-bar-radius);
padding-left: 8px;
padding-right: 8px;
padding-left: calc(8px + constant(safe-area-inset-left));
padding-left: calc(8px + env(safe-area-inset-left));
padding-right: calc(8px + constant(safe-area-inset-right));
padding-right: calc(8px + env(safe-area-inset-right));
}
.ehn-sw--bar .ehn-sw-bar-zones {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"left toggle"
"center toggle";
column-gap: 8px;
row-gap: 4px;
align-items: center;
}
.ehn-sw--bar .ehn-sw-bar-zone {
gap: 4px;
justify-content: flex-start;
scrollbar-width: none;
}
.ehn-sw--bar .ehn-sw-bar-zone::-webkit-scrollbar {
display: none;
}
.ehn-sw--bar .ehn-sw-bar-zone--left {
grid-area: left;
justify-content: flex-start;
}
.ehn-sw--bar .ehn-sw-bar-zone--center {
grid-area: center;
justify-content: flex-start;
}
.ehn-sw--bar .ehn-sw-bar-zone--right {
display: none;
}
.ehn-sw--bar .ehn-sw-item {
min-width: auto;
}
.ehn-sw--bar .ehn-sw-link,
.ehn-sw--bar .ehn-sw-text,
.ehn-sw--bar .ehn-sw-image {
min-height: 42px;
border-radius: 14px;
padding: 6px 8px;
}
.ehn-sw-mobile-menu-toggle {
appearance: none;
border: 0;
grid-area: toggle;
display: grid;
place-items: center;
justify-self: end;
align-self: center;
width: 44px;
height: 44px;
border-radius: 14px;
color: var(--ehn-sw-fg);
background: var(--ehn-sw-active-bg);
box-shadow: var(--ehn-sw-shadow) !important;
cursor: pointer;
transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
-webkit-tap-highlight-color: transparent;
}
.ehn-sw-mobile-menu-toggle:hover,
.ehn-sw-mobile-menu-toggle:focus-visible {
background: var(--ehn-sw-hover-bg);
color: var(--ehn-sw-hover);
box-shadow: var(--ehn-sw-hover-shadow) !important;
transform: var(--ehn-sw-hover-transform);
outline: 3px solid currentColor;
outline-offset: 3px;
}
.ehn-sw-mobile-menu-toggle svg {
display: block;
}
.ehn-sw-mobile-menu {
position: absolute;
left: 0;
right: 0;
width: 100%;
max-width: 100vw;
max-height: 76vh;
max-height: min(76vh, 620px);
overflow: auto;
margin: 0;
padding: 10px 12px;
padding-left: calc(12px + constant(safe-area-inset-left));
padding-left: calc(12px + env(safe-area-inset-left));
padding-right: calc(12px + constant(safe-area-inset-right));
padding-right: calc(12px + env(safe-area-inset-right));
color: var(--ehn-sw-fg);
background: var(--ehn-sw-bg);
box-shadow: var(--ehn-sw-shadow) !important;
z-index: calc(var(--ehn-sw-z) + 1);
}
.ehn-sw--bar-bottom .ehn-sw-mobile-menu {
bottom: calc(100% - 1px);
border-radius: 18px 18px 0 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.ehn-sw--bar-top .ehn-sw-mobile-menu {
top: calc(100% - 1px);
border-radius: 0 0 18px 18px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.ehn-sw--mobile-menu-open .ehn-sw-mobile-menu {
display: block;
}
.ehn-sw-mobile-menu-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.ehn-sw-mobile-menu-list .ehn-sw-item {
width: 100%;
min-width: 0;
}
.ehn-sw-mobile-menu-list .ehn-sw-link,
.ehn-sw-mobile-menu-list .ehn-sw-text,
.ehn-sw-mobile-menu-list .ehn-sw-image {
width: 100%;
min-height: 52px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 10px 12px;
text-align: left;
}
.ehn-sw-mobile-menu-list .ehn-sw-icon,
.ehn-sw-mobile-menu-list .ehn-sw-label,
.ehn-sw-mobile-menu-list .ehn-sw-text-content {
text-align: left;
}
.ehn-sw-mobile-menu-list .ehn-sw-text-inner {
justify-content: flex-start;
}
.ehn-sw-mobile-menu-list .ehn-sw-label,
.ehn-sw-mobile-menu-list .ehn-sw-text-content {
font-size: 16px;
font-size: max(15px, var(--ehn-sw-text-font-size, 12px));
line-height: 1.25;
}
.ehn-sw-label { font-size: 11px; }
} @supports (-webkit-touch-callout: none) {
@media (max-width: 767px) {
.ehn-sw--bar:not(.ehn-sw--hide-mobile):not(.ehn-sw--stop-hidden) {
position: fixed !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
max-width: none !important;
min-height: 52px;
z-index: var(--ehn-sw-z, 99999) !important;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.ehn-sw--bar-bottom:not(.ehn-sw--hide-mobile):not(.ehn-sw--stop-hidden) {
bottom: 0 !important;
top: auto !important;
}
.ehn-sw--bar-top:not(.ehn-sw--hide-mobile):not(.ehn-sw--stop-hidden) {
top: 0 !important;
bottom: auto !important;
}
.ehn-sw--hide-until-scroll:not(.ehn-sw--scroll-visible) {
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
.ehn-sw--hide-until-scroll.ehn-sw--scroll-visible:not(.ehn-sw--stop-hidden) {
visibility: visible !important;
}
.ehn-sw--bar svg,
.ehn-sw--wheel svg,
.ehn-sw-mobile-menu svg {
display: block !important;
width: auto;
height: auto;
min-width: 1em;
min-height: 1em;
overflow: visible;
stroke: currentColor !important;
}
}
} html.ehn-sw-real-mobile .ehn-sw--bar:not(.ehn-sw--hide-mobile):not(.ehn-sw--stop-hidden) {
position: fixed !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: none !important;
z-index: 99999 !important;
padding-left: 8px;
padding-right: 8px;
padding-left: calc(8px + constant(safe-area-inset-left));
padding-left: calc(8px + env(safe-area-inset-left));
padding-right: calc(8px + constant(safe-area-inset-right));
padding-right: calc(8px + env(safe-area-inset-right));
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
html.ehn-sw-real-mobile .ehn-sw--bar-bottom:not(.ehn-sw--hide-mobile):not(.ehn-sw--stop-hidden) {
bottom: 0 !important;
top: auto !important;
}
html.ehn-sw-real-mobile .ehn-sw--bar-top:not(.ehn-sw--hide-mobile):not(.ehn-sw--stop-hidden) {
top: 0 !important;
bottom: auto !important;
}
html.ehn-sw-real-mobile .ehn-sw--bar .ehn-sw-bar-zones {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"left toggle"
"center toggle";
column-gap: 8px;
row-gap: 4px;
align-items: center;
}
html.ehn-sw-real-mobile .ehn-sw--bar .ehn-sw-bar-zone {
gap: 4px;
justify-content: flex-start;
scrollbar-width: none;
}
html.ehn-sw-real-mobile .ehn-sw--bar .ehn-sw-bar-zone::-webkit-scrollbar {
display: none;
}
html.ehn-sw-real-mobile .ehn-sw--bar .ehn-sw-bar-zone--left {
grid-area: left;
justify-content: flex-start;
}
html.ehn-sw-real-mobile .ehn-sw--bar .ehn-sw-bar-zone--center {
grid-area: center;
justify-content: flex-start;
}
html.ehn-sw-real-mobile .ehn-sw--bar .ehn-sw-bar-zone--right {
display: none;
}
html.ehn-sw-real-mobile .ehn-sw-mobile-menu-toggle {
appearance: none;
border: 0;
grid-area: toggle;
display: grid;
place-items: center;
justify-self: end;
align-self: center;
width: 44px;
height: 44px;
border-radius: 14px;
color: var(--ehn-sw-fg);
background: var(--ehn-sw-active-bg);
box-shadow: var(--ehn-sw-shadow) !important;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
html.ehn-sw-real-mobile .ehn-sw-mobile-menu {
position: absolute;
left: 0;
right: 0;
width: 100%;
max-width: none;
max-height: 76vh;
overflow: auto;
margin: 0;
padding: 10px 12px;
color: var(--ehn-sw-fg);
background: var(--ehn-sw-bg);
box-shadow: var(--ehn-sw-shadow) !important;
z-index: 100000;
}
html.ehn-sw-real-mobile .ehn-sw--bar-bottom .ehn-sw-mobile-menu {
bottom: calc(100% - 1px);
border-radius: 18px 18px 0 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
html.ehn-sw-real-mobile .ehn-sw--bar-top .ehn-sw-mobile-menu {
top: calc(100% - 1px);
border-radius: 0 0 18px 18px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
html.ehn-sw-real-mobile .ehn-sw--mobile-menu-open .ehn-sw-mobile-menu {
display: block;
}
html.ehn-sw-real-mobile .ehn-sw-mobile-menu-list {
display: flex;
flex-direction: column;
gap: 6px;
}
html.ehn-sw-real-mobile .ehn-sw-mobile-menu-list .ehn-sw-link,
html.ehn-sw-real-mobile .ehn-sw-mobile-menu-list .ehn-sw-text,
html.ehn-sw-real-mobile .ehn-sw-mobile-menu-list .ehn-sw-image {
width: 100%;
min-height: 52px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 10px 12px;
text-align: left;
}
html.ehn-sw-real-mobile .ehn-sw-mobile-menu-list .ehn-sw-text-inner {
justify-content: flex-start;
}
html.ehn-sw-real-mobile .ehn-sw-mobile-menu-list .ehn-sw-label,
html.ehn-sw-real-mobile .ehn-sw-mobile-menu-list .ehn-sw-text-content {
font-size: 16px;
line-height: 1.25;
}
html.ehn-sw-real-mobile .ehn-sw-item--hide-mobile {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
.ehn-sw *,
.ehn-sw *::before,
.ehn-sw *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}
.ehn-sw-stop-marker {
display: block;
width: 0;
height: 0;
overflow: hidden;
pointer-events: none;
visibility: hidden;
}
.ehn-sw--stopped:not(.ehn-sw--stop-hidden) {
position: absolute !important;
}
.ehn-sw--stop-hidden {
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
.ehn-sw--no-shadow .ehn-sw-toggle:hover,
.ehn-sw--no-shadow .ehn-sw-toggle:focus-visible,
.ehn-sw--no-shadow .ehn-sw-link:hover,
.ehn-sw--no-shadow .ehn-sw-link:focus-visible,
.ehn-sw--no-shadow .ehn-sw-mobile-menu-toggle:hover,
.ehn-sw--no-shadow .ehn-sw-mobile-menu-toggle:focus-visible,
.ehn-sw--no-shadow.ehn-sw--mobile-menu-open .ehn-sw-mobile-menu {
box-shadow: none !important;
}
@media (min-width: 1025px) {
.ehn-sw-item--hide-desktop { display: none !important; }
}
@media (max-width: 767px) {
.ehn-sw-item--hide-mobile { display: none !important; }
}