:host { --background-hover: var(--site-navigation-tabs-background-hover, var(--primary-interaction-low)); --background-active: var(--site-navigation-tabs-background-active, var(--primary-interaction-low)); --background-gradient: var(--site-navigation-tabs-background-gradient, var(--alternate-surface-nav)); --color: var(--site-navigation-tabs-color, var(--on-surface-m)); --color-hover: var(--site-navigation-tabs-color-hover, var(--site-navigation-tabs-color)); --color-active: var(--site-navigation-tabs-color-active, var(--primary)); --fill: var(--site-navigation-tabs-color, var(--on-surface-m)); --fill-hover: var(--site-navigation-tabs-color-hover, var(--site-navigation-tabs-color)); --fill-active: var(--site-navigation-tabs-color-active, var(--primary)); --divider: var(--site-navigation-tabs-divider, transparent); --title-display: block; --font: var(--site-navigation-tabs-font, var(--fds-paragraphs-tiny-bold)); box-sizing: border-box; flex-wrap: nowrap; text-align: center; background: var(--site-navigation-tabs-background, transparent); color: var(--color); fill: var(--fill); overflow-y: auto; font: var(--font); height: 100%; }
:host(.no-title) { --title-display: none; }
:host(.no-scroll) { overflow: hidden; display: flex; }
:host(.compact) { height: 40px; }
:host(.icon-above) .tab { flex-direction: column; }
:host(.icon-side) .tab, :host(.compact) .tab { flex-direction: row; }
:host(.width-content) .tab { flex-basis: content; }
:host(.width-equal) .tab { flex-basis: 0px; }
:host(.icon-side) .icon, :host(.compact.icon-above) .icon { margin: 0px 4px 0px 0px; }
:host(.style-square) .tab.active { border-radius: 0px; }
:host(.style-rounded) .tab { border-radius: 12px 12px 0px 0px; }
:host(.spacing-m) .tab { margin-right: 8px; }
:host(.spacing-s) .tab:last-child, :host(.spacing-m) .tab:last-child { margin-right: 0px; }
:host(.placement-centered) .link-component { display: flex; justify-content: center; }
.link-component { flex-grow: 1; }
.link-component .tab { display: inline-flex; }
:host(.placement-centered) { justify-content: center; }
:host(.placement-centered) .tab { flex-grow: 0; }
.link-component:first-of-type { padding-left: var(--fds-spacing-200); }
.link-component:last-of-type { padding-right: var(--fds-spacing-200); }
a:focus { outline: none; }
.tab { box-sizing: border-box; display: flex; align-items: center; justify-content: center; flex-grow: 1; flex-shrink: 0; min-width: 74px; height: 100%; position: relative; overflow: hidden; cursor: pointer; background: transparent; text-overflow: ellipsis; }
.tab-site-navigation-bottom { padding-top: var(--fds-spacing-100); padding-bottom: var(--fds-spacing-100); gap: var(--fds-spacing-050); }
.tab-site-navigation-bottom fabric-icons-icon { display: block; min-width: 20px; min-height: 20px; }
.tab-site-navigation-bottom .title { min-height: 16px; }
:host(.in-game) .tab-site-navigation-bottom { padding-top: var(--fds-spacing-050); gap: 2px; }
.tab-site-navigation-default { padding: 6px 16px; }
.tab:last-child { border-right: none; }
.tab.active { cursor: initial; pointer-events: none; fill: var(--fill-active); color: var(--color-active); background-color: var(--background-active); }
@media (hover: hover) and (pointer: fine) {
  .tab:hover { background: var(--background-hover); color: var(--color-hover); fill: var(--fill-hover); }
  .tab.active:hover { cursor: initial; pointer-events: none; fill: var(--fill-active); color: var(--color-active); background-color: var(--background-active); }
  .tab.toggle-enabled:hover { cursor: pointer; pointer-events: all; }
}
.tab.toggle-enabled { cursor: pointer; pointer-events: all; }
.title { user-select: none; line-height: 16px; white-space: nowrap; width: 100%; display: var(--title-display); }
:host(.no-scroll) > .tab { flex-shrink: 1; min-width: auto; text-overflow: ellipsis; flex-basis: 0px; }
:host(.no-scroll) > .tab > .title { text-overflow: ellipsis; overflow: clip visible; }
:link, :visited { text-decoration: none; color: var(--color); fill: var(--fill); }
:any-link { text-decoration: none; color: var(--color); fill: var(--fill); }
:host(.site-navigation-bottom) { --tabs-background-hover: var(--site-navigation-bottom-background-hover, var(--primary)); --tabs-background-active: var(--site-navigation-bottom-background-active, var(--primary)); --tabs-color-hover: var(--site-navigation-bottom-color-hover, var(--on-primary)); --tabs-color-active: var(--site-navigation-bottom-color-active, var(--fds-on-surface-nav-color)); --site-navigation-tabs-background: transparent; --site-navigation-tabs-background-hover: var(--tabs-background-hover); --site-navigation-tabs-background-active: var(--tabs-background-active); --site-navigation-tabs-color: var(--tabs-color); --site-navigation-tabs-color-hover: var(--tabs-color-hover); --site-navigation-tabs-color-active: var(--tabs-color-active); background: var(--background); }
:host(.site-navigation-bottom.default) { background: var(--site-navigation-bottom-background, var(--alternate-surface-nav)); --site-navigation-tabs-color: var(--site-navigation-bottom-color, var(--on-alternate-surface-hi)); }
:host(.site-navigation-bottom.alternative) { background: var(--alternate-surface-nav, var(--site-navigation-bottom-background)); --site-navigation-tabs-color: var(--on-alternate-surface-hi, var(--site-navigation-bottom-color)); }
:host(.polaris-in-game) { --site-navigation-tabs-color: var(--fds-on-alternate-surface-low); --site-navigation-tabs-color-active: var(--fds-on-alternate-surface-hi); --site-navigation-tabs-background-active: transparent; }
:host(.in-game) .tab.circle-tab { border-radius: 100px; padding: var(--fds-spacing-150); height: auto; flex: 0 0 auto; align-self: center; background: var(--fds-on-alternate-surface-ulow); min-width: initial; transition: box-shadow 0.15s; }
:host(.in-game) .tab.circle-tab .title { display: none; }
:host(.in-game) .tab.circle-tab--on { fill: var(--fds-on-alternate-surface-nav-color); color: var(--fds-on-alternate-surface-nav-color); }
:host(.in-game) .tab.circle-tab:active { box-shadow: inset 0 0 0 1px var(--fds-on-alternate-surface-low); }