@layer base,variables,mixins;@layer shared{.tooltip{cursor:pointer;flex-shrink:0;display:inline-flex;position:relative}.tooltip__trigger{--tooltip-trigger-size:var(--spacing-xs);cursor:pointer;flex-shrink:0;align-items:center;display:flex}@layer mixins{.tooltip__trigger,.tooltip__close{background:0 0;border:none;outline:none;padding:0}}.tooltip__trigger svg{width:var(--tooltip-trigger-size);height:var(--tooltip-trigger-size);fill:currentColor;flex-shrink:0}.tooltip__content{--tooltip-offset:0;--tooltip-top:unset;--tooltip-bottom:calc(100% + var(--tooltip-gap));--tooltip-left:50%;--tooltip-gap:var(--spacing-xs);--tooltip-bg-color:var(--background-tooltip);left:var(--tooltip-left);top:var(--tooltip-top);bottom:var(--tooltip-bottom);background:var(--tooltip-bg-color);width:max-content;transform:translateX(calc(-50% + var(--tooltip-offset) * 1px));visibility:hidden;position:absolute}.tooltip__content[data-positioned]{visibility:visible}.tooltip__content[data-side=bottom]{--tooltip-bottom:unset;--tooltip-top:calc(100% + var(--tooltip-gap))}.tooltip__arrow{--tooltip-arrow-size:var(--spacing-xs);--tooltip-arrow-side-length:calc(var(--tooltip-arrow-size) / sqrt(2));left:50%;bottom:calc(var(--tooltip-arrow-side-length)/-2);width:calc(var(--tooltip-arrow-side-length));height:calc(var(--tooltip-arrow-side-length));background-color:var(--tooltip-bg-color);transform:translateX(calc(-50% - var(--tooltip-offset) * 1px)) rotate(45deg);position:absolute}.tooltip__content[data-side=bottom] .tooltip__arrow{bottom:unset;top:calc(var(--tooltip-arrow-side-length)/-2)}.tooltip__close{--tooltip-close-size:var(--spacing-xs);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;display:flex}.tooltip__close svg{width:var(--tooltip-close-size);height:var(--tooltip-close-size);fill:currentColor}}