/*
    Styling for elements with tooltips.
    Tooltips show additional information/context when hovering over an element. To use this class:
        - Add the "has-tooltip" class to an element.
        - Specify the tooltip's contents using the `data-tooltip-content` attribute. This can be normal text or HTML markup.
        - Specify the tooltip's position using the `data-tooltip-position` attribute, which defaults to "top" if not specified.
            Acceptable values are "top", "bottom", "left", or "right".
    For example:
        <button class="has-tooltip" data-tooltip-content="<h1>Tooltip value!</h1>" data-tooltip-position="left">Hover over me</button>

    Note that this means of using tooltips does not apply to the tooltip React component. This only applies when adding tooltips
    to elements statically in the HTML.
*/
.has-tooltip
{
    /* No styling is necessary. */
}
/* Styling for tooltips. */
.tooltip
{
    /*
        The tooltip needs to use fixed positioning so that it can be positioned with respect to the viewport.
        This is necessary to avoid stacking context issues that could occur if the tooltip was included
        in the same stacking context as the element associated with it. For example, the tooltip could be hidden
        if the element with which it is associated exists in a container that hides overflow.
        Positioning tooltips with respect to the viewport avoids these problems.
    */
    position: fixed;
    /* Tooltips are initially positioned at the top-left of the viewport so they do not cause the webpage to overflow vertically. */
    top: 0;
    left: 0;
    /* The tooltip should cohere with the website's theme. */
    background: var(--TOOLTIP-BACKGROUND-COLOR);
    padding: 4px 8px;
    border-radius: 8px;
    z-index: var(--tooltip-z-index);
    /* The tooltip should be easy to read without being overly obnoxious. */
    font-size: 0.9rem;
    /* The tooltip should not interfere with mouse events. */
    pointer-events: none;
    user-select: none;
    /* The tooltip should show its contents without wrapping white space. */
    white-space: nowrap;
    /* The tooltip should have a box shadow so it appears to hover over the page. */
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
    /* The tooltip should be hidden by default. */
    opacity: 0%;
    transition: opacity 0.3s ease;

    /* Styling for when the tooltip should be visible. */
    &.visible
    {
        opacity: 100%;
    }

    /* A scrollable tooltip takes the pointer while it shows, so the user can scroll it. Its height is
       capped at about half the window, a starting value to tune; its content scrolls inside an inner
       element, so the arrow outside the tooltip's box isn't clipped. */
    &.tooltip-scrollable.visible
    {
        pointer-events: auto;
    }
    /* Half the window at most, or less where the script caps it to the room above the target's
       bottom. */
    .tooltip-scrollable-content
    {
        max-height: min(50vh, var(--tooltip-scrollable-content-max-height, 50vh));
        overflow-y: auto;
    }

    /* A scrollable tooltip's close button, in its top-right corner, closes it at once. The tooltip
       keeps room on its right for it, so it never covers the content. */
    &.tooltip-scrollable
    {
        padding-right: 1.75em;
    }
    .tooltip-close-button
    {
        position: absolute;
        top: 2px;
        right: 2px;
        width: 1.5em;
        height: 1.5em;
        /* Centers the close icon in the button. */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        border-radius: 4px;
        background: none;
        color: inherit;
        font: inherit;
        cursor: pointer;
    }
    .tooltip-close-button:hover,
    .tooltip-close-button:focus-visible
    {
        background: var(--neutral-highest-emphasis-surface-color);
    }

    /* An alert, reporting an error the user must acknowledge, is filled in the error color, its
       arrow too. While open, it takes the pointer for its close button and keeps room on its right
       for the button, as a scrollable tooltip does. */
    &.tooltip-alert
    {
        --TOOLTIP-BACKGROUND-COLOR: var(--error-higher-emphasis-color);
        color: var(--error-higher-emphasis-contrast-color);
    }
    &.tooltip-alert-open
    {
        padding-right: 1.75em;
    }
    &.tooltip-alert-open.visible
    {
        pointer-events: auto;
    }
    &.tooltip-alert .tooltip-close-button:hover,
    &.tooltip-alert .tooltip-close-button:focus-visible
    {
        /* A faint tint of the alert's text color: 15% of it mixed with transparent. */
        background: color-mix(in srgb, currentColor 15%, transparent);
    }

    /* The size of the tooltip's arrow in pixels. */
    --TOOLTIP-ARROW-SIZE: 8px;

    /* Styling for the tooltip arrow when the tooltip is top-positioned. */
    &.tooltip-top::after,
    &.positioned-above::after
    {
        /* The tooltip should have an arrow pointing down. */
        content: "";
        position: absolute;
        bottom: calc(-1 * calc(2 * var(--TOOLTIP-ARROW-SIZE)));
        /* Centered, unless the tooltip was shifted to stay inside the window; the script then sets
           where the target's center is. */
        left: var(--tooltip-arrow-left, 50%);
        transform: translateX(-50%);
        border-width: var(--TOOLTIP-ARROW-SIZE);
        border-style: solid;
        border-color: var(--TOOLTIP-BACKGROUND-COLOR) transparent transparent transparent;
    }
    /* Styling for the tooltip arrow when the tooltip is right-positioned. */
    &.tooltip-right::after,
    &.positioned-to-right::after
    {
        /* The tooltip should have an arrow pointing left. */
        content: "";
        position: absolute;
        /* Centered, unless the tooltip was moved up or down to stay inside the window or above
           its target's bottom; the script then sets where the target's middle is. */
        top: var(--tooltip-arrow-top, 50%);
        transform: translateY(-50%);
        left: calc(-1 * calc(2 * var(--TOOLTIP-ARROW-SIZE)));
        border-width: var(--TOOLTIP-ARROW-SIZE);
        border-style: solid;
        border-color: transparent var(--TOOLTIP-BACKGROUND-COLOR) transparent transparent;
    }
    /* Styling for the tooltip arrow when the tooltip is bottom-positioned. */
    &.tooltip-bottom::after,
    &.positioned-below::after
    {
        /* The tooltip should have an arrow pointing up. */
        content: "";
        position: absolute;
        top: calc(-1 * calc(2 * var(--TOOLTIP-ARROW-SIZE)));
        /* Centered, unless the tooltip was shifted to stay inside the window; the script then sets
           where the target's center is. */
        left: var(--tooltip-arrow-left, 50%);
        transform: translateX(-50%);
        border-width: var(--TOOLTIP-ARROW-SIZE);
        border-style: solid;
        border-color: transparent transparent var(--TOOLTIP-BACKGROUND-COLOR) transparent;
    }
    /* Styling for the tooltip arrow when the tooltip is left-positioned. */
    &.tooltip-left::after,
    &.positioned-to-left::after
    {
        /* The tooltip should have an arrow pointing right. */
        content: "";
        position: absolute;
        /* Centered, unless the tooltip was moved up or down to stay inside the window or above
           its target's bottom; the script then sets where the target's middle is. */
        top: var(--tooltip-arrow-top, 50%);
        transform: translateY(-50%);
        right: calc(-1 * calc(2 * var(--TOOLTIP-ARROW-SIZE)));
        border-width: var(--TOOLTIP-ARROW-SIZE);
        border-style: solid;
        border-color: transparent transparent transparent var(--TOOLTIP-BACKGROUND-COLOR);
    }
}