/*
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
 */

@media screen,projection,tv,handheld {

    .toolbar-row-wrapper .toolbar-row .component-last-views ul {
        gap: var(--padding-sm);
        flex-wrap: wrap;
    }
    
    .ToolTip {
        position: relative;
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: center;
    }
    
    .LastViewToolBarRow a {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: space-between;
        gap: 3px;
        color: var(--gray-darker);
        padding: var(--padding-xs);
        transition: var(--main-transition);
        border-radius: var(--border-radius-xxs);
        border: var(--border-width) var(--border-solid) var(--border-color);
    }
    
    .LastView:hover {
        background: var(--gray-light);
    }
    
    .LastViewAvatar {
        justify-content: space-between;
    }
    
    .ToolTipContent:after{
        border-bottom-color: #333 !important;
    }
    
    .LastViewAvatar > span {
        display: flex;
        align-items: center;
        gap: var(--padding-md);
    }
    
    .LastViewAvatar a {
        transition: var(--main-transition);
    }
    
    .LastViewAvatar div.ToolTipContent{
        max-width: 225px;
        flex-wrap: wrap;
        white-space: normal;
        top: 58px;
    }
    
    .ToolTip .ToolTipContent {
        visibility: hidden;
        width: max-content;
        padding: var(--padding-sm);
        position: absolute;
        z-index: 100;
        left: 0;
        top: 34px;
        background: var(--black);
        border-radius: var(--border-radius-xxs);
    }
    
    .ToolTip .ToolTipContent p {
        color: var(--white);
    }
    
    .ToolTip .ToolTipContent:after {
        content: "";
        position: absolute;
        width: 9px;
        height: 9px;
        border-top: 1px solid;
        border-left: 1px solid;
        border-color: var(--black);
        top: -4px;
        left: 11px;
        background: var(--black);
        transform: rotate(45deg);
    }
    
    .ToolTip:hover .ToolTipContent {
        visibility: visible;
        display: flex;
    }
    
    .ToolTipText,
    .ToolTipText fieldset {
        display: flex;
        flex-flow: column;
        align-items: flex-start;
    }
    
    .ToolTipText fieldset {
        padding-top: var(--padding-md);
        gap: 2px;
    }
    
    .LastViewAvatarRow > .ToolTipContent fieldset {
        display: flex;
        flex-flow: column;
        gap: var(--padding-xs);
        padding-top: var(--padding-sm);
    }
    
    .ToolTipText fieldset span {
        display: flex;
        flex-flow: row;
        align-items: center;
        gap: 8px;
        width: fit-content;
        width: -moz-fit-content;
    }
    
    .ToolTipContent > fieldset label,
    .ToolTipText > fieldset label{
        color: var(--gray-dark-semi);
    }
    
    /* Avatar */
    
    #ToolBar > li.UserAvatar > div {
        width: max-content !important;
    }
    
    a.LastView.LastViewAvatar.LastViewAvatarRow {
       margin-top: 0;
       margin-bottom: 0;
    }
    
    /* ToolBar */
    
    .LastViewToolBar{
        display: inline-flex;
        border:  1px solid #545454;
    }
    
    .LastViewToolBarRow {
        width: fit-content !important;
        width: -moz-fit-content !important;
    }
    
    
    /* MenuBar */
    
    .LastViewMenuBar{
        width: 100%;
        height: auto;
        display: flex;
        padding: var(--padding-sm) var(--main-page-padding) 0 var(--main-page-padding);
    }
    
    .LastViewMenuBarWrapper {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        background: var(--white);
        border: var(--border-width) var(--border-solid) var(--border-color);  
        border-radius: var(--border-radius-sm);
    }
    
    li.LastViewMenuBarRow a {
        display: flex;
        gap: var(--gap-xs);
        transition: var(--main-transition);
        color: var(--gray-darker);
        padding: var(--padding-sm) var(--padding-md);
        border-right: var(--border-width) var(--border-solid) var(--border-color); 
    }
    
    li.LastViewMenuBarRow:last-child a { 
        margin: 0;
    }
    
    .LastViewMenuBarRow .ToolTipContent {
        top: 45px;
    }

}