@scope(.instui-tooltip){:scope{display:inline-flex;position:relative;&>[class*=-icon-]{line-height:1}&>.tip{z-index:1;padding:var(--instui-component-tooltip-padding);background:var(--instui-color-background-inverse);color:var(--instui-color-text-inverse);border-radius:var(--instui-border-radius-sm);font-family:var(--instui-component-tooltip-font-family);font-size:var(--instui-component-tooltip-font-size);font-weight:var(--instui-component-tooltip-font-weight);white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;margin-block-end:var(--instui-spacing-space-xs);transition:opacity .15s;position:absolute;inset-block-end:100%;inset-inline-start:50%;transform:translate(-50%);&.-placement-bottom{margin-block:var(--instui-spacing-space-xs) 0;inset-block:100% auto}&.-placement-start{margin:0 var(--instui-spacing-space-xs) 0 0;inset-block-end:auto;inset-inline:auto 100%;top:50%;transform:translateY(-50%)}&.-placement-end{margin:0 0 0 var(--instui-spacing-space-xs);inset-block-end:auto;inset-inline:100% auto;top:50%;transform:translateY(-50%)}}&:hover>.tip,&:focus-within>.tip{opacity:1;visibility:visible}}}