.tab-panel {

    .shader-tree-panel {
        height                  : 30px;
        
        // The combo box listing all shaders
        select {
            height              : 30px;
            background-color    : transparent;
            color               : #ccc;
            height              : 30px;
            width               : 100%;
            max-width           : 300px;
            padding-left        : 15px;
            border              : 1px solid $background-lighter;
            outline             : 1px solid $background-lighter3;
            option {
                padding         : 5px;
                color           : darken($color: $color, $amount: 30%)
            }
        }
        
    }

    .shader-panel {
        min-height              : 100px;
        user-select             : text;
        box-sizing              : border-box;
        padding                 : 0 15px;
        
        // Shader code style - the syntax highlightinh is done by highlight.js, loaded dynamically
        pre {
            margin              : 0;
            white-space         : pre-wrap;
            code {
                // to cancel the background color from zenburn theme of highlight js
                background-color: $background !important;
                padding         : 0;
                margin          : 0;                    
            }            
        }
        
        .shader-panel-title {
            height              : 25px;
            border-bottom       : 1px solid $background-lighter2;
            text-transform      : uppercase;
            line-height         : 25px;
            margin-bottom       : 10px;
        }
        
        
    }
}