/*
Copyright (C) 2001-2021 OTRS AG, https://otrs.com/
Copyright (C) 2021 Znuny GmbH, https://znuny.org/

This software comes with ABSOLUTELY NO WARRANTY. For details, see
the enclosed file COPYING for license information (GPL). If you
did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
*/

/**
 * @package     Skin "Default"
 * @section     Tooltips
 */

@media screen,projection,tv,handheld {

div.TooltipContainer {
    position: absolute;
    z-index: 6000;
    display: none;
    width: auto;
    margin-left: 10px;
    margin-top: -5px;
}

div.Tooltip,
div.Tooltip.TongueTop,
div.Tooltip.TongueBottom {
    width: auto;
}

div.Tooltip.TongueLeft {
    margin-left: -37px;
}

/* RTL intentionally the same */
.RTL div.Tooltip.TongueLeft {
}

div.Tooltip.TongueRight {
    margin-left: -202px;
}

div.Tooltip > div.Content {
    background: var(--white);
    border: var(--border-width) var(--border-solid) var(--border-color);
    border-radius: var(--border-radius-xs);
    padding: var(--padding-sm);
    position: relative;
}

div.Tooltip.TongueTop > div.Content {
    margin-bottom: 15px;
}

div.Tooltip.TongueBottom > div.Content {
    margin-top: 15px;
}

div.Tooltip > div.Content:after,
div.Tooltip > div.Content:before {
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

div.Tooltip.TongueTop > div.Content:after,
div.Tooltip.TongueTop > div.Content:before {
    top: 100%;
}

div.Tooltip.TongueBottom > div.Content:after,
div.Tooltip.TongueBottom > div.Content:before {
    bottom: 100%;
}

div.Tooltip.TongueLeft > div.Content:after,
div.Tooltip.TongueLeft > div.Content:before {
    left: 10%;
}

div.Tooltip.TongueRight > div.Content:after,
div.Tooltip.TongueRight > div.Content:before {
    left: 90%;
    right: 10%;
}

div.Tooltip > div.Content:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 6px;
    margin-left: -6px;
}

div.Tooltip > div.Content:before {
    border-color: rgba(204, 204, 204, 0);
    margin-left: -7px;
}

div.Tooltip.TongueTop > div.Content:after {
    border-top-color: #fff;
    border-width: 6px;
}

div.Tooltip.TongueTop > div.Content:before {
    border-top-color: #ccc;
    border-width: 7px;
}

div.Tooltip.TongueBottom > div.Content:after {
    border-bottom-color: #fff;
    border-width: 6px;
}

div.Tooltip.TongueBottom > div.Content:before {
    border-bottom-color: #ccc;
    border-width: 7px;
}

} /* end @media */