tool-tip {
    --_p-inline: 1.5ch;
    --_p-block: 1.5ch;
    --_triangle-size: 7px;
    --_shadow-alpha: 50%;
    --isRTL: -1;
    --_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;
    --_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;
    --_right-tip: conic-gradient(from -120deg at right, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) right / 50% 100% no-repeat;
    --_left-tip: conic-gradient(from 60deg at left, rgba(0,0,0,0), #000 1deg 60deg, rgba(0,0,0,0) 61deg) left / 50% 100% no-repeat;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    opacity: 0;
    transform: translate(var(--_x, 0)) translateY(var(--_y, 0));
    transition: opacity .2s ease,transform .2s ease;
    position: absolute;
    z-index: 2;
    inline-size: -webkit-max-content;
    inline-size: -moz-max-content;
    inline-size: max-content;
    max-inline-size: 25ch;
    text-align: start;
    font-size: 11px;
    font-family: var(--font-family--secondary);
    line-height: initial;
    padding: var(--_p-block) var(--_p-inline);
    margin: 0;
    border-radius: 5px;
    background: var(--color--blue);
    color: var(--color--white);
}

@media (prefers-color-scheme: light) {
    tool-tip {
        --_bg: white;
        --_shadow-alpha: 15%
    }
}

[dir=rtl] tool-tip {
    --isRTL: 1
}

:has(> tool-tip) {
    position: relative;
    cursor: help;
}

:has(> tool-tip):is(:hover,:focus-visible,:active)>tool-tip {
    opacity:1;
    transition-delay: .2s
}

tool-tip:before {
    content:"; Has tooltip: ";
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute
}

tool-tip:after {
    content:"";
    background: var(--color--blue);
    position: absolute;
    z-index: -1;
    inset: 0;
    -webkit-mask: var(--_tip);
    mask: var(--_tip)
}

tool-tip:is([tip-position="top"],[tip-position="block-start"],:not([tip-position]),[tip-position="bottom"],[tip-position="block-end"]) {
    text-align:center
}

tool-tip:is([tip-position="top"],[tip-position="block-start"],:not([tip-position])) {
    inset-inline-start:50%;
    inset-block-end: calc(100% + var(--_p-block) + var(--_triangle-size));
    --_x: calc(50% * var(--isRTL))
}

@media (prefers-reduced-motion: no-preference) {
    :has(> tool-tip:is([tip-position="top"],[tip-position="block-start"],:not([tip-position]))):not(:hover):not(:active) tool-tip {
        --_y: 3px
    }
}

tool-tip:is([tip-position="top"],[tip-position="block-start"],:not([tip-position])):after {
    --_tip: var(--_bottom-tip);
    inset-block-end: calc(var(--_triangle-size) * -1);
    -webkit-border-after: var(--_triangle-size) solid transparent;
    border-block-end:var(--_triangle-size) solid transparent}

tool-tip:is([tip-position="right"],[tip-position="inline-end"]) {
    inset-inline-start:calc(100% + var(--_p-inline) + var(--_triangle-size));
    inset-block-end: 50%;
    --_y: 50%
}

@media (prefers-reduced-motion: no-preference) {
    :has(> tool-tip:is([tip-position="right"],[tip-position="inline-end"])):not(:hover):not(:active) tool-tip {
        --_x: calc(var(--isRTL) * -3px * -1)
    }
}

tool-tip:is([tip-position="right"],[tip-position="inline-end"]):after {
    --_tip: var(--_left-tip);
    inset-inline-start: calc(var(--_triangle-size) * -1);
    -webkit-border-start: var(--_triangle-size) solid transparent;
    border-inline-start:var(--_triangle-size) solid transparent}

[dir=rtl] tool-tip:is([tip-position="right"],[tip-position="inline-end"]):after {
    --_tip: var(--_right-tip)
}

tool-tip:is([tip-position="bottom"],[tip-position="block-end"]) {
    inset-inline-start:50%;
    inset-block-start: calc(100% + var(--_p-block) + var(--_triangle-size));
    --_x: calc(50% * var(--isRTL))
}

@media (prefers-reduced-motion: no-preference) {
    :has(> tool-tip:is([tip-position="bottom"],[tip-position="block-end"])):not(:hover):not(:active) tool-tip {
        --_y: -3px
    }
}

tool-tip:is([tip-position="bottom"],[tip-position="block-end"]):after {
    --_tip: var(--_top-tip);
    inset-block-start: calc(var(--_triangle-size) * -1);
    -webkit-border-before: var(--_triangle-size) solid transparent;
    border-block-start:var(--_triangle-size) solid transparent}

tool-tip:is([tip-position="left"],[tip-position="inline-start"]) {
    inset-inline-end:calc(100% + var(--_p-inline) + var(--_triangle-size));
    inset-block-end: 50%;
    --_y: 50%
}

@media (prefers-reduced-motion: no-preference) {
    :has(> tool-tip:is([tip-position="left"],[tip-position="inline-start"])):not(:hover):not(:active) tool-tip {
        --_x: calc(var(--isRTL) * 3px * -1)
    }
}

tool-tip:is([tip-position="left"],[tip-position="inline-start"]):after {
    --_tip: var(--_right-tip);
    inset-inline-end: calc(var(--_triangle-size) * -1);
    -webkit-border-end: var(--_triangle-size) solid transparent;
    border-inline-end:var(--_triangle-size) solid transparent}

[dir=rtl] tool-tip:is([tip-position="left"],[tip-position="inline-start"]):after {
    --_tip: var(--_left-tip)
}