@import "../../../css/static/mixin";

html:root {
    --tooltip-background-color: #232222;
    --tooltip-color: #999;
}

.container {
    background-color: var(--tooltip-background-color);
    color: var(--tooltip-color);

    position: fixed;
    z-index: 1000000;

    pointer-events: none;

    padding: .25em;
    transform: translate(-50%, -100%); /* translate up, center */

    text-align: center;
    border-right: 3px;

    display: flex;
    flex-direction: column;
    justify-content: space-around;

    opacity: 0;
    @include transition(opacity .5s ease-in-out);

    &:after {
        content: '';
        position: absolute;

        width: 0;
        height: 0;

        left: calc(50% - .5em);
        bottom: -.4em;

        border-style: solid;
        border-width: .5em .5em 0 .5em;
        border-color: var(--tooltip-background-color) transparent transparent transparent;
    }

    &.shown {
        opacity: 1;
    }
}

.iconTooltip {
    display: flex;
    flex-direction: column;
    justify-content: center;

    img {
        max-height: 100%;
        max-width: 100%;
    }
}