@layer components {
    .has-tooltip {
        @apply rtds-relative;
    }

    .has-tooltip-button {
        @apply rtds-flex rtds-w-max rtds-h-min rtds-bg-transparent rtds-p-0;
    }

    .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: 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;
        user-select: none;
        position: absolute;
        z-index: var(--_tooltip-z-index);
    
    
        @apply rtds-font-medium rtds-background-07 rtds-rounded-md rtds-text-sm rtds-leading-none rtds-shadow-md rtds-content-inverse;
    }

    
    .rtds-tooltip::after {
        content: "";
        background: var(--_tooltip-bg);
        position: absolute;
        z-index: -1;
        inset: 0;
        mask: var(--_tip);
        @apply rtds-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;
        @apply rtds-text-xs;
    }
    
}