//
// Coded variables
//
// @logo-image
// @primary-color-light   - #e67e22
// @primary-color-dark    - #d35400
// @secondary-color-light - #34495e
// @secondary-color-dark  - #2b3e50
//

//
// Logos
//

.oc-bg-logo when not (@logo-image = '') {
    background-image: linear-gradient(to bottom, rgba(249,249,249,0.7) 0%,rgba(249,249,249,0.7) 100%), url('@{logo-image}');
}
.oc-logo-white when not (@logo-image = '') {
    background-image: url('@{logo-image}');
    height: 170px !important;
}

//
// Outside Layout
//

@color-outer-bg: @secondary-color-dark;
@color-outer-header: mix(black, saturate(@secondary-color-dark, 5%), 27%);

body.outer {
    background: @color-outer-bg;
}

body.outer .layout > .layout-row.layout-head {
    background: @color-outer-header;
}

//
// Side navigation bar
//

@color-sidebarnav-bg: @secondary-color-light;

#layout-sidenav {
    background-color: @color-sidebarnav-bg;
}

//
// Popover
//

@color-popover-head-bg: @primary-color-dark;

div.control-popover {
    .popover-head {
        background: @color-popover-head-bg;
    }

    &.placement-bottom .popover-head:before {
        border-bottom-color: @color-popover-head-bg;
    }

    &.placement-left .popover-head:before {
        border-left-color: @color-popover-head-bg;
    }

    &.placement-right .popover-head:before {
        border-right-color: @color-popover-head-bg;
    }
}

//
// Popup
//

@color-popup-header-bg: @primary-color-dark;

.modal-header {
    background: @color-popup-header-bg;
}

//
// List
//

@color-list-stripe-active: @primary-color-light;
@color-list-active-sort: @primary-color-dark;

table.table.data {
    tbody {
        tr.active td {
            &:first-child {
                border-left: 3px solid @color-list-stripe-active;
            }
        }
    }
}

//
// Breadcrumb
//

@color-breadcrumb-background: mix(rgb(43,43,43), @secondary-color-dark, 50%);

.control-breadcrumb {
    background-color: @color-breadcrumb-background;
}

//
// Fancy layout
//

@color-fancy-form-tabless-fields-bg: @primary-color-light;
@color-fancy-master-tabs-bg: @primary-color-dark;
@color-fancy-form-inactive-tab: mix(black, desaturate(@primary-color-dark, 14.5%), 5%);
@color-fancy-form-placeholder: lighten(@primary-color-light, 30%);

.fancy-layout {
    .control-tabs, &.control-tabs {
        &.master-tabs {
            > div > div.tabs-container {
                background: @color-fancy-master-tabs-bg;
            }
        }

        &.secondary-tabs {
            &.content-tabs {
                &.primary-collapsed {
                    > div > ul.nav-tabs {
                        background: @color-fancy-form-tabless-fields-bg;
                    }
                }
            }
        }

        &.primary-tabs {
            > div > ul.nav-tabs {
                &.master-area {
                    background: @color-fancy-form-tabless-fields-bg;
                }
            }
        }

        &.master-tabs {
            > div > div.tabs-container > ul.nav-tabs > li {
                a > span.title {
                    background-color: @color-fancy-form-inactive-tab;

                    //
                    // Disabled: See BrandSettings::makeTabSvg()
                    //
                    //&:before, &:after {
                    //    background-image: url(~'@{tab-svg}');
                    //}

                }
                &.active {
                    a > span.title {
                        background-color: @color-fancy-form-tabless-fields-bg;
                    }
                }
            }
        }
    }

    .form-tabless-fields {
        &,
        .loading-indicator-container .loading-indicator {
            background: @color-fancy-form-tabless-fields-bg;
        }
        input[type=text]::-webkit-input-placeholder {
            color: @color-fancy-form-placeholder;
        }
    }
}

//
// Component List
//

@color-component-list-bg: @secondary-color-dark;

div.control-componentlist {
    background-color: @color-component-list-bg;

    &.droppable {
        background-color: lighten(@color-component-list-bg, 20%);
    }
}

.fancy-layout {
    .control-tabs, &.control-tabs {
        &.primary-tabs {
            > div > ul.nav-tabs {
                &.component-area {
                    background: @color-component-list-bg;
                }
            }
        }
    }
}

//
// File List
//

@color-list-active-border: @primary-color-light;

.control-filelist {
    ul li.active a:after {
        background: @color-list-active-border;
    }
}

.control-assetlist {
    ul li.active a.link:after {
        background: @color-list-active-border;
    }
}

.nav.selector-group {
    li {
        &.active {
            border-color: @color-list-active-border;
        }
    }
}

//
// TreeView
//

.control-treeview {
    ol {
        > li {
            &.active {
                > div {
                    &:after {
                        background: @color-list-active-border;
                    }
                }
            }
        }
    }
}

//
// Sidenav Tree
//

@color-sidebarnav-bg: @secondary-color-light;
@color-sidebarnav-tree-group-bg: @secondary-color-dark;
@color-sidebarnav-tree-inactive-bg: mix(white, @secondary-color-light, 7%);
@color-sidebarnav-tree-active-bg: @secondary-color-light;
@color-sidebarnav-tree-active-marker: @primary-color-light;

.sidenav-tree {
    background: @color-sidebarnav-bg;

    ul.top-level > li {
        > div.group h3 {
            background: @color-sidebarnav-tree-group-bg;
        }

        > ul li {
            a {
                background: @color-sidebarnav-tree-inactive-bg;
            }
            &.active a {
                background: @color-sidebarnav-tree-active-bg;

                &:before {
                    background: @color-sidebarnav-tree-active-marker;
                }
            }

            &:hover a {
                background: @color-sidebarnav-tree-active-bg;
            }
        }
    }
}