:host { display: block; cursor: pointer; color: var(--fds-on-surface-m); }
:host([size="small"]) { font: var(--fds-paragraphs-small-bold, var(--paragraphs-small-bold)); }
:host([size="medium"]) { font: var(--fds-paragraphs-regular-bold, var(--paragraphs-regular-bold)); }
:host([size="large"]) { font: var(--fds-paragraphs-lead-bold, var(--paragraphs-lead-bold)); }
:host([size="small"]) .icon-on-img { height: var(--fds-spacing-200); width: var(--fds-spacing-200); }
:host([size="medium"]) .icon-on-img { height: var(--fds-spacing-250); width: var(--fds-spacing-250); }
:host([size="large"]) .icon-on-img { height: var(--fds-spacing-300); width: var(--fds-spacing-300); }
.icon-on-top { display: inline-flex; flex-direction: column; align-items: center; }
.position-absolute-badge { position: absolute; transform: translate(50%, -145%); }
.tab { position: relative; gap: var(--fds-spacing-100); padding: var(--fds-spacing-150); width: max-content; text-decoration: none; }
.slimTab { position: relative; gap: var(--fds-spacing-100); padding: var(--fds-spacing-150); width: max-content; text-decoration: none; font: var(--fds-paragraphs-regular-bold); }
.tab-flex { display: inline-flex; justify-content: center; align-items: center; }
.tab.surface { fill: var(--fds-background); border-color: var(--fds-on-surface-low); background-color: var(--fds-surface); }
.tab.surface.active { color: var(--fds-on-surface-m); }
.tab.on-surface { fill: var(--fds-background); border-color: var(--fds-on-surface-low); background-color: var(--fds-surface-variant); }
.tab.on-surface.active { color: var(--fds-on-surface-color); }
.tab.on-header { color: var(--libfds-tab_tab-on-header_color, var(--fds-on-header)); background-color: var(--libfds-tab_tab-on-header_background-color, transparent); }
.tab.on-header:hover { background-color: var(--libfds-tab_tab-on-header_hover_background-color, var(--fds-header-interaction-medium)); }
.tab.on-header.active { background-color: var(--libfds-tab_tab-on-header_active_background-color, var(--fds-header-interaction-medium)); }
.slimTab.surface { fill: var(--fds-background); border-color: var(--fds-on-surface-low); background-color: var(--fds-surface); }
.slimTab.surface:hover { box-shadow: 0 2px 0 var(--fds-on-surface-low); }
.slimTab.surface.active { color: var(--fds-on-surface-m); box-shadow: 0 2px 0 var(--fds-on-surface-color, var(--on-surface-color)); }
.slimTab.on-surface { fill: var(--fds-background); border-color: var(--fds-on-surface-low); background-color: var(--fds-surface-variant); }
.slimTab.on-surface:hover { box-shadow: 0 2px 0 var(--fds-on-surface-low); }
.slimTab.on-surface.active { color: var(--fds-on-surface-color); box-shadow: 0 2px 0 var(--fds-on-surface-color, var(--on-surface-color)); }
.slimTab.on-header { color: var(--libfds-tab_tab-on-header_color, var(--fds-on-header)); background-color: var(--libfds-tab_tab-on-header_background-color, transparent); }
.slimTab.on-header:hover { background-color: var(--libfds-tab_tab-on-header_hover_background-color, var(--fds-header-interaction-medium)); }
.slimTab.on-header.active { background-color: var(--libfds-tab_tab-on-header_active_background-color, var(--fds-header-interaction-medium)); }
.chip { gap: var(--fds-spacing-100); padding: var(--fds-spacing-150); border: 1px solid transparent; border-radius: var(--fds-border-radius-input-alternate); width: max-content; white-space: nowrap; }
:host([stretch]) .chip { width: 100%; box-sizing: border-box; justify-content: center; }
:host([stretch]) .tab { width: 100%; padding: var(--fds-spacing-150) 0; }
.chip.surface { fill: var(--fds-on-surface-m); border-color: var(--fds-on-surface-ulow); background-color: var(--fds-surface); }
.chip.surface:hover { border-color: var(--fds-on-surface-low); }
.chip.surface.active { color: var(--fds-on-surface-m); border-color: var(--fds-on-surface-color); background-color: var(--fds-surface-accent); }
.chip.on-surface { fill: var(--fds-on-surface-m); border-color: var(--fds-on-surface-ulow); background-color: var(--fds-surface-variant); }
.chip.on-surface:hover { border-color: var(--fds-on-surface-low); }
.chip.on-surface.active { color: var(--fds-on-surface-color); border-color: var(--fds-on-surface-color); background-color: var(--fds-surface-accent); }
.chip.on-header { color: var(--fds-on-header); border-color: var(--fds-on-header); }
.chip.on-header:hover { background-color: var(--header-interaction-medium); }
.chip.on-header.active { border-color: var(--fds-on-btn-alternate-accent); background-color: var(--fds-btn-alternate-accent); }
button { font: inherit; color: inherit; cursor: pointer; border: inherit; }
a:focus-visible { outline: none; }