/*<div class="tooltip__popup tooltip-popup">
    <div class="tooltip-popup__inner">
        <h3 class="tooltip-popup__title">Popup</h3>
        <div class="tooltip-popup__content">
        </div>
        <a href="#" title="Zavřít" target="_self" class="tooltip__trig tooltip-popup__close"></a>
    </div>
</div>*/

.tooltip {
    position: relative;
    display: inline-block;

    &__trig {
        position: relative;
        display: inline-block;
    }

    &__popup {
        @include hidden();
        position: absolute;
        left: 50%;
        bottom: calc(100% + 1rem);
        transform: translateX(-50%);
        transition: opacity 0.1s;

        &--active {
            @include visible();
        }
    }
}

.tooltip-popup {
    width: 15rem;
    max-width: 70vw;
    z-index: 2900;

    &__inner {
        background: $white;
        padding: 1.5rem;
    }

    &__title {
        @extend .item-title;
    }

    &__content {
    }

    &:after {
        @include triangleBottom(1rem, 0.5rem, $white);
        position: absolute;
        bottom: -0.5rem;
        left: 50%;
        transform: translateX(-50%);
    }

    &__close {
    }
}