:host { --background-hover: var(--site-navigation-tabs-background-hover, var(--fds-on-surface-nav-low)); --background-active: var(--site-navigation-tabs-background-active, var(--fds-on-surface-nav-m)); --color: var(--site-navigation-tabs-color, var(--fds-on-alternate-surface-m)); --color-hover: var(--site-navigation-tabs-color-hover, var(--fds-on-alternate-surface-hi)); --color-active: var(--site-navigation-tabs-color-active, var(--fds-surface)); --fill: var(--site-navigation-tabs-color, var(--fds-on-alternate-surface-m)); --fill-hover: var(--site-navigation-tabs-color-hover, var(--fds-on-alternate-surface-hi)); --fill-active: var(--site-navigation-tabs-color-active, var(--fds-surface)); --divider: var(--site-navigation-tabs-divider, var(--fds-on-alternate-surface-ulow)); --font: var(--site-navigation-tabs-font, var(--fds-paragraphs-tiny)); --title-display: block; box-sizing: border-box; flex-wrap: nowrap; text-align: center; background: var(--site-navigation-tabs-background, var(--fds-alternate-surface-nav)); color: var(--color); fill: var(--fill); overflow-y: auto; font: var(--font); height: 100%; display: block; }
:host([theme="alternate"]) { background: var(--site-navigation-tabs-background-alternate, var(--fds-surface)); padding: var(--fds-spacing-100) 0; gap: var(--fds-spacing-100); justify-content: space-between; }
:host([theme="alternate"]) .tab { padding: var(--fds-spacing-100) var(--fds-spacing-200); }
: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; border-right: 1px solid var(--divider); cursor: pointer; background: var(--site-navigation-tabs-background, var(--fds-alternate-surface-nav)); text-overflow: ellipsis; scroll-snap-align: start; }
.tab-v2 { box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-width: 74px; position: relative; overflow: hidden; border-right: var(--fds-stroke-100) solid var(--fds-on-surface-low); cursor: pointer; text-overflow: ellipsis; margin-right: var(--spacing-small); }
.tab-link { display: flex; flex-direction: column; flex: 1 1 0px; min-width: 80px; scroll-snap-align: start; gap: var(--fds-spacing-100); }
.tab-site-navigation-bottom { padding: 6px 8px; }
.tab-site-navigation-default { padding: 6px 16px; }
.tab-site-navigation-default-v2 { display: flex; aspect-ratio: 1 / 1; width: 100%; border-radius: var(--site-navigation-tabs-radius, var(--fds-border-radius-container-default)); outline: var(--site-navigation-tabs-outline, 1px solid rgba(0, 0, 0, 0.12)); outline-offset: -1px; background: var(   --site-navigation-tabs-background,   radial-gradient(66.03% 66.03% at 50% 33.97%, #ffbb6f 55.29%, #ff8529 100%)  ); box-shadow: var(   --site-navigation-tabs-box-shadow,   0 2px 8px 0 rgba(0, 0, 0, 0.12),   1px 1px 2px 0 rgba(255, 255, 255, 0.6) inset  ); }
.tab:last-child { border-right: none; }
.tab.active { border-bottom: 2px solid var(--site-navigation-tabs-border-active, var(--fds-on-alternate-surface-color)); }
@media (hover: hover) and (pointer: fine) {
  .tab:hover { background: var(--background-hover); color: var(--color-hover); fill: var(--fill-hover); }
  .tab.active:hover { 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; }
.category-img { display: flex; width: 100%; justify-content: center; }
.category-img img { object-fit: cover; width: 100%; }
.title { user-select: none; line-height: 16px; white-space: nowrap; display: var(--title-display); text-align: center; }
.title-v2 { color: var(--site-navigation-tabs-title-v2-color, var(--fds-on-surface-hi)); font: var(--fds-paragraphs-small-bold); text-align: center; letter-spacing: -0.22px; }
: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); }
.carousel { display: flex; gap: var(--fds-spacing-100); padding: 0px; overflow: auto hidden; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-left: var(--fds-spacing-200); }
:host([theme="alternate"]) .carousel { padding: 0 0 0 var(--fds-spacing-200); }
:host([theme="alternate"]) .carousel::after { content: ""; flex-shrink: 0; width: var(--fds-spacing-100); }