[data-css-only-tooltip]{cursor:pointer;position:relative}[data-css-only-tooltip]::after{background-color:#fff;font-family:Roboto,sans-serif;font-weight:400;color:#222;font-size:14px;padding:8px 12px;height:fit-content;width:fit-content;white-space:nowrap;border-radius:6px;position:absolute;text-align:center;bottom:0;left:50%;content:attr(data-css-only-tooltip);transform:translate(-50%,110%) scale(0);transform-origin:top;transition:transform .14s;box-shadow:0 4px 14px 0 rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05);z-index:200}[data-css-only-tooltip]:hover:after{display:block;transform:translate(-50%,110%) scale(1)}[data-css-only-tooltip-props~=dark]::after{background-color:#222;color:#fff}[data-css-only-tooltip-props~=right]::after{transform:translate(0,30%) scale(0);right:0;left:100%;transform-origin:left}[data-css-only-tooltip-props~=right]:hover:after{transform:translate(10%,30%) scale(1)}[data-css-only-tooltip-props~=left]::after{transform:translate(-100%,30%) scale(0);transform-origin:right;right:0;left:0}[data-css-only-tooltip-props~=left]:hover:after{transform:translate(-110%,30%) scale(1);transform-origin:right}[data-css-only-tooltip-props~=top]::after{transform:translate(-50%,-100%) scale(0);transform-origin:bottom;right:50%;left:50%;top:0}[data-css-only-tooltip-props~=top]:hover:after{transform:translate(-50%,-120%) scale(1)}[data-css-only-tooltip-props~=bottom]::after{transform:translate(-50%,110%) scale(0);transform-origin:top;right:50%;left:50%;bottom:0;top:unset}[data-css-only-tooltip-props~=bottom]:hover:after{transform:translate(-50%,120%) scale(1)}