@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;
}

.copy_tooltip {
    position: relative;
    display: inline-block;
}

.copy_tooltip_copied {
    color: #fff;
    transition: color 0.3s;
}

.copy_tooltip .copy_tooltip_text {
    visibility: hidden;
    font-size: 15px;
    padding: 5px;
    background-color: var(--my-background-color);
    color: #fff;
    text-align: center;
    position: absolute;
    z-index: 1;
    top: 120%;
    left: 5%;
    opacity: 0;
    border: 2px solid var(--my-highlight-color);
}

.copy_tooltip .copy_tooltip_text::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent white transparent;
}

.copy_tooltip .copy_tooltip_text_visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s;
}