:host { display: inline-block; }
.tta-container { display: inline-flex; align-items: center; justify-content: center; position: relative; min-width: 48px; min-height: 48px; gap: var(--fds-spacing-150); background: transparent; border: none; }
:host([theme="on-surface"]) { --tta-icon-color: var(--fds-on-surface-m); --tta-text-color: var(--fds-on-surface-hi); }
:host([theme="on-alternate-surface"]) { --tta-icon-color: var(--fds-on-alternate-surface-m); --tta-text-color: var(--fds-on-alternate-surface-hi); }
:host([theme="on-header"]) { --tta-icon-color: var(--libfds-tta-on-header-icon-color, var(--fds-on-header)); --tta-text-color: var(--libfds-tta-on-header-text-color, var(--fds-on-header)); }
:host([theme="on-surface-color"]) { --tta-icon-color: var(--fds-on-surface-color); --tta-text-color: var(--fds-on-surface-color); }
:host([theme="on-alternate-surface-color"]) { --tta-icon-color: var(--fds-on-alternate-surface-color); --tta-text-color: var(--fds-on-alternate-surface-color); }
:host([theme="on-surface-color"]) { --tta-icon-color: var(--fds-on-surface-color); --tta-text-color: var(--fds-on-surface-color); }
:host([theme="on-alternate-surface-color"]) { --tta-icon-color: var(--fds-on-alternate-surface-color); --tta-text-color: var(--fds-on-alternate-surface-color); }
:host([clickable="true"]) .tta-container, :host([clickable]) .tta-container { cursor: pointer; }
:host([clickable="false"]) .tta-container, :host(:not([clickable])) .tta-container { cursor: default; }
.tta-icon { color: var(--tta-icon-color); }
.tta-text { color: var(--tta-text-color); font: var(--fds-paragraphs-lead-bold); white-space: nowrap; }
.tta-logo { height: 24px; width: auto; }
.tta-icon-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.tta-badge { position: absolute; margin-bottom: var(--fds-spacing-250); margin-left: var(--fds-spacing-250); }
:host([content="icon-text"]) .tta-container, :host([content="logo"]) .tta-container, :host([content="text-icon"]) .tta-container { flex-direction: row; padding-left: var(--fds-spacing-150); padding-right: var(--fds-spacing-150); }
:host([content="icon"]) .tta-container, :host([content="text"]) .tta-container { flex-direction: row; }