@import 'gallery.css';

#wrapper_thumb:nth-child(3), #wrapper_large:nth-child(3)
{
    overflow-x: hidden;
    overflow-y: auto;
    --bottom-row-horizontal-padding:15px;
    --contact-width: 120px;
    --bottom-height: 46px;
    --shadow-size:5px;
    flex:1;
    min-height: 0;
    padding:1em 1.5em;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: var(--bottom-height);
    #sitetitle /* Title */
    {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0px;
        h1
        {
            font-weight: 600;
            margin:0px;
        }
    }
    #collectionHeader /* Subtitle */
    {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 0.8em;
        margin: 0px;
        h1
        {
            font-weight: 400;
            margin:0px;
        }
        h1:empty, p:empty{
            display: none;
        }
        p
        {
            margin:6px 0px;
        }
    }
    #stage, #stage2
    {
        height: fit-content;
        max-width: 100%;
        #index /* Items list */
        {
            max-height: 100%;
            display: flex;
            justify-content: center;
            flex-direction: row;
            width:100%;
            flex-wrap: wrap;
            padding: var(--shadow-size);
            .itemNumber{
                display: none;
            }
            a {
                > div:first-of-type { /* thumbnail outer container */
                    margin: 0 !important;
                    padding:5px 10px;
                }
            }
            .thumbnail {
                display: flex;
                align-items: center;
                justify-content: center;
                transition: box-shadow 0.05s ease;
                &:hover
                {
                    box-shadow: 0 0 var(--shadow-size) var(--menu-hover-shadow);
                }
                &:active
                {
                    box-shadow: inset 0 0 10px var(--menu-active-shadow);
                    cursor: default; /* does not work for some reason */
                }
            }
        }
    }
    
    #contact, .pagination
    {
        position: absolute;
        bottom: 0;
        height: calc(var(--bottom-height) + var(--shadow-size));
        display: flex;
        align-items: center;
        user-select: none;
    }
    #contact
    {
        width: var(--contact-width);
        z-index: 2;
        left: 0;
        justify-content: left;
        padding-top: var(--shadow-size);
        padding-right: var(--shadow-size);
        a
        {
            background-color: var(--menu-background-color);
            text-decoration: none;
            color: inherit;
            padding:0 var(--bottom-row-horizontal-padding);
            height: var(--bottom-height);
            transition: box-shadow 0.05s ease;
            &:hover
            {
                box-shadow: 0 0 var(--shadow-size) var(--menu-hover-shadow);
            }
            &:active
            {
                box-shadow: inset 0 0 10px var(--menu-active-shadow);
                cursor: default;
            }
            p
            {
                display: flex;
                align-items: center;
                justify-content: center;
                text-wrap: nowrap;
                margin:0px;
                height: 100%;
            }
        }
    }

    .pagination
    {
        --padding-right-page: 25px;
        --item-padding: 7px;
        width: calc(100% - var(--contact-width));
        max-width: calc(100% - var(--contact-width));
        right: 0;
        z-index: 1;
        padding-top: var(--shadow-size);
        overflow-y: auto;
        ul
        {
            background-color: var(--menu-background-color);
            overflow: visible;
            min-width: fit-content;
            display: flex;
            justify-content: end;
            flex-direction: row;
            width: 100%;
            max-width: 100%;
            height: 100%;
            list-style: none;
            margin:0px;
            padding:0px;
            li
            {
                height: 100%;
                display: flex;
                align-items: center;

                &.previous, &.next
                {
                    a
                    {
                        padding: 0 var(--bottom-row-horizontal-padding);
                    }
                    
                    &:not(:has(a))
                    {
                        padding: 0 var(--bottom-row-horizontal-padding);
                        opacity: 0.5;
                    }
                }

                a
                {
                    text-decoration: none;
                    color: inherit;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 100%;
                    padding:0 var(--item-padding);
                    transition: box-shadow 0.05s ease;
                    &:hover
                    {
                        box-shadow: 0 0 var(--shadow-size) var(--menu-hover-shadow);
                    }
                    &:active
                    {
                        box-shadow: inset 0 0 10px var(--menu-active-shadow);
                        cursor: default;
                    }
                }
                &:not(:has(a))
                {
                    padding: 0 var(--item-padding);
                    opacity: 0.5;
                }
            }
            *:has(+ .previous)
            {
                padding-right: var(--padding-right-page) !important;
                &:not(:has(a))
                {
                    padding-right: calc(var(--padding-right-page) + var(--item-padding)) !important;
                }
            }
        }
    }
}
#wrapper_thumb:nth-child(4)
{
    display: none;
}