/*== start of code for tooltips ==*/
.tooltip {
    cursor: help;
    position: relative;
}

/*== common styles for both parts of tooltip ==*/
.tooltip::before,
.tooltip::after {
    opacity: 0;
    position: absolute;
    z-index: -100;
}

.tooltip:hover::before,
.tooltip:focus::before,
.tooltip:hover::after,
.tooltip:focus::after {
    opacity: 1;
    z-index: 100;
}

/*== speech bubble ==*/
.tooltip::after {
    background: #3E474F;
    border-radius: .25em;
    color: #EDEFF0;
    content: attr(data-tooltip);
    white-space: pre-wrap;
    padding: 1em;
    width: max-content;
    top: 0;
    left: 0;
    transform: translateX(calc(-100% - 10px));
}

.tooltip.dense::after {
    line-height: 0.6em;
}

/*== speech bubble right to the label ==*/
.tooltip-right::after {
    background: #3E474F;
    border-radius: .25em;
    color: #EDEFF0;
    content: attr(data-tooltip);
    padding: 1em;
    width: max-content;
    top: 0;
    left: 0;
    transform: translate(10px, 24px);
}

.tooltip-top-left::after {
    transform: translate(calc(-100% + 10px), -48px);
}

.tooltip-bottom-left::after {
    transform: translate(calc(-100% + 10px), 24px);
}

/*== speech bubble top to the label ==*/
.tooltip-top::after {
    background: #3E474F;
    border-radius: .25em;
    color: #EDEFF0;
    content: attr(data-tooltip);
    padding: 1em;
    width: max-content;
    top: 0;
    left: 0;
    transform: translate(0px, -48px);
}

@supports (anchor-name: --tooltip-anchor) {
    @position-try --tooltip-right {
        position-area: right;
        margin-left: 10px;
    }

    @position-try --tooltip-top {
        position-area: top;
        margin-bottom: 8px;
    }

    @position-try --tooltip-top-left {
        position-area: top span-left;
        margin-bottom: 8px;
    }

    @position-try --tooltip-bottom-left {
        position-area: bottom span-left;
        margin-top: 8px;
    }

    @position-try --tooltip-bottom {
        position-area: bottom;
        margin-top: 8px;
    }

    /*
     * Per-instance anchor: TooltipComponent sets --tooltip-instance-anchor on the span.
     * ::after inherits that custom property so position-anchor matches anchor-name.
     * Fallback keeps hand-authored .tooltip spans working (single shared anchor if unset).
     */
    .tooltip {
        anchor-name: var(--tooltip-instance-anchor, --tooltip-anchor);
    }

    .tooltip::after {
        position: fixed;
        position-anchor: var(--tooltip-instance-anchor, --tooltip-anchor);
        position-area: left;
        position-try-fallbacks: --tooltip-right, --tooltip-top, --tooltip-bottom;
        margin-right: 10px;
        top: auto;
        left: auto;
        transform: none;
        max-width: min(24rem, calc(100vw - 1rem));
    }

    .tooltip-right::after {
        position-area: right;
        position-try-fallbacks: --tooltip-top, --tooltip-bottom, --tooltip-right;
        margin-right: 0;
        margin-left: 10px;
    }

    .tooltip-top::after {
        position-area: top;
        position-try-fallbacks: --tooltip-right, --tooltip-bottom, --tooltip-top;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 8px;
    }

    .tooltip-top-left::after {
        position-area: top span-left;
        position-try-fallbacks: --tooltip-right, --tooltip-bottom, --tooltip-top;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 8px;
    }

    .tooltip-bottom-left::after {
        position-area: bottom span-left;
        position-try-fallbacks: --tooltip-right, --tooltip-top, --tooltip-bottom;
        margin-right: 0;
        margin-left: 0;
        margin-top: 8px;
    }
}