@import "gui-vars.less";
.gui-control-panel{
    .range-slider{
        width: 100%;
        /*margin-left: 3%;*/
    }
}
.gui-control-panel{
    .gui-slider{
        @media @phone{
            /*border-radius: 22px;*/
            padding: 0px 8px;
        }
    }
}
.gui-control-panel{
    .gui-slider{
        .range-bar{
            background: @theme-color-offset !important;
        }
        .range-knob{
            border-color: @theme-color-offset !important;
        }
    }
}
.gui-control-panel{
    .w-100;
    .w-view;
    background-color: fade(@theme-color-secondary, 94%);
    color: @theme-color-offset;
    .gui-header{
        height: 44px;
        .options{
            .option{
                height: 44px;
            }
        }
    }
    .gui-control-panel-inner{
        height: 100%;
        display: flex;
        flex-direction: column;

        .gui-control-panel-layout{
            height: 100%;
            display: flex;
            flex-direction: column;
            .gui-header{
                display: flex;
                flex: 2;
            }
            .gui-control-panel-items{
                display: flex;
                flex-direction: column;
                flex: 1;
                height: 100%;
                overflow: auto;
            }
        }
        .gui-control-panel-tab-container{
            display: none;
        }
        .gui-control-panel-stack-container{
            display: block;
        }
    }
    @media @phone{
        .p-all;
        .gui-control-panel-items{
            height: 100%;
            overflow: auto;
            display: flex;
            flex-direction: column;
            flex: 1;
            width: 100%;
        }
        .gui-control-panel-tab-container {
            .gui-tab-menu {
                margin-top: 0px;
            }
        }
        .segmented, .gui-tab-menu {
            .button,.button:first-child:last-child {
                border-radius: 0px;
                border-width: 0px;
                font-weight: normal;
                font-size: 0.75rem;
            }
        }
    
        .gui-control-panel-inner{
            &.has-tabs{
                .gui-control-panel-tab-container{
                    /*
                    .gui-header{
                        display: none;
                    }
                    */
                    display: block;
                }
                .gui-control-panel-stack-container{
                    display: none;
                }
            }
        }
        .gui-control-panel-layout.gui-control-panel-stack-container > .gui-header {
            font-size: 1.2rem;
            margin: 0px 0px;
            height: 44px;
        }
    }
    @media @desktop{
        padding: 0px 8px;
        top: 0px;
        padding-top: 44px;
        
        .gui-control-panel-inner{
            .gui-control-panel-items{
            }
            .gui-control-panel-stack-container{
                height: 100%;
                overflow-y: auto;
                .component-container{
                    margin: @s-2 0px;
                    padding: 0px 8px;
                }
            }
        }
    }
}