@layer atoms{.phxsg-tooltip{--this-tooltip-background-color: var(--color-white);--this-tooltip-border-color: var(--color-grey-100);--this-tooltip-text-color: var(--color-text-standard);--this-tooltip-gutter: var(--spacing-sm);--this-tooltip-arrow-width: 12px;--this-tooltip-arrow-background-color: var(--this-tooltip-background-color);--this-tooltip-arrow-border-color: var(--this-tooltip-border-color);&.phxsg-tooltip--dark-theme{--this-tooltip-background-color: var(--color-black);--this-tooltip-text-color: var(--color-white);--this-tooltip-border-color: var(--color-black)}.phxsg-theme-black &{--this-tooltip-background-color: var(--color-black);--this-tooltip-text-color: var(--color-white);--this-tooltip-border-color: var(--color-grey-100)}}.phxsg-tooltip__content{display:flex;flex-direction:column;gap:var(--spacing-sm);align-items:center;padding-block:var(--spacing-sm);padding-inline:var(--spacing-base);width:max-content;max-width:320px;color:var(--this-tooltip-text-color);background-color:var(--this-tooltip-background-color);border:solid 1px var(--this-tooltip-border-color);border-radius:1px;transition:opacity var(--ease-in-out) var(--duration-short);&:has(.phxsg-tooltip__picture){padding-block:var(--spacing-base)}}.phxsg-tooltip__trigger--full{width:100%}.phxsg-tooltip--floating,.phxsg-tooltip--floating-reverse{width:calc(100% - var(--this-tooltip-gutter) * 2);position:absolute;z-index:1;.phxsg-tooltip__trigger{display:inline-block;pointer-events:initial}.phxsg-tooltip__content{max-width:100%}}.phxsg-tooltip--floating{bottom:var(--this-tooltip-gutter);inset-inline-end:var(--this-tooltip-gutter);text-align:end}.phxsg-tooltip--floating-reverse{top:var(--this-tooltip-gutter);inset-inline-start:var(--this-tooltip-gutter)}}