:host { display: flex; flex-direction: column; transform: translateY(0px); width: 100%; min-height: var(--tab-size); --hide-button-size: 40px; --tab-size: 60px; --icon-position-gap: 4px; --transform-animation: transform 0.3s, opacity 0.3s; }
:host(.in-game) { --tab-size: 54px; }
:host(.hidden) { transform: translateY(70%); min-height: 0px; }
.no-scroll { overflow-y: hidden; }
.nav-bottom-bar-icon { margin: auto; height: 0px; }
button { background: none; border: none; opacity: 0; transition: var(--transform-animation); fill: white; }
button.hidden { display: flex; cursor: pointer; bottom: calc(2px); opacity: 1; transition: var(--transform-animation); background: var(--site-navigation-hidden-button-background, rgba(0, 0, 0, 0.38)); width: var(--hide-button-size); height: var(--hide-button-size); justify-content: center; align-items: center; border: 1px solid var(--site-navigation-hidden-button-border-color, rgba(255, 255, 255, 0.87)); border-radius: 50%; }
.site-navigation_tabs { height: var(--tab-size); }
.nav-bottom-bar-icon.hidden { height: auto; position: absolute; }
.site-navigation_tabs.hidden { height: 0px; }
:host(.top) .nav-bottom-bar-icon.hidden, :host(.bottom) .nav-bottom-bar-icon.hidden { left: calc(50% - (var(--hide-button-size) / 2)); }
:host(.bottom) .nav-bottom-bar-icon.hidden { bottom: calc(var(--hide-button-position, var(--icon-position-gap)) * -1); }
:host(.top) .nav-bottom-bar-icon.hidden { top: calc(var(--hide-button-position, var(--icon-position-gap)) * -1); }
:host(.bottom) button.hidden { transform: translateY(-50%); }
:host(.top) button.hidden { transform: translateY(50%); }
:host(.left), :host(.right) { width: var(--tab-size); height: 100%; transform: translateX(0px); transition: width 0.3s, opacity 0.3s ease-in; }
: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(.top) .site-navigation_tabs, :host(.bottom) .site-navigation_tabs { transition: height 0.3s ease-in-out; }
:host(.top.hidden) .site-navigation_tabs, :host(.bottom.hidden) .site-navigation_tabs { transition: none; }
:host(.left) .site-navigation_tabs, :host(.right) .site-navigation_tabs { flex-direction: column; width: var(--tab-size); height: 100%; transition: width 0.3s ease-in-out; }
:host(.left) .site-navigation_tabs.hidden, :host(.right) .site-navigation_tabs.hidden { width: 0px; }
:host(.left) .nav-bottom-bar-icon, :host(.right) .nav-bottom-bar-icon { top: calc(50% - (var(--hide-button-size) / 2)); height: auto; position: absolute; }
:host(.left) .nav-bottom-bar-icon.hidden { left: calc(var(--hide-button-position, var(--icon-position-gap)) * -1); }
:host(.left) button.hidden { transform: translateX(50%); }
:host(.right) .nav-bottom-bar-icon.hidden { right: calc(var(--hide-button-position, var(--icon-position-gap)) * -1); }
:host(.right) button.hidden { transform: translateX(-50%); }
.site-navigation_tabs { display: block; overflow: auto; }
.site-navigation_tabs.web-device { padding-bottom: calc(env(safe-area-inset-bottom) / 2); }