[data-tippy-root] {
    /* Since tooltip elements are sometimes inside elements
     * which have different font-family, we force font-family
     * for tooltips here.
     */
    font-family: "Source Sans 3", sans-serif !important;
    word-wrap: break-word;
    /* Contains stylistic variant of upper-case character "I" in Source Sans 3 */
    font-feature-settings: "ss01" on;

    /* Affects all tippy tooltips not using any theme. */
    .tippy-box:not([data-theme]) {
        background: hsl(0deg 0% 20%);
        border-radius: 5px;
        min-height: 25px;
        box-sizing: border-box;

        .tippy-content {
            box-sizing: inherit;
            display: flex;
            align-items: center;
            padding: 5px 10px;
            font-size: 14px;
            line-height: 20px;
            color: hsl(0deg 0% 100%);
        }

        .tippy-arrow::before {
            /* This affects the arrow for tooltips and doesn't have any impact on arrows for popovers.
             * The transform property scales down the size of the arrow, giving it a thinner appearance.
             * https://atomiks.github.io/tippyjs/v6/themes/#changing-the-arrow-size
             */
            transform: scale(0.75);
        }

        .tooltip-inner-content {
            line-height: 17px;
        }

        &[data-placement^="top"] > .tippy-arrow::before {
            border-top-color: hsl(0deg 0% 20%);
        }

        &[data-placement^="bottom"] > .tippy-arrow::before {
            border-bottom-color: hsl(0deg 0% 20%);
        }

        &[data-placement^="left"] > .tippy-arrow::before {
            border-left-color: hsl(0deg 0% 20%);
        }

        &[data-placement^="right"] > .tippy-arrow::before {
            border-right-color: hsl(0deg 0% 20%);
        }
    }

    .tippy-arrow::before {
        /* `.tippy-arrow:before` element sometimes
         * inherits the height of the parent, we
         * don't want any height here since we
         * want it to remain an triangle.
         * The bug was only found in Firefox.
         */
        height: 0 !important;
    }
    /* If the text in the tooltips stretches to multiple lines,
     * we want the lines to be left-indented and not right-indented
     * by default.
     */
    text-align: left;

    .tooltip-hotkey-hints {
        box-sizing: inherit;
        display: flex;
        align-self: flex-start;
        margin: 0 -5px 0 10px;
        gap: 4px;
    }

    .tooltip-hotkey-hint {
        box-sizing: inherit;
        border: 1px solid hsl(225deg 100% 84%);
        border-radius: 3px;
        color: hsl(225deg 100% 84%);
        padding: 2px 5px;
        min-width: 20px;
        text-align: center;
        line-height: 14px;
    }
}