//
// Tabs control
// - The control supports 3 basic CSS classes: master, primary and secondary.
// --------------------------------------------------

@color-scroll-indicator:                    @color-grey-2;
@color-tab-bg:                              #ffffff;

@nav-link-padding:                          10px 15px;
@nav-link-hover-bg:                         @gray-lighter;

@nav-disabled-link-color:                   @gray-light;
@nav-disabled-link-hover-color:             @gray-light;

@nav-open-link-hover-color:                 #fff;
@nav-tabs-border-color:                     #ddd;
@nav-tabs-link-hover-border-color:          @gray-lighter;

@nav-tabs-active-link-hover-bg:             @body-bg;
@nav-tabs-active-link-hover-color:          @gray;
@nav-tabs-active-link-hover-border-color:   #ddd;

@nav-tabs-justified-link-border-color:        #ddd;
@nav-tabs-justified-active-link-border-color: @body-bg;

@import "tab.master.less";
@import "tab.primary.less";
@import "tab.secondary.less";
@import "tab.pill.less";
@import "tab.auxiliary.less";
@import "tab.content.less";

.control-tabs {
    position: relative;
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }

    .horizontal-scroll-indicators(@color-scroll-indicator);

    &.scroll-active-before:before { color: @tab-border; }
    &.scroll-active-after:after { color: @tab-border; }

    &:before, &:after {
        top: 10px;
        margin-top: 0;
    }

    > ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
        white-space: nowrap;
        flex-wrap: nowrap;
        font-size: 0;
        overflow: hidden;
        border-bottom: none;
        vertical-align: bottom;

        > li {
            font-size: 15px;
            margin-right: 20px;
            position: relative;
            z-index: @zindex-tab - 2;

            &:last-child {
                margin-right: 0;
            }

            a {
                display: block;
                border-left: none;
                border-top: none;
                border-right: none;
                padding: 0 0 10px 0;
                color: @tab-color;
                font-weight: 400;
                overflow: hidden;
                text-decoration: none;

                &:hover {
                    background-color: transparent;
                    border-bottom-color: transparent;
                }

                &:before {
                    font-size: 14px;
                }

                > span.title > span {
                    max-width: 150px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: inline-block;
                    // margin-top: -4px;
                    // padding-top: 7px;
                    > span:not([class*="oc-icon"]) {
                        margin-right: 8px;
                    }
                }

                span.badge-colorpicker {
                    text-decoration: none;
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    border-radius: 6px;
                    background-color: var(--background-color, var(--bs-secondary));
                    margin-left: 15px;
                    margin-right: -15px;
                    opacity: .3;
                }
            }

            span.tab-close {
                display: none;
            }

            &.active {
                z-index: @zindex-tab;

                a {
                    color: @tab-active-color;

                    span.badge-colorpicker {
                        opacity: 1;
                        background-color: var(--background-color, var(--bs-primary));
                    }
                }

                &:after {
                    width: 100%;
                    height: 3px;
                    bottom: 0;
                    background: @tab-border;
                }

            }
        }
    }

    > div.tab-content {
        > div.tab-pane {
            padding: @padding-standard 0 0 0;
            display: none;
            .clearfix();

            &.active {
                display: block;

                &.layout-cell {
                   display: table-cell;
                }
            }

            &.pane-compact {
                padding: 0;
            }
            &.pane-padded {
                padding: 20px 20px 0 20px;
            }
            &.pane-bordered {
                border-left: 1px solid @tab-border;
                border-right: 1px solid @tab-border;
                border-bottom: 1px solid @tab-border;
            }
        }
    }

    &[data-closable] {
        > ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
            > li {
                margin-right: 5px;

                a {
                    padding-left: 20px !important;
                    padding-right: 0 !important;
                }

                span.tab-close {
                    display: block;
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    top: 5px;
                    left: -5px;
                    text-align: right;
                    font-size: 12px;
                    cursor: pointer;
                    color: @tab-color;
                    i {
                        display: inline-block;
                        z-index: @zindex-tab + 1;
                        top: -7px;
                        right: 5px;
                        position: relative;
                    }

                    &:hover {
                        color: @brand-danger;
                    }
                }

                &.active span.close {
                    color: @tab-color;
                }

                &[data-modified] {
                    span.tab-close i {
                        top: -4px;

                        &:before {
                            content: @icon-circle;
                            font-size: 9px;
                        }
                    }
                }
            }
        }
    }
}

&.hide-tabs {
    .control-tabs {
        ul.nav-tabs {
            display: none;
        }

        > div.tab-content > div.tab-pane {
            padding-top: 0;
        }
    }
}

.form-sidebar {
    .control-tabs.secondary {
        > div > ul.nav-tabs > li a {
            background: transparent;
        }
    }
}

// Tab modification for modals
.modal-content {
    .control-tabs.primary-tabs {
        > ul.nav-tabs, > div > ul.nav-tabs, > div > div > ul.nav-tabs {
            > li.active a:before {
                background: @popup-bg;
            }
        }
    }
}