// MIXINS
@mixin o-base-settings-horizontal-padding($padding-base: $input-btn-padding-y-sm) {
    padding: $padding-base $o-horizontal-padding;

    @include media-breakpoint-up(xl) {
        padding-left: $o-horizontal-padding*2;;
    }
}

// Use a very specif selector to overwrite generic form-view rules
.o_form_view.o_form_nosheet.o_base_settings {
    display: flex;
    flex-flow: column nowrap;
    padding: 0px;
}

// BASE SETTINGS LAYOUT
.o_base_settings {
    height: 100%;

    .o_control_panel {
        flex: 0 0 auto;

        .o_panel {
            display: flex;
            flex-flow: row wrap;
            width: 100%;

            .title, .o_setting_search {
                flex: 1 0 auto;
                width: map-get($o-extra-grid-breakpoints, vsm) / 2;
            }

            .o_setting_search {
                position: relative;

                .searchInput {
                    height: 28px;
                    padding: 0px;
                    border: 0px;
                    border-bottom: 1px solid gray('400');
                    border-color: gray('700');
                    box-shadow: none;
                    font-weight: 500;
                }

                .searchIcon {
                    @include o-position-absolute(4px, 0);
                    color: gray('700');
                }
            }
        }

        .o_form_statusbar {
            padding: 0;
            margin: 5px 0px;
            border: 0;

            .btn-primary, .btn-link  {
                padding: $btn-padding-y-sm $btn-padding-x-sm;
            }

            .btn-link {
                @include o-hover-text-color($link-color, $link-hover-color);
            }
        }
    }

    .o_setting_container {
        display: flex;
        flex: 1 1 auto;

        overflow: auto;

        .settings_tab {
            display: flex;
            flex: 0 0 auto;
            flex-flow: column nowrap;
            background: gray('900');
            overflow: auto;
            padding-top: $o-horizontal-padding*0.5;

            .selected {
                background-color: gray('900');
                box-shadow: inset 3px 0 0 $o-brand-primary;

                .app_name {
                    color: white;
                }
            }

            .tab {
                display: flex;
                padding: 0 $o-horizontal-padding*2 0 $o-horizontal-padding;
                height: 40px;
                color: gray('400');
                font-size: 13px;
                line-height: 40px;
                cursor: pointer;
                white-space: nowrap;

                .icon {
                    width: 23px;
                    min-width: 23px;
                    margin-right: 10px;
                }
            }
        }

        .settings {
            position: relative;
            flex: 1 1 100%;
            background-color: $o-view-background-color;
            overflow: auto;

            > .app_settings_block {
                h2 {
                    margin-bottom: 0;
                    @include o-base-settings-horizontal-padding;
                    background-color: gray('200');
                    font-size: 15px;
                    font-weight: bold;

                    &:first-of-type {
                        // Necessary to overwrite mt32 class
                        margin-top: 10px!important;
                    }
                }

                .o_settings_container {
                    max-width: map-get($grid-breakpoints, lg); // Provide a maximum container size to ensure readability
                    @include o-base-settings-horizontal-padding(0);
                }
            }

            .settingSearchHeader {
                display: flex;
                margin: 30px 0 10px;
                @include o-base-settings-horizontal-padding;
                background-color: gray('200');

                .icon {
                    width: 25px;
                    height: 25px;
                    margin-right: 10px;
                }

                .appName {
                    color: $headings-color;
                    font-size: 17px;
                }
            }

            .notFound {
                color : $text-muted;
                text-align: center;
                font-size: 25px;
                padding-top: 50px;
            }

            .highlighter {
                background: yellow;
            }
        }

        .d-block {
            display: block!important;
        }
    }
}