:host { display: inline-block; position: relative; }
.tooltip { position: absolute; margin: 0px; border: 0px; z-index: var(--fds-z-index-1000); display: none; padding: var(--fds-spacing-100) var(--fds-spacing-150); justify-content: center; align-items: center; font: var(--fds-paragraphs-small); border-radius: var(--fds-border-radius-container-default); box-shadow: none; max-width: 208px; width: max-content; }
.tooltip.visible { display: inline-flex; }
:host([theme="on-surface"]) .tooltip { border: 1px solid var(--fds-on-surface-ulow); background-color: var(--fdsp-tooltip-on-surface-tooltip-background-color, var(--fds-surface)); color: var(--fdsp-tooltip-on-surface-tooltip-color, var(--fds-on-surface-hi)); }
:host([theme="on-alternate-surface"]) .tooltip { border: 1px solid var(--fds-on-alternate-surface-ulow); background-color: var(   --fdsp-tooltip-on-alternate-surface-tooltip-background-color,   var(--fds-alternate-surface-variant)  ); color: var(--fdsp-tooltip-on-alternate-surface-tooltip-color, var(--fds-on-alternate-surface-hi)); }
:host([elevation="on"]) .tooltip { box-shadow: var(--fds-elevation-const-alternate-surface-medium); }