.Sui-Tooltip{

    --sui-t-t: 100%;
    --sui-t-b: auto;
    --sui-t-l: 50%;
    --sui-t-r: auto;
    --sui-t-tx: 50%;
    --sui-t-ty: 0;
    --sui-t-radius-tl: theme('sui.radius.card');
    --sui-t-radius-tr: theme('sui.radius.card');
    --sui-t-radius-bl: theme('sui.radius.card');
    --sui-t-radius-br: theme('sui.radius.card');

    @apply relative;

    &__Popover{
        @apply absolute z-dropdown ;
        top: var(--sui-t-t);
        bottom: var(--sui-t-b);
        left: var(--sui-t-l);
        right: var(--sui-t-r);
        transform: translate(var(--sui-t-tx),var(--sui-t-ty));
    }
    &__Card{
        @apply flex px-1.5 py-0.5
            rounded-tl-[var(--sui-t-radius-tl)]
            rounded-tr-[var(--sui-t-radius-tr)]
            rounded-bl-[var(--sui-t-radius-bl)]
            rounded-br-[var(--sui-t-radius-br)]
        ;
    }

    &__Arrow{
        @apply hidden w-0 h-0 border-solid absolute;
    }

    &--top{
        --sui-t-t: auto;
        --sui-t-b: 100%;
        --sui-t-l: 50%;
        --sui-t-r: auto;
        --sui-t-tx: -50%;
        --sui-t-ty: 0;

        .Sui-Tooltip__Arrow{
            @apply block left-1/2 top-full -translate-x-1/2
            border-t-[4px] border-t-[color:var(--sui-card-bg)]
            border-r-[5px] border-r-transparent
            border-b-[0px] border-b-transparent
            border-l-[5px] border-l-transparent
            ;
        }
    }
    &--bottom{
        --sui-t-t: 100%;
        --sui-t-b: auto;
        --sui-t-l: 50%;
        --sui-t-r: auto;
        --sui-t-tx: -50%;
        --sui-t-ty: 0;
        .Sui-Tooltip__Arrow{
            @apply block left-1/2 bottom-full -translate-x-1/2
            border-t-[0px] border-t-transparent
            border-r-[5px] border-r-transparent
            border-b-[4px] border-b-[color:var(--sui-card-bg)]
            border-l-[5px] border-l-transparent
            ;
        }
    }
    &--left{
        --sui-t-t: 50%;
        --sui-t-b: auto;
        --sui-t-l: auto;
        --sui-t-r: 100%;
        --sui-t-tx: 0;
        --sui-t-ty: -50%;
        .Sui-Tooltip__Arrow{
            @apply block left-full top-1/2 -translate-y-1/2
            border-t-[3px] border-t-transparent
            border-r-[0px] border-r-transparent
            border-b-[3px] border-b-transparent
            border-l-[4px] border-l-[color:var(--sui-card-bg)]
            ;
        }
    }
    &--right{
        --sui-t-t: 50%;
        --sui-t-b: auto;
        --sui-t-l: 100%;
        --sui-t-r: auto;
        --sui-t-tx: 0;
        --sui-t-ty: -50%;
        .Sui-Tooltip__Arrow{
            @apply block right-full top-1/2 -translate-y-1/2
            border-t-[3px] border-t-transparent
            border-r-[4px] border-r-[color:var(--sui-card-bg)]
            border-b-[3px] border-b-transparent
            border-l-[0px] border-l-transparent
            ;
        }
    }
    &--top-left{
        --sui-t-t: auto;
        --sui-t-b: 100%;
        --sui-t-l: auto;
        --sui-t-r: 100%;
        --sui-t-tx: 0;
        --sui-t-ty: 0;
        --sui-t-radius-br: 0;
    }
    &--top-right{
        --sui-t-t: auto;
        --sui-t-b: 100%;
        --sui-t-l: 100%;
        --sui-t-r: auto;
        --sui-t-tx: 0;
        --sui-t-ty: 0;
        --sui-t-radius-bl: 0;
    }
    &--bottom-left{
        --sui-t-t: 100%;
        --sui-t-b: auto;
        --sui-t-l: auto;
        --sui-t-r: 100%;
        --sui-t-tx: 0;
        --sui-t-ty: 0;
        --sui-t-radius-tr: 0;
    }
    &--bottom-right{
        --sui-t-t: 100%;
        --sui-t-b: auto;
        --sui-t-l: 100%;
        --sui-t-r: auto;
        --sui-t-tx: 0;
        --sui-t-ty: 0;
        --sui-t-radius-tl: 0;
    }
}
span.Sui-Tooltip{
    @apply inline-block;
}