.perseus-widget-interactive-graph {
    .perseus-graph-padding;

    > .graphie-container {
        position: relative;

        > img, > .unresponsive-svg-image {
            position: absolute;
            // Preserves background image alignment (if image is a graph,
            // it can extend up and to the right to allow for axis labels)
            bottom: 0;
            left: 0;
        }
    }
}

.perseus-mobile {
    .tooltip.visible {
        z-index: 2;
    }

    .tooltip.visible .tooltip-content:before {
        border: solid;
        border-color: white transparent;
        border-width: 10px 10px 0 10px;
        bottom: -10px;
        content: "";
        left: 50%;
        transform: translateX(-50%);
        position: absolute;
        z-index: 2;
    }

    .tooltip .tooltip-content {
        display: none;
    }

    .tooltip.visible .tooltip-content {
        display: inline-block;
        background-color: #ffffff;
        border-radius: 5px;
        bottom: 50px;

        .katex {
            color: @kaGreen !important;
        }

        left: 50%;
        transform: translateX(-50%);
        padding: 5px;
        position: absolute;
        white-space: nowrap;

        min-width: 30px;
        text-align: center;
    }

    .graphie-label .katex {
        color: inherit !important;
    }
}