#graph-canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;            
    font: 14px "acumin-pro";  
    user-select: none;
    overflow: hidden;
    cursor: move;   
    background-image:
        linear-gradient(to right, #4F4E4F 1px, transparent 1px),
        linear-gradient(to bottom, #4F4E4F 1px, transparent 1px);  

    #selection-container {
        pointer-events: none;
        
        .selection-box {
            z-index: 10;
            position: absolute;
            background: rgba(72, 72, 196, 0.5);
            border: blue solid 2px;
        }
    }

    .port {
        border-radius: 20px;
        width: 20px;
        height: 20px;                                                    
        align-self: center;   
        
        .img {
            width: 100%;
        }     
        
        &:hover, &.selected {
            filter: brightness(2);
        }
    }

    .portLine {
        height: 24px;
        display: grid;                
        grid-template-rows: 100%;
    }

    .port-label {                   
        align-items: center;
    }

    .inputsContainer {                        
        grid-row: 1;
        grid-column: 1;

        .portLine {
            grid-template-columns: 12px calc(100% - 15px);

            .port-label {                    
                grid-row: 1;
                grid-column: 2;
            }

            .port {                              
                grid-row: 1;
                grid-column: 1;
                transform: translateX(-12px);     
            }
        }
    }

    .outputsContainer {                  
        grid-row: 1;
        grid-column: 2;

        .portLine {
            grid-template-columns: calc(100% - 10px) 12px;

            .port-label {                    
                grid-row: 1;
                grid-column: 1;
                text-align: right;
            }

            .port {                              
                grid-row: 1;
                grid-column: 2;
                transform: translateX(2px);                        
            }        
        }
    }

    #graph-container {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        transform-origin: left top;
        display: grid;
        grid-template-rows: 100%;          
        grid-template-columns: 100%;          

        #frame-container {
            overflow: visible;   
            grid-row: 1;
            grid-column: 1;
            position: relative;
            width: 100%;
            height: 100%;             
        }

        .frame-box {
            position: absolute;
            background: rgba(72, 72, 72, 0.7);
            display: grid;
            grid-template-rows: 40px calc(100% - 40px);
            grid-template-columns: 100%;            
            box-sizing: border-box;

            &.collapsed {
                height: auto !important;
                width: 200px !important;

                .frame-box-header {
                    font-size: 16px;
                    grid-template-columns: calc(100% - 37px) 30px 7px;  
                    
                    .frame-box-header-collapse {
                        margin-top: -2px;
                    }
                    
                    .frame-box-header-close {
                        display: none;
                    }
                }
            }

            .frame-box-border {                
                grid-row: 1 / span 2;
                grid-column: 1;
                width: 100%;
                height: 100%;
                border: transparent solid 4px;
                pointer-events: none;
                box-sizing: border-box;
            }

            .frame-box-header {
                grid-row: 1;
                grid-column: 1;
                background: rgba(72, 72, 72, 1);    
                color: white;
                font-size: 24px;
                text-align: center;
                display: grid;
                grid-template-rows: 100%;  
                grid-template-columns: calc(100% - 74px) 30px 7px 30px 7px;  
                align-content: center;
                overflow: hidden;

                .frame-box-header-button {
                    cursor: pointer;
                    align-self: center;
                    transform-origin: 50% 50%;
                    transform: scale(1);
                    stroke: transparent;
                    fill: white;
                    display: grid;               

                    &.down {
                        transform: scale(0.90);
                    }
                }

                .frame-box-header-collapse {
                    grid-column: 2;
                    grid-row: 1;
                }

                .frame-box-header-close {
                    grid-column: 4;
                    grid-row: 1;
                }

                .frame-box-header-title {
                    grid-column: 1;
                    grid-row: 1;
                    display: grid;
                    height: 100%;
                    width: 100%;
                    align-self: stretch;
                    align-items: center;
                    margin-top: -2px;
                }
            }

            .port-container {
                margin-top: 6px;      
                margin-bottom: 6px; 
                margin-left: 4px;     
                margin-right: 4px;     
                color: white;
                grid-row: 2;
                grid-column: 1;
                display: grid;
                grid-template-rows: 100%;
                grid-template-columns: 50% 50%; 
                z-index: 2;
            }

            &.selected {
                .frame-box-border {
                  border-color: white;
                }
            }
        }

        #graph-svg-container {
            grid-row: 1;
            grid-column: 1;
            position: relative;
            width: 100%;
            height: 100%;  
            overflow: visible; 
            pointer-events: none;
            z-index: 1;
            
            .link {
                stroke-width: 4px;    
                &.selected {                    
                    stroke: white !important;
                    stroke-dasharray: 10, 2;
                }       

                &.hidden {
                    display: none;
                }
            }

            .selection-link {
                pointer-events: all;
                stroke-width: 16px;
                opacity: 0;
                transition: opacity 75ms;
                stroke: transparent;                        
                cursor: pointer;

                &.hidden {
                    display: none;
                }

                &:hover, &.selected {
                    stroke: white !important;
                    opacity: 0.4;
                }
            }
        }

        #graph-canvas-container {
            grid-row: 1;
            grid-column: 1;
            position: relative;
            width: 100%;
            height: 100%;                  

            .visual {
                z-index: 3;
                width: 200px;
                position: absolute;
                left: 0;
                top: 0;
                background: gray;
                border: 4px solid black;
                border-radius: 12px;
                display: grid;
                grid-template-rows: 30px auto;
                grid-template-columns: 100%;
                color: white;

                &.hidden {
                    display: none;
                }

                .comments {
                    position: absolute;
                    top: -50px;
                    width: 200px;
                    height: 45px;
                    overflow: hidden;                    
                    font-style: italic;
                    opacity: 0.8;
                    display: grid;
                    align-items: flex-end;
                    pointer-events: none;
                }

                .selection-border {                    
                    grid-row: 1 / span 3;
                    grid-column: 1;
                    margin: -4px;

                    transition: border-color 100ms;

                    border: 4px solid black;
                    border-radius: 12px;
                }

                &.selected {
                    .selection-border {  
                        border-color: white;
                    }
                }

                .header {
                    grid-row: 1;
                    grid-column: 1;
                    border: 4px solid black;
                    border-top-right-radius: 7px;
                    border-top-left-radius: 7px;
                    font-size: 16px;
                    text-align: center;
                    margin-top: -1px;
                    margin-left: -1px;
                    margin-right: -1px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    background: black;
                    color: white;

                    &.constant {
                        border-color: #4E5C74;
                        background: #4E5C74;
                    }
            
                    &.inspector {
                        border-color: #396437;
                        background: #396437;
                    }
                }

                .connections {
                    grid-row: 2;
                    grid-column: 1;

                    display: grid;
                    grid-template-columns: 50% 50%;                  
                }

                .content {
                    min-height: 20px;
                    grid-row: 3;
                    grid-column: 1;

                    &.input-block {
                        grid-row: 2;
                        height: 34px;
                        text-align: center;
                        font-size: 18px;
                        font-weight: bold;
                        margin: 0 10px;

                        &.fat {
                            height: 54px;
                        }
                    }

                    &.output-block {
                        min-height: 0px;
                        height: 5px;
                    }

                    &.clamp-block {                    
                        grid-row: 2;
                        height: 34px;
                        text-align: center;
                        font-size: 18px;
                        font-weight: bold;
                        margin: 0 10px;
                    }

                    &.gradient-block {                    
                        grid-row: 2;
                        height: 34px;
                    }

                    &.texture-block {                    
                        grid-row: 3;
                        height: 140px;
                        width: 140px;
                        overflow: hidden;
                        border-bottom-left-radius: 7px;
                        border: black 4px solid;
                        border-left: 0px;
                        border-bottom: 0px;

                        img {
                            width: 100%;
                            height: 100%;
                            pointer-events: none;

                            &.empty {
                                display: none;
                            }
                        }
                    }

                    &.regular-texture-block {  
                        margin-top: -115px;                        
                    }

                    &.remap-block {                    
                        height: 34px;
                        text-align: center;
                        font-size: 18px;
                        font-weight: bold;
                        margin: 0 10px;
                    }      
                    
                    &.trigonometry-block {                    
                        grid-row: 2;
                        height: 34px;
                        text-align: center;
                        font-size: 18px;
                        font-weight: bold;
                        margin: 0 10px;
                    }
                }
            }
        }
    }
}