@layer components{.tooltip{--tooltip-bg:var(--c-tooltip-bg,var(--s-color-text-default));--tooltip-color:var(--c-tooltip-color,var(--s-color-text-inverted));--tooltip-font-family:var(--c-tooltip-font-family,var(--s-type-label-tiny-font-family));--tooltip-font-size:var(--c-tooltip-font-size,var(--s-type-label-tiny-font-size));--tooltip-line-height:var(--c-tooltip-line-height,var(--s-type-label-tiny-line-height));--tooltip-letter-spacing:var(--c-tooltip-letter-spacing,var(--s-type-label-tiny-letter-spacing));--tooltip-font-weight:var(--c-tooltip-font-weight,var(--s-type-label-tiny-font-weight));--tooltip-padding:var(--c-tooltip-padding,var(--s-spacing-2));--tooltip-z-index:var(--c-tooltip-z-index,9999);--tooltip-offset:var(--c-tooltip-offset,8px);--tooltip-arrow-size:var(--c-tooltip-arrow-size,8px);--tooltip-max-width:var(--c-tooltip-max-width,20rem);--tooltip-viewport-margin:8px;--tooltip-shift:0px;--tooltip-arrow-overlap:calc(var(--tooltip-arrow-size) / -2);--tooltip-arrow-inset:var(--c-tooltip-arrow-inset,12px);--tooltip-arrow-min:8px;--tooltip-arrow-max:calc(100% - 8px - var(--tooltip-arrow-size));display:var(--tooltip--display,inline-block);z-index:var(--tooltip--z-index);line-height:0;position:relative;& .trigger{&>[class=btn]{--btn--padding:0;--btn--mh:none;--svg--fill:var(--tooltip-svg-trigger--fill)}}& .box{--btn--z-index:100;z-index:var(--tooltip-z-index);width:max-content;max-width:min(var(--tooltip-max-width),calc(100vw - 2 * var(--tooltip-viewport-margin)));background-color:var(--tooltip-bg);color:var(--tooltip-color);font-family:var(--tooltip-font-family);font-size:var(--tooltip-font-size);line-height:var(--tooltip-line-height);letter-spacing:var(--tooltip-letter-spacing);font-weight:var(--tooltip-font-weight);pointer-events:none;overflow-wrap:break-word;opacity:0;visibility:hidden;border-radius:4px;position:absolute;& .content{padding:var(--tooltip-padding)}& .arrow{width:var(--tooltip-arrow-size);height:var(--tooltip-arrow-size);background-color:var(--tooltip-bg);position:absolute;rotate:45deg}}&:is(:hover,:has(:focus-visible)) .box{opacity:1;visibility:visible}&.tooltip--floating-host{z-index:var(--tooltip-z-index);pointer-events:none;line-height:0;display:block;overflow:visible}&.tooltip--top{& .box{translate:calc(-50% + var(--tooltip-shift)) 0;margin-bottom:var(--tooltip-offset);bottom:100%;left:50%}& .arrow{bottom:var(--tooltip-arrow-overlap);left:clamp(var(--tooltip-arrow-min),calc(50% - var(--tooltip-arrow-size) / 2 - var(--tooltip-shift)),var(--tooltip-arrow-max))}}&.tooltip--top-start{& .box{translate:var(--tooltip-shift) 0;margin-bottom:var(--tooltip-offset);bottom:100%;left:0}& .arrow{bottom:var(--tooltip-arrow-overlap);left:clamp(var(--tooltip-arrow-min),calc(var(--tooltip-arrow-inset) - var(--tooltip-shift)),var(--tooltip-arrow-max))}}&.tooltip--top-end{& .box{translate:var(--tooltip-shift) 0;margin-bottom:var(--tooltip-offset);bottom:100%;right:0}& .arrow{bottom:var(--tooltip-arrow-overlap);right:clamp(var(--tooltip-arrow-min),calc(var(--tooltip-arrow-inset) + var(--tooltip-shift)),var(--tooltip-arrow-max))}}&.tooltip--bottom{& .box{translate:calc(-50% + var(--tooltip-shift)) 0;margin-top:var(--tooltip-offset);top:100%;left:50%}& .arrow{top:var(--tooltip-arrow-overlap);left:clamp(var(--tooltip-arrow-min),calc(50% - var(--tooltip-arrow-size) / 2 - var(--tooltip-shift)),var(--tooltip-arrow-max))}}&.tooltip--bottom-start{& .box{translate:var(--tooltip-shift) 0;margin-top:var(--tooltip-offset);top:100%;left:0}& .arrow{top:var(--tooltip-arrow-overlap);left:clamp(var(--tooltip-arrow-min),calc(var(--tooltip-arrow-inset) - var(--tooltip-shift)),var(--tooltip-arrow-max))}}&.tooltip--bottom-end{& .box{translate:var(--tooltip-shift) 0;margin-top:var(--tooltip-offset);top:100%;right:0}& .arrow{top:var(--tooltip-arrow-overlap);right:clamp(var(--tooltip-arrow-min),calc(var(--tooltip-arrow-inset) + var(--tooltip-shift)),var(--tooltip-arrow-max))}}&.tooltip--left{& .box{translate:0 calc(-50% + var(--tooltip-shift));margin-right:var(--tooltip-offset);top:50%;right:100%}& .arrow{right:var(--tooltip-arrow-overlap);top:clamp(var(--tooltip-arrow-min),calc(50% - var(--tooltip-arrow-size) / 2 - var(--tooltip-shift)),var(--tooltip-arrow-max))}}&.tooltip--left-start{& .box{translate:0 var(--tooltip-shift);margin-right:var(--tooltip-offset);top:0;right:100%}& .arrow{right:var(--tooltip-arrow-overlap);top:clamp(var(--tooltip-arrow-min),calc(var(--tooltip-arrow-inset) - var(--tooltip-shift)),var(--tooltip-arrow-max))}}&.tooltip--left-end{& .box{translate:0 var(--tooltip-shift);margin-right:var(--tooltip-offset);bottom:0;right:100%}& .arrow{right:var(--tooltip-arrow-overlap);bottom:clamp(var(--tooltip-arrow-min),calc(var(--tooltip-arrow-inset) + var(--tooltip-shift)),var(--tooltip-arrow-max))}}&.tooltip--right{& .box{translate:0 calc(-50% + var(--tooltip-shift));margin-left:var(--tooltip-offset);top:50%;left:100%}& .arrow{left:var(--tooltip-arrow-overlap);top:clamp(var(--tooltip-arrow-min),calc(50% - var(--tooltip-arrow-size) / 2 - var(--tooltip-shift)),var(--tooltip-arrow-max))}}&.tooltip--right-start{& .box{translate:0 var(--tooltip-shift);margin-left:var(--tooltip-offset);top:0;left:100%}& .arrow{left:var(--tooltip-arrow-overlap);top:clamp(var(--tooltip-arrow-min),calc(var(--tooltip-arrow-inset) - var(--tooltip-shift)),var(--tooltip-arrow-max))}}&.tooltip--right-end{& .box{translate:0 var(--tooltip-shift);margin-left:var(--tooltip-offset);bottom:0;left:100%}& .arrow{left:var(--tooltip-arrow-overlap);bottom:clamp(var(--tooltip-arrow-min),calc(var(--tooltip-arrow-inset) + var(--tooltip-shift)),var(--tooltip-arrow-max))}}}}