:host { display: flex; flex-direction: column; transform: translateY(0px); width: 100vw; --hide-button-size: 40px; --tab-size: 56px; --transform-animation: transform 0.3s, opacity 0.3s; --site-navigation-bottom-background: var(--primary); --site-navigation-bottom-color-active: var(--fds-on-surface-nav-color); --site-navigation-bottom-background-active: transparent; --site-navigation-bottom-background-hover: transparent; --hide-button-position: 0px; }
:host(.hidden) { transform: translateY(100%); }
.no-scroll { overflow-y: hidden; }
:host(.left), :host(.right) { width: auto; height: 100%; margin-bottom: 0px; transform: translateX(0px); transition: width 0.3s, opacity 0.3s ease-in; }
:host(.left) .wrapper, :host(.right) .wrapper { flex-direction: row; }
:host(.left) .wrapper .hide-swipe, :host(.right) .wrapper .hide-swipe { order: 2; min-width: 12px; display: flex; align-items: center; justify-content: center; height: 100%; }
:host(.left) .wrapper .hide-swipe .indicator, :host(.right) .wrapper .hide-swipe .indicator { width: 4px; height: 32px; background-color: var(--indicator-background-color, var(--surface)); opacity: 0.6; border-radius: var(--indicator-border-radius, var(--border-radius-medium)); }
:host(.left.hidden), :host(.right.hidden) { flex-direction: row-reverse; width: 0px; }
:host(.left.hidden) { transform: translateX(-70%); }
:host(.right.hidden) { transform: translateX(-1%); }
:host(.left), :host(.right) { flex-direction: column; }
:host(.left) .no-scroll, :host(.right) .no-scroll { flex-direction: column; }
:host([iswave="false"][background="default"]) .wrapper { border-top: 1px solid var(--fds-on-surface-ulow); }
:host([iswave="true"]) { background: linear-gradient(0deg, var(--fds-background) 50%, transparent 50%); }
:host([background="default"]) { --background: var(--fds-surface-nav, var(--alternate-surface-nav)); --tabs-color: var(--fds-on-surface-nav-hi, var(--on-alternate-surface-hi)); }
:host([background="alternative"]) { --background: var(--fds-alternate-surface-nav, var(--alternate-surface-nav)); --tabs-color: var(--fds-on-alternate-surface-hi, var(--on-alternate-surface-hi)); --site-navigation-bottom-color-active: var(--fds-on-alternate-surface-nav-color); }
:host([iswave="false"][background="alternative"]) { border-top: 1px solid var(--fds-on-alternate-surface-ulow); }
:host(.polaris) { --background: transparent; }
:host(.polaris[iswave="false"][background="default"]) .wrapper { border: none; }
:host { background-color: var(--background); }
.wrapper { display: flex; flex-direction: column; min-height: var(--tab-size); }
:host([iswave="true"]) .wrapper:not(:has(.hidden)) { padding-top: 5%; }
.wrapper.left { height: 100%; }
.wrapper.left:not(:has(.hidden)) { padding-right: 5%; padding-top: initial; }
.wave { z-index: 102; fill: var(--fds-surface-nav); margin-bottom: -1px; }
@container swipe-area (min-width: 1024px) {
  .wrapper { display: none; }
}
.hide-swipe { height: 12px; display: flex; align-items: center; justify-content: center; width: 100%; }
.hide-swipe .indicator { height: 4px; width: 32px; background-color: var(--indicator-background-color, var(--fds-on-alternate-surface-low)); border-color: var(--indicator-border-color, var(--fds-on-alternate-surface-ulow)); opacity: 0.6; border-radius: var(--indicator-border-radius, var(--border-radius-medium)); }
.swipe-area { height: 100%; container: swipe-area / inline-size; }