:root {
    --main_dkblack:	#191925;
    --main_mdblack:	#1e1e2c;
    --main_black:	#272736;
    --main_dkgrey:	#3b3b4e;
    --main_grey:	#6d6d81;
    --main_ltgrey:	#7e7e8f;
    --main_white:	#d6d6e8;

    --accent: #ff9166;

    --node-width: 96px;
    --node-height: 32px;

}

.titlebar {
    display: flex;
    align-items: baseline;
    width: 100%;

    a {
        color: var(--main_grey);
        text-decoration: none;
        font-weight: 500;
        font-size: 1rem;

        &:hover {
            color: var(--accent);
        }
    }
}

.content-area {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    gap: 16px;
    
    .summary {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 16px;

        .thumbnail {
            height: 160px;
            width: auto;
            border-radius: 4px;
            outline: 1px solid #d6d6e880;
            image-rendering: pixelated;
        }

        .metadata {
            width: 100%;
            min-height: 160px;

            display: flex;
            flex-direction: column;
            gap: 4px;
            justify-content: space-between;

            .project-title {
                
            }

            .project-author {
                color: var(--main_grey);
                line-height: 1;
            }

            .project-desc {
                padding-top: 8px;
                color: var(--main_white);
                line-height: 1;
                font-size: 0.9rem;
            }

            .go-back {
                color: var(--main_grey);
                cursor: pointer;
                font-weight: 500;
                font-size: 0.9rem;

                &:hover {
                    color: var(--accent);

                    &::before {
                        opacity: 1;
                    }
                }

                &::before {
                    content: "";
                    display: inline-block;
                    width: 10px;
                    height: 12px;
                    padding-right: 4px;
                    transform: translateY(1px) translateX(-2px);

                    background-image: url('./src/s_arrow_back_32.png');
                    background-size: contain;
                    background-repeat: no-repeat;
                    background-position: center;
                    opacity: 0.6;
                }
            }

            .project-badges {
                display: flex;
                flex-direction: row;
                gap: 4px;
                padding-top: 8px;

                .badge {
                    background-color: var(--main_dkgrey);
                    border-radius: 4px;

                    p {
                        color: var(--main_white);
                        padding: 1px 6px;
                        font-size: 0.75rem;
                        font-weight: 500;
                    }
                }
            }

            .action-bar {
                display: flex;
                flex-direction: row;
                gap: 8px;

                .action-download {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 8px;

                    background-color: #1e380d;
                    padding: 3px 12px;
                    border-radius: 4px;
                    outline: 1px solid var(--lime);

                    .icon {
                        width: 16px;
                        height: 16px;

                        background-image: url('./src/s_download_white@4x.png');
                        background-size: contain;
                    }

                    p {
                        color: white;
                        text-decoration: none;
                        font-weight: 500;
                        font-size: .85rem;
                    }
                }
                
                .action-download:hover {
                    background-color: #2f5b12;

                    .icon {
                        background-image: url('./src/s_download@4x.png');
                    }
                }
            }
        }

        .details {
            width: 200px;
            height: 100%;

            display: flex;
            flex-direction: column;
            gap: 0px;

            p, a {
                color: var(--main_ltgrey);
                font-size: 0.8rem;
                text-align: right;
            }

            .page-counter {
                position: relative;
                display: block;
                height: 24px;

                img {
                    position: absolute;
                    right: 0px;
                    bottom: 0px;
                }
            }
            

            .version-major {
                color: var(--main_white);
                font-weight: 700;
            }
        }
    }

    .content {
        width: 100%;
        position: relative;

        .control {
            position: absolute;
            display: flex;
            flex-direction: row;
            
            top: 8px;
            right: 8px;
            
            background-color: #1e1e2cb0;
            outline: 1px solid #6d6d8188;
            border-radius: 4px;

            padding: 4px;

            .control-button {
                width: 20px;
                height: 20px;
                padding: 2px 4px;

                img {
                    width: 100%;
                    height: 100%;
                    opacity: .5;
                }
            }

            .control-button:hover {
                img {
                    opacity: 1;
                }
            }
        }
    }

    .content-wrapper {
        overflow-x: scroll;
        
        background-color: var(--main_dkblack);
        background-image: url("./src/pxc_bg.png");
        background-repeat: repeat;
        background-attachment: local;

        border-radius: 6px;
        outline: 1px solid #101016;
        padding: 8px;
        
    }
}

.pxc-viewer {
    position: relative;

    transform-origin: top left;
    transform: scale(1);
    transition: transform 0.2s ease-in-out;
    
    canvas {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        pointer-events: none;
    }

    .node {
        position: absolute;

        background-color: #1e1e2caa;
        border-radius: 6px;
        outline: 1px solid var(--main_dkgrey);

        .node-title {
            position: absolute;
            top: 0px;
            left: 0px;

            width: 100%;
            height: 24px;
            background-image: linear-gradient(to bottom, #272736cc, #272736aa, transparent);
            border-radius: 6px 6px 0 0;
            
            p, a {
                display: block;
                text-align: left;
                padding: 2px 4px;

                font-weight: 500;
                font-size: .7rem;
                color: var(--main_white);
                margin: 0;

                line-height: 1;

                &:hover {
                    color: var(--accent);
                }
            }
        }

        .node-thumb {
            position: absolute;
            top: 4px;
            bottom: 4px;
            left: 4px;
            right: 4px;
            
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            image-rendering: pixelated;
        }
    }
    
    .frame {
        position: absolute;

        background-color: #1e1e2caa;
        border-radius: 4px;
        border: 1px solid var(--main_dkgrey);

        .frame-title {
            position: absolute;
            width: 100%;
            border-bottom: 1px solid var(--main_dkgrey);
            

            p {
                font-weight: 500;
                font-size: .7rem;
                color: var(--main_white);
                text-align: center;
            }
        }

    }
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--main_dkgrey);
    border-radius: 6px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}