.has-tooltip {
    position: relative;
}
.has-tooltip-button {
    height: -moz-min-content;
    height: min-content;
    width: -moz-max-content;
    width: max-content;
    background-color: transparent;
    padding: var(--spacing-0);
    display: flex;
}
.rtds-tooltip {
        --_tooltip-padding-inline: 1.5ch;
        --_tooltip-padding-block: 0.75ch;
        --_toolip-triangle-size: 0.5rem;
    
        --tooltip-wrapper-width: var(--wrapper-width);
    
        --_tooltip-bottom-tip: conic-gradient(
                from -30deg at bottom,
                rgba(0, 0, 0, 0),
                #000 1deg 60deg,
                rgba(0, 0, 0, 0) 61deg
            )
            bottom / 100% 50% no-repeat;
        --_tooltip-top-tip: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top / 100% 50% no-repeat;
    
        --_tooltip-z-index: var(--tooltip-z-index, 1);
    
        --isRTL: -1;
    
        opacity: 0;
        visibility: hidden;
        inline-size: -moz-max-content;
        inline-size: max-content;
        max-inline-size: 25ch;

        transform: translateX(var(--_tooltip-x, 0)) translateY(var(--_tooltip-y, 0));
        transition: opacity 0.2s ease, transform 0.2s ease;
    
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
        position: absolute;
        z-index: var(--_tooltip-z-index);
        font-size: var(--fontsize-text-sm);
        font-weight: 500;
        color: var(--color-content-inverse);
        background-color: var(--color-background-07);
    border-radius: 0.375rem;
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    line-height: 1;
    }
.rtds-tooltip::after {
        content: "";
        background: var(--_tooltip-bg);
        position: absolute;
        z-index: -1;
        inset: 0;
        -webkit-mask: var(--_tip);
                mask: var(--_tip);
        background-color: var(--color-background-07);
    }
.rtds-tooltip-button:is(:hover, :active) + .rtds-tooltip,
    .is-visible .rtds-tooltip-button + .rtds-tooltip {
        padding: var(--_tooltip-padding-block) var(--_tooltip-padding-inline);
        opacity: 1;
        visibility: visible;
        pointer-events: auto; /* Abilita l'interazione con il mouse sul tooltip visibile */
        transition-delay: 200ms;
    }
.has-tooltip-top .rtds-tooltip {
        bottom: calc(100% + var(--_tooltip-padding-block) + var(--_toolip-triangle-size));
    }
/* Posizionamento centrato esplicito */
.has-tooltip-top .rtds-tooltip.is-centered {
        left: 50%;
        --_tooltip-x: calc(50% * var(--isRTL));
    }
.has-tooltip-top .rtds-tooltip::after {
        --_tip: var(--_tooltip-bottom-tip);
        bottom: calc(var(--_toolip-triangle-size) * -1);
        border-block-end: var(--_toolip-triangle-size) solid transparent;
    }
.has-tooltip-top .rtds-tooltip.is-left-aligned {
        left: 0;
        --_tooltip-x: 0;
        text-align: left;
    }
/*.has-tooltip-top .rtds-tooltip.is-left-aligned::after {
        right: calc(100% - (var(--tooltip-wrapper-width) * 1px));
    }*/
.has-tooltip-top .rtds-tooltip.is-right-aligned {
        left: 100%;
        --_tooltip-x: -100%;
        text-align: left;
    }
/*.has-tooltip-top .rtds-tooltip.is-right-aligned::after {
        left: calc(100% - (var(--tooltip-wrapper-width) * 1px));
    }*/
.has-tooltip-bottom .rtds-tooltip {
        top: calc(100% + var(--_tooltip-padding-block) + var(--_toolip-triangle-size));
    }
/* Posizionamento centrato esplicito */
.has-tooltip-bottom .rtds-tooltip.is-centered {
        left: 50%;
        --_tooltip-x: calc(50% * var(--isRTL));
    }
.has-tooltip-bottom .rtds-tooltip::after {
        --_tip: var(--_tooltip-top-tip);
        top: calc(var(--_toolip-triangle-size) * -1);
        border-block-start: var(--_toolip-triangle-size) solid transparent;
    }
.has-tooltip-bottom .rtds-tooltip.is-left-aligned {
        left: 0;
        --_tooltip-x: 0;
        text-align: left;
    }
.has-tooltip-top .rtds-tooltip.is-left-aligned::after,
    .has-tooltip-bottom .rtds-tooltip.is-left-aligned::after {
        /*right: var(--tooltip-wrapper-width);*/
        width: 0.5rem;
        left: 1rem;
    }
.has-tooltip-bottom .rtds-tooltip.is-right-aligned {
        left: 100%;
        --_tooltip-x: -100%;
        text-align: left;
    }
.has-tooltip-top .rtds-tooltip.is-right-aligned::after,
    .has-tooltip-bottom .rtds-tooltip.is-right-aligned::after {
        width: 0.5rem;
        right: 1rem;
        left: auto;
    }
/* tooltip small */
.rtds-tooltip--sm {
        --_tooltip-padding-block: 0.25rem;
        --_tooltip-padding-inline: 0.5rem;
        max-inline-size: 20ch;
        font-size: var(--fontsize-text-xs);
    }