/**
    The essential.scss defines proerties that
    are essential for the basic features of an 
    info card and are completely 
*/
.unselectable {
    user-select: none;
}

.info-card {
    position: absolute;
    user-select: none;
}

.zoomable-wrapper {
    display: inline-block;
    align-self: center;

    figure {
        // Is required that the zoomable tween works properly.
        display: inline-block;
    }

    // Problem with display-block is, that it produces spaces
    // when elements contain a linebreak. Setting the font-size
    // to 0 prevents that.
    font-size: 0;

    figcaption {
        font-size: initial;
    }

    //Discuss: There is a weird div that needs to be scaled
    // alongside. Maybe this introduces the jittering of the graphic.
    // Try to get rid of it
    // - SO
    & > figure > div {
        height: 100%;
    }

    svg {
        overflow: visible;
        width: 100%;
        height: 100%;
    }
}

div {
    // Resets a weird styling, when certain elements
    // are (long) clicked on using a touch screen.
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}