[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: hsla(0, 0%, 20%, 1);
        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: hsla(0, 0%, 100%, 1);
        }

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

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

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

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

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

    .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;
        /* We use the same transform value used
         * by tippyjs documentation for the small
         * arrow size.
         */
        transform: scale(0.75);
    }
    /* 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 hsla(225, 100%, 84%, 1);
        border-radius: 3px;
        color: hsla(225, 100%, 84%, 1);
        padding: 2px 5px;
        min-width: 20px;
        text-align: center;
        line-height: 14px;
    }
}