.sidebar
{

    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background-color: var(--background-side);
    position: relative;
    z-index: 10;
    max-height: 50vh;

    .sidebar-content
    {
        opacity: 0;
        transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        filter: drop-shadow(0 4px 8px var(--shadow5));
        display: flex;
        flex-direction: row;
        height: 100%;
        min-height: 0;
    }
}

.left
{
    grid-area: leftSidebar;
    transform: translateY(-100%);

    flex: 0 0 100%; 
    width: 100%;
    min-width: 0;

    .leftSidebarWrapper
    {
        .cover
        {
            flex: 1;
            padding-left: 0.75rem;
        }
        .synopsis
        {
            display: flex; flex-direction: column; flex: 1.75; overflow: hidden;
            padding-left: 1rem; padding-right: 1rem;

            .synoTop
            {
                flex: 0 0 auto; padding: .5rem;
                background-color: var(--primary);
                font-size: 1.5rem; font-weight: bold; text-shadow: 0 4px 8px var(--shadow5);
                justify-content: center; align-items: center; text-align: center;
                box-shadow: inset 0 2px 4px var(--shadow2);
            }
            .synoObj
            {
                flex: 1 1 auto; padding: 1rem; padding-top: 0; padding-bottom: 2rem;
                overflow-y: auto; scrollbar-width: none;
                background-color: var(--background-dark);
                box-shadow: inset 0 4px 8px var(--shadow2);
                -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
                mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
            }
        }
        .details
        {
            display: flex; flex-direction: column; flex: 1.75; gap: .75rem;
            padding-right: 0.75rem;

            .object
            {
                display: grid; grid-template-columns: 1fr 1fr; flex-grow: 1;
                grid-template-areas: "label child";
                background-color: var(--background-dark);

                .detailLabel
                {
                    grid-area: label; display: flex;
                    background-color: var(--primary-bright);
                    font-weight: bold; text-shadow: 0 2px 4px var(--shadow5);
                    align-items: center; text-align: center; justify-content: center;
                    box-shadow: inset 0 2px 4px var(--shadow2);
                }
                .child
                {
                    grid-area: child; flex-grow: 1; display: flex; flex-direction: row;
                    align-items: center; text-align: center;justify-content: center;
                    box-shadow: inset 0 4px 8px var(--shadow2);
                    .start
                    {
                        display: flex; height: 100%; width: 100%;
                        align-items: center; text-align: center; justify-content: center;
                    }
                    .end
                    {
                        display: flex; height: 100%; width: 100%;
                        align-items: center; text-align: center; justify-content: center;
                    }
                }
            }
        }
    }
}

.right
{
    grid-area: rightSidebar;
    transform: translateY(-100%);

    flex: 0 0 100%;
    width: 100%;
    min-width: 0;

    background-color: transparent;

    .rightSidebarWrapper
    {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;

        .container
        {
            display: flex;
            flex-direction: row;
            justify-content: safe center;
            flex: 0 0 50vh; 
            height: 50vh;
            
            gap: 2rem;
            /* padding: 1rem; */
            width: 100%;
            display: flex;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            &::-webkit-scrollbar { display: none; }

            background-color: var(--background-side);

            .entry
            {
                display: flex;
                flex-direction: column;
                flex-shrink: 0;
                width: 25%;
                /* margin: 0 1rem; */
                background-color: var(--background-dark);
                gap: 1rem;

                .relationType
                {
                    background-color: var(--primary);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    flex: 1;
                }
                .cover
                {
                    flex: 6;
                }
                .title
                {
                    background-color: var(--primary);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    flex: 1;
                }
            }
        }
        .origin
        {
            order: 1;
        }
        .direct
        {
            order: 2;
        }
        .indirect
        {
            order: 3;
        }
    }
    .sidebar-content.hide
    {
        opacity: 0;
    }
}

.sidebar.visible
{
    visibility: visible;
    transform: translateY(0);
}
.sidebar.visible .sidebar-content
{
    opacity: 1;
}

@media (width >= 1800px)
{
    .sidebar
    {
        grid-row: 2; display: flex; flex-direction: column;
        min-height: 0; max-height: none; height: 100%;
        z-index: 1000; visibility: visible;

        .sidebar-content
        {
            display: flex; flex-direction: column;
            min-height: 0; height: 100%;
            gap: 1rem; padding: 1rem;

            .cover
            {
                display: flex; flex: auto; flex-grow: 1;
                min-height: 0;
                min-width: 0;
                padding: 0;
                align-items: center; justify-content: center;
            }
        }
    }

    .left
    {
        transform: translateX(-85%);

        .leftSidebarWrapper
        {
            .synopsis
            {
                flex: auto; flex-grow: 1; padding: 0;
            }
            .details
            {
                flex: auto; min-height: 20vh; padding: 0;
   
                .object
                {
                    grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto;
                    grid-template-areas:
                        "label child child";
                }
            }
        }
    }

    .right
    {
        transform: translateX(85%);
        width: 100%;
        max-width: 100%;
        overflow: hidden;

        background-color: var(--background-side);

        .rightSidebarWrapper
        {
            width: 100%;
            min-width: 0;
            display: flex;
            flex-direction: column;

            .container
            {
                display: flex;
                flex-direction: row;
                justify-content: safe center;

                flex: 0 0 33.33%;
                width: 100%;
                max-width: 100%;
                display: flex;
                flex-direction: row;
                overflow-x: auto;
                overflow-y: hidden;
                scrollbar-width: none;
                &::-webkit-scrollbar {display: none;}
                gap: 2rem;

                scroll-behavior: smooth;

                background-color: transparent;

                .entry
                {
                    display: flex;
                    height: 100%;
                    width: 15rem;
                    flex-shrink: 0;
                    flex-direction: column;
                    gap: 1rem;

                    .relationType
                    {
                        flex: 1;
                        order: 3;
                    }
                    .cover
                    {
                        flex: 5;
                        order: 2;
                    }
                    .title
                    {
                        flex: 1;
                        order: 1;
                    }
                }
            }
            .origin
            {

            }
            .direct
            {

            }
            .indirect
            {

            }
        }
    }

    .sidebar.visible
    {
        transform: translateX(0);
    }
}