// out: false
@import "../shared/styles.less";

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;

    background-color: transparent;

    header {
        display: none;
    }

    &, iframe {
        overflow: hidden;
        width: 100%;
        height: 100%;
        border: none;
    }

    .cd-tabs {
        height: 100%;
        max-width: 100%;
        width: 100%;
        margin: 0;

        &.tab-bar-hidden {
            nav {
                display: none !important;
            }

            &::after {
                display: none !important; // remove gradient on the right
            }

            .cd-tabs-content {
                li {
                    border-bottom: none !important;
                }
            }
        }

        nav {
            
            height: auto;
            position: relative;
            float: none;

            background: transparent; // fade(@main-color, @header-bgcolor-opacity);
            

            .cd-tabs-navigation {
                background: transparent;
                //opacity: 0.5;
                width: 100%;
                //height: @font-size;
                height: auto;
                
                overflow-y: hidden;
                overflow-x: auto;
                white-space: nowrap;

                a {
                    height: @font-size;
                    font-size: @font-size * 0.5;
                    padding-top: 0;
                    padding-left: @font-size;
                    padding-right: @font-size;
                    display: inline-block;

                    line-height: @font-size;
                    width: auto;
                    text-align: left;

                    opacity: 0.5;

                    color: @main-color; //@header-fgcolor;

                    &::before {
                        display: none;
                    }

                    &:hover:not(.selected) {
                        color: @main-color;
                        background: @header-fgcolor;
                        color: @header-fgcolor; //@main-color;
                        //background: @header-fgcolor;
                        background-color: @main-color !important; 
                        opacity: 0.25;
                    }

                    &.selected {
                        box-shadow: inset 0  0 @accent-color;
                        color: @header-fgcolor; //@main-color;
                        //background: @header-fgcolor;
                        background-color: @main-color !important; // fade(@main-color, @header-bgcolor-opacity) !important;
                    }
                }
            }
        }

        .cd-tabs-content {
            min-height: 0 !important; /* Do not set a minimum height */
            height: 100%;
            background-color: transparent;

            li {
                height: 100%;
                padding: 0;
                border-bottom: @font-size solid transparent;
            }
        }
    }
}

body {
    &.theme-dark {
        nav {
            
            height: auto;
            position: relative;
            float: none;

            background: transparent; // fade(@main-color, @header-bgcolor-opacity);
            

            .cd-tabs-navigation {

                a {
                    color: @header-fgcolor; //@header-fgcolor;

                    &:hover:not(.selected) {
                        color: @main-color;
                        background: @header-fgcolor;
                        color: @header-fgcolor; //@main-color;
                        //background: @header-fgcolor;
                        background-color: @main-color !important; 
                        opacity: 0.25;
                    }

                    &.selected {
                        box-shadow: inset 0  0 @accent-color;
                        color: @header-fgcolor; //@main-color;
                        //background: @header-fgcolor;
                        background-color: @main-color !important; // fade(@main-color, @header-bgcolor-opacity) !important;
                    }
                }
            }
        }
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    @scrollbar_size: @font-size / 5;

    .cd-tabs-navigation {
        &.overflows {
            //height: (@font-size + @scrollbar_size) !important;
        }
    }

    ::-webkit-scrollbar {
        width: @scrollbar_size;

        &:horizontal {
            height: @scrollbar_size;
        }
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background-color: fade(@main-color, 50%);
    }

}
