/* Screen size controls */

/* Small Size Devices */
@media only screen and (max-width: 630px) 
{    
    .auto-fit
    {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }

    .tooltip-text
    {
        display: none;
    }

    main
    {
        margin-top: 6rem;
        grid-column: span 3;
        align-items: center;
    }

    body
    {
        overflow-x: hidden;
    }

    .grid.main-container
    { 
        grid-template-rows: auto auto 1fr;
    }
    .grid.column-container
    {
        grid-auto-flow: row;
    }
    .grid.column-connected-container
    {
        grid-auto-flow: row;
        

        > div 
        {
            border: solid var(--color-tertiary);
            border-width: 1px 1px 0px 1px;
            padding: 0 1em;
        }

        > div:first-child
        {
            border-radius: 1em 1em 0em 0em;
        }

        > div:last-child
        {
            border-radius: 0em 0em 1em 1em;
            border-width: 1px;
        }
    }

    header,
    footer,
    .sidebar
    {
        grid-column: span 3;
        transition:
            width 0s ease;
    }

    :not(body.sb-collapsed)
    {
        .sidebar
        {
            width: 100%;
            height: 100%;

            ul
            {
                flex-flow: column;
            }
        }
        aside .fa-angle-double-left 
        {
            rotate: 90deg;
        }
        main
        {
            display: none;
        }
    }

    body:not(body.sb-collapsed)
    {
        background: var(--color-sidebar);
    }

    body.sb-collapsed
    {
        background: var(--color-primary);

        .sidebar
        {
            position: absolute;
            height: var(--sb-width);
            width: 100%;
            padding: 0;
            overflow-y: hidden;
            overflow-x: auto;
            
            a span, 
            a span + i,
            .sub-menu:not(.show-submenu)
            {
                display: none;
                visibility: collapse;
                height: 0;
                width: 0;
            }
            a
            {
                justify-content: center;
                align-content: center;
            }
            
            /* submenu styling */
            .sub-menu.show-submenu 
            {
                background: var(--color-sidebar);
                position: fixed;
                visibility: visible;
                top: 8rem;
                height: auto;
                width: 100%;
                left: 0;
                display: flex;
                justify-content: center;
                padding: 0.5rem 0rem;
                transition: none;

                > div
                {
                    overflow-x: auto;
                }

                li 
                {
                    display: inline-flex;
                }

                a
                {
                    width: auto;
                }
            }
            
            ul
            {
                width: auto;
                flex-flow: row;
                padding: 0.5rem 0.6rem 0 0.6rem;
                gap: 0;
            }  
            li:last-child
            {
                margin-left: auto;
                margin-top: 0;
            } 
            a
            {
                margin-right: 0.2rem;
            }
        }
        aside .fa-angle-double-left 
        {
            rotate: 270deg;
        }
        main
        {
            display: block;
        }  
    }
}

/* Medium Size Devices */
@media only screen and (min-width: 630px)
{    
    body
    {
        overflow-x: auto;
    }

    .grid.column-container
    {
        grid-auto-flow: row;
    }
    .grid.column-connected-container
    {
        grid-auto-flow: row;
        

        > div 
        {
            border: solid var(--color-tertiary);
            border-width: 1px 1px 0px 1px;
            padding: 0 1em;
        }

        > div:first-child
        {
            border-radius: 1em 1em 0em 0em;
        }

        > div:last-child
        {
            border-radius: 0em 0em 1em 1em;
            border-width: 1px;
        }
    }

    :not(body.sb-collapsed)
    {
        main
        {
            margin-left: -12rem;
            z-index: 0;

            transition:
                margin-left 0.3s ease;
        }

        .sidebar 
        {
            float: left;
            z-index: 1;
        
            transition:
                width 0.3s ease,
                height 0.3s ease,
                visibility 0.2s ease;
        
        }
    }

    body.sb-collapsed
    {
        background: var(--color-primary);

        main
        {
            margin-left: 0rem;
        }  

    }  
}

/* Extra Large Devices */
@media only screen and (min-width: 1200px)
{    
    body
    {
        overflow-x: auto;
    }

    header,
    footer,
    .sidebar
    {
        transition: 
            width 0.3s ease,
            height 0.3s ease;        
    }

    .grid.column-container:not(.auto-fit) 
    {
        grid-auto-flow: column;
    }
    .grid.column-connected-container
    {
        grid-auto-flow: column;
        

        > div 
        {
            border: solid var(--color-tertiary);
            border-width: 1px 0px 1px 1px;
            padding: 0 1em;
        }
        > div:first-child
        {
            border-radius: 1em 0em 0em 1em;
        }
        > div:last-child
        {
            border-radius: 0em 1em 1em 0em;
            border-width: 1px;
        }
    }
    
    body:not(body.sb-collapsed)
    {
        background: var(--color-primary);

        main
        {
            margin-left: 0rem;
        }
    }

    body.sb-collapsed
    {
        background: var(--color-primary);

        main
        {
            margin-left: 0rem;
        }  

    }  
}