@import "theme";

/* Styling for tooltip-style elements */

/* Tool tips (when hovering over an element */
.tooltip {
    display: inline-block;
    position: relative;

    .tooltiptext {
        visibility: hidden;
        width: 300px;
        background-color: var(--my-background-color);
        border: 2px solid var(--my-highlight-color);
        color: #fff;
        text-align: center;
        padding: 4px;
        left: 101%;

        pointer-events: none;
        position: absolute;
        z-index: 99;
    }

    /* Positioned to left of element rather than right */
    .tooltiptextleft {
        visibility: hidden;
        width: 300px;
        background-color: var(--my-background-color);
        border: 2px solid var(--my-highlight-color);
        color: #fff;
        text-align: center;
        padding: 4px;
        top: 50%;
        left: 50%;
        transform: translate(-100%, -100%);

         /* Backwards compatibility */
        -webkit-transform: translate(-100%, -100%);
        -moz-transform: translate(-100%, -100%);
        -o-transform: translate(-100%, -100%);
        -ms-transform: translate(-100%, -100%);

        position: absolute;
        z-index: 99;
    }

    /* Tooltip goes below cursor instead of above */
    .tooltiptextlow {
        visibility: hidden;
        width: 300px;
        background-color: var(--my-background-color);
        border: 2px solid var(--my-highlight-color);
        color: #fff;
        text-align: center;
        padding: 4px;
        left: 101%;

        pointer-events: none;
        position: absolute;
        z-index: 99;
        bottom: 25%;
    }
}

/* Same thing as a normal tooltip except its a bit higher */
.tooltip .tooltiptexthigh {
    visibility: hidden;
    width: 300px;
    background-color: var(--my-background-color);
    border: 2px solid var(--my-highlight-color);
    color: #fff;
    text-align: center;
    padding: 4px;
    left: 101%;
    bottom: -25%;

    position: absolute;
    z-index: 99;
}

.tooltip:hover .tooltiptext,
.tooltip:hover .tooltiptexthigh,
.tooltip:hover .tooltiptextleft,
.tooltip:hover .tooltiptextlow {
    visibility: visible;
}