.nav-tabs {
    overflow-x: initial;
    overflow-y: initial;
}

.tabss .nav-tabs {
    _display: flex;
}
.tabss .nav-tabs > li {
    flex-grow: 1;
}

.tabss:not(.--jsfied) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

container.classList.add('--jsfied')


.tabss {
    position: relative;
}
.tabss .-secondary {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background : white;
    z-index : 1000;
    padding-top : 0px;
    padding-bottom : 0px;
    padding-left : 0px;
    padding-right : 0px;
    border : 1px solid #86BC25;
    width : max-content;
}
.tabss.--show-secondary .-secondary {
    display: block;
}


.tabss .--hidden {
    display: none;
}


.tabs {
    position: relative;

&:not(.--jsfied) {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 }

// shared

   .--hidden {
       display: none;
   }



// primary

   .-primary {
       display: flex;

> li {
    flex-grow: 1;
    background-color: $color-bg;

+ li {
    border-left: 1px solid $color-bg--dark;
}

> a,
> button {
    white-space: nowrap;
    padding: 1em 0.6em;
    box-shadow: inset 0 -0.2em 0 $color-bg--dark;

&:hover  { background-color: $color-bg--dark; }
&:active { background-color: $color-bg--darker; }
}
}

.-more {
    background-color: $color-bg--dark;

> button span {
    display: inline-block;
    transition: transform 0.2s;
}
}
}

&.--show-secondary .-primary {
.-more > button span {
    transform: rotate(180deg);
}
}

// secondary

   .-secondary {
       background : white;
       max-width: 100%;
       min-width: 10em;
       display: none;
       position: absolute;
       top: 100%;
       right: 0;
       box-shadow: 0 0.3em 0.5em rgba(#000, 0.3);
       animation: nav-secondary 0.2s;

li {
    border-top: 1px solid $color-bg;
    background-color: $color-bg--dark;
}

a,
button {
    padding: 0.6em;

&:hover  { background-color: $color-bg--darker; }
&:active { background-color: $color-bg; }
}
}

&.--show-secondary .-secondary {
     display: block;
 }
}

// keyframes

@keyframes nav-secondary {
    0% {
        opacity: 0;
        transform: translateY(-1em);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.but_more_onglet {
    background-color: #86BC25;
    color: white;
    border : 0px;
    line-height:39px;
}

.-secondary li {
    _line-height:25px;
    padding:10px;
}

.-secondary li:hover a {
    color : white;
    text-decoration: none;
}
.-secondary li:hover {
    color : white;
    background-color: #86BC25;
}

.-secondary .fa {
    display : inline;
}