.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 #89B9D0;
		}
		.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: #89B9D0;
	color: white;
	border : 0px;
	line-height:38px;
}

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

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

.-secondary .fa {
	display : inline;
}