.lekker-tooltip-container {
    display: flex;
    position: relative;
    align-items: center;

    &:hover .lekker-tooltip-link::after {
        display: block;
        border-style: solid;
    }
    &:hover .lekker-tooltip-content {
        position: absolute;
        visibility: visible;
    }

    .lekker-tooltip-content {
        display: flex;
        position: fixed;
        visibility: hidden;
        z-index: 99999;
        min-width: 250px;
        background: rgba(217, 217, 217);
        padding: 1rem;
        border-radius: var(--border-radius);
        color: var(--primary-text-color);
    }

    .lekker-tooltip-link {
        position: relative;
        width: 14px;
        height: 14px;
        background: url("../img/icon/tooltip/i-purple-ba2a7d36a4c9fd46fccb08f517d9a7c0.png") center center no-repeat #fc0;
        border: 0;
        padding: 0;
        border-radius: 7px;

        &::after {
            display: none;
            position: absolute;
            z-index: 99999;
            content: ' ';
            width: 0;
            height: 0;
            border-style: solid;
        }
    }

    &.top {
        &:hover .lekker-tooltip-link::after {
            bottom: 20px;
            right: 0;
            border-width: 10px 7.5px 0 7.5px;
            border-color: rgba(217, 217, 217) transparent transparent transparent;
        }
        &:hover .lekker-tooltip-content {
            bottom: 26px;
        }
        &:hover:not(.left, .right) .lekker-tooltip-content {
            width: 100vw;
        }
    }

    &.bottom {
        &:hover .lekker-tooltip-link::after {
            top: 20px;
            right: 0;
            border-width: 0px 7.5px 10px 7.5px;
            border-color: transparent transparent rgba(217, 217, 217) transparent;
        }
        &:hover .lekker-tooltip-content {
            top: 26px;
        }
        &:hover:not(.left, .right) .lekker-tooltip-content {
            width: 100vw;
        }
    }

    &.left {
        &:hover:not(.top, .bottom) .lekker-tooltip-link::after {
            right: 24px;
            top: 0;
            border-width: 7.5px 0 7.5px 10px;
            border-color: transparent transparent transparent rgba(217, 217, 217);
        }
        &:hover:not(.top, .bottom) .lekker-tooltip-content {
            top: -25px;
            right: 30px;
        }
    }

    &.right {
        &:hover:not(.top, .bottom) .lekker-tooltip-link::after {
            left: 24px;
            top: 0;
            border-width: 7.5px 10px 7.5px 0;
            border-color: transparent rgba(217, 217, 217) transparent transparent;
        }
        &:hover:not(.top, .bottom) .lekker-tooltip-content {
            top: -25px;
            left: 30px;
        }
    }
}