.tooltip{position:relative;display:inline-flex;max-width:100%;vertical-align:top}.tooltip:has(>.button--full){display:flex}.tooltip:has(>.button--full)>.button--full{flex:1 1}.tooltip__bubble{position:absolute;z-index:20;bottom:calc(100% + 8px);left:0;width:max-content;max-width:min(280px,calc(100vw - 32px));padding:7px 10px;border-radius:var(--radius-control);background:var(--color-ink);color:var(--color-surface);font:var(--type-body-small);text-align:left;visibility:hidden}.tooltip[data-open] .tooltip__bubble{visibility:visible}.tooltip:has(>.button--full) .tooltip__bubble{left:50%;transform:translateX(-50%);text-align:center}.tooltip__bubble:before{content:"";position:absolute;left:0;right:0;top:100%;height:8px}.tooltip__bubble:after{content:"";position:absolute;top:100%;left:16px;border:5px solid transparent;border-top:5px solid var(--color-ink)}.tooltip:has(>.button--full) .tooltip__bubble:after{left:calc(50% - 5px)}.tooltip[data-placement=below] .tooltip__bubble{bottom:auto;top:calc(100% + 8px)}.tooltip[data-placement=below] .tooltip__bubble:before{top:auto;bottom:100%}.tooltip[data-placement=below] .tooltip__bubble:after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--color-ink)}