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

@sidebar_button-width: 400px;

.sidebar-layout_main() {
    --LessLoader_require: LessLoader_currentFile();

    // This is way too broad to put in the global scope
    input[type="text"], input[type="password"] {
        padding-left: 10px;
    }
}
& {
    @leftside-bg: @colortheme_sidebar-left-bg;
    @leftside-color: @colortheme_sidebar-left-fg;
    @rightside-color: @colortheme_sidebar-right-fg;
    @description-color: @colortheme_sidebar-description;

    #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;
                    p {
                        margin-bottom: 0;
                    }
                }
                label.noTitle {
                    display: inline-flex;
                    .fa {
                        margin-left: 10px;
                    }
                }
                margin-bottom: 20px;
            }
            [type="text"], [type="password"], 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%);
                    }
                }
            }
        }
    }
}