@import (once) "/customize/src/less2/include/colortheme.less";
@import (once) "/customize/src/less2/include/leftside-menu.less";

@leftside-bg: @colortheme_sidebar-left-bg;
@leftside-color: @colortheme_sidebar-left-fg;
@rightside-color: @colortheme_sidebar-right-fg;
@description-color: @colortheme_sidebar-description;

@sidebar_button-width: 400px;


.sidebar-layout_main() {
    input[type="text"] {
        padding-left: 10px;
    }
    #cp-sidebarlayout-container {
        font-size: 16px;
        display: flex;
        flex: 1;
        min-height: 0;
        #cp-sidebarlayout-leftside {
            color: @leftside-color;
            width: 250px;
            background: @leftside-bg;
            display: flex;
            flex-flow: column;
            .cp-sidebarlayout-categories {
                flex: 1;
                .cp-sidebarlayout-category {
                    .leftside-menu-category_main();
                }
            }
        }
        #cp-sidebarlayout-rightside {
            flex: 1;
            padding: 5px 20px;
            color: @rightside-color;
            overflow: auto;

            // Following rules are only in settings
            .cp-sidebarlayout-element {
                label:not(.noTitle), .label {
                    display: block;
                    font-weight: bold;
                    margin-bottom: 0;
                }
                .cp-sidebarlayout-description {
                    display: block;
                    color: @description-color;
                    margin-bottom: 5px;
                }
                margin-bottom: 20px;
            }
            [type="text"], button {
                vertical-align: middle;
                height: 40px;
                box-sizing: border-box;
            }
            .cp-sidebarlayout-input-block {
                display: inline-flex;
                width: @sidebar_button-width;
                input {
                    flex: 1;
                    border-radius: 0.25em 0 0 0.25em;
                    border: 1px solid #adadad;
                    border-right: 0px;
                }
                button {
                    border-radius: 0 0.25em 0.25em 0;
                    //border: 1px solid #adadad;
                    border-left: 0px;
                }
            }
            &>div {
                margin: 10px 0;
            }
            button.btn {
                @button-bg: @colortheme_sidebar-button-bg;
                @button-red-bg: @colortheme_sidebar-button-red-bg;
                background-color: @button-bg;
                border-color: darken(@button-bg, 10%);
                color: white;
                &:hover {
                    background-color: darken(@button-bg, 10%);
                }
                &.btn-danger {
                    background-color: @button-red-bg;
                    border-color: darken(@button-red-bg, 10%);
                    color: white;
                    &:hover {
                        background-color: darken(@button-red-bg, 10%);
                    }
                }
            }
        }
    }
}


