tool-tip {
    --tt-p-inline: 4px;
    --tt-p-block: 4px;
    --tt-triangle-size: 7px;
    --tt-bg: #242833;
    --tt-is-rtl: -1;
    pointer-events: none;
    opacity: 0;
    transform: translateX(var(--tt-x, 0)) translateY(var(--tt-y, 0));
    transition: opacity .2s ease, transform .2s ease;
    position: absolute;
    z-index: 1;
    max-width: min(80vw, 250px);
    font-size: 14px;
    padding: 8px 12px;
    margin: 0;
    border-radius: 5px;
    background: var(--tt-bg);
    color: #fff;
    word-break: break-word;
    white-space: normal;
    line-height: 1.4;
    width: max-content
}

tool-tip::after {
    content: "";
    background: var(--tt-bg);
    position: absolute;
    z-index: -1;
    inset: 0;
    width: 16px;
    height: var(--tt-triangle-size);
    left: calc(50% - 8px);
    clip-path: path("M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z")
}

tool-tip[tip-position="top"],
tool-tip:not([tip-position]) {
    inset-inline-start: 50%;
    inset-block-end: calc(100% + var(--tt-p-block) + var(--tt-triangle-size));
    --tt-x: calc(50%*var(--tt-is-rtl))
}

tool-tip[tip-position="top"]::after,
tool-tip:not([tip-position])::after {
    top: 100%;
    transform: rotate(180deg)
}

tool-tip[tip-position="right"] {
    inset-inline-start: calc(100% + var(--tt-p-inline) + var(--tt-triangle-size));
    inset-block-end: 50%;
    --tt-y: 50%
}

tool-tip[tip-position="right"]::after {
    left: -12px;
    transform: rotate(-90deg);
    top: calc(50% - 4px)
}

tool-tip[tip-position="right"]:dir(rtl)::after {
    left: calc(100% - 4px);
    transform: rotate(90deg);
    top: calc(50% - 4px)
}

tool-tip[tip-position="bottom"] {
    inset-inline-start: 50%;
    inset-block-start: calc(100% + var(--tt-p-block) + var(--tt-triangle-size));
    --tt-x: calc(50%*var(--tt-is-rtl))
}

tool-tip[tip-position="bottom"]::after {
    --tt-tip: var(--tt-top-tip);
    inset-block-start: calc(var(--tt-triangle-size)*-1);
    border-block-start: var(--tt-triangle-size) solid transparent
}

tool-tip[tip-position="left"] {
    inset-inline-end: calc(100% + var(--tt-p-inline) + var(--tt-triangle-size));
    inset-block-end: 50%;
    --tt-y: 50%
}

tool-tip[tip-position="left"]::after {
    left: calc(100% - 4px);
    transform: rotate(90deg);
    top: calc(50% - 4px)
}

tool-tip[tip-position="left"]:dir(rtl)::after {
    left: -12px;
    transform: rotate(-90deg);
    top: calc(50% - 4px)
}

[dir="rtl"] tool-tip {
    --tt-is-rtl: 1
}

.has_tool-tip {
    position: relative
}

.has_tool-tip.tool-tip--open>tool-tip,
.has_tool-tip:hover>tool-tip:not([controlled]),
.has_tool-tip:focus-visible>tool-tip:not([controlled]),
.has_tool-tip:active>tool-tip:not([controlled]) {
    opacity: .9;
    transition-delay: .2s
}