/* Tooltip Label */

.tooltip-label {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    font-weight: 400;
    min-height: 14px;
    min-width: 14px;
    padding: 2px 4px;
    font-size: var(--12px, 12px );
    line-height: var(--14px, 14px );
    background: var(--theme-gray, #888);
    color: var(--theme-white, #fff);


}



/* Tooltip Component */

.tooltip-component {
    --tooltip-absolute-top: 0;
    --tooltip-absolute-left: 0;

    display: inline-flex;

    &:not(.static) {
        position: relative;
    }

    .tooltip-icon {
        display: inline-flex;
    }

    .tooltip-container {
        top: var(--tooltip-absolute-top, 0 );
        left: var(--tooltip-absolute-left, 0 );
        position: absolute;
        padding-top: 24px;
        z-index: 1550;
    }

    &:not(.active):not(.focus):not(:hover) {
        .tooltip-container {
            display: none;
        }
    }

    .tooltip-content {
        padding: 10px 10px;
        border-radius: 4px;
        background: #fff;
        font-size: var(--14px, 15px);
        line-height: var(--18px, 18px);
        box-shadow: 0 8px 12px var(--theme-shadow-color, rgba(152, 152, 152, .125));
        border: 1px solid var(--theme-grayish, #d9d9d9);
        color: var(--theme-tooltip-color, #000);

        /*border: 1px solid var(--theme-shadow-border, #efefef);*/
        /*border: 1px solid var(--theme-gray, #888);*/

    }

}