/* ===================================================================== */
/*                             Onglet.css                                */
/* � 2019  Dunin Technologie Inc.                                       */
/* ===================================================================== */

/* - DÉFINITION -------------------------------------------------------- */
/* Affichage des onglets.                                                */
/* --------------------------------------------------------------------- */

/* - NOTES ------------------------------------------------------------- */
/* --------------------------------------------------------------------- */

/* --------------------------------------------------------------------- */
/* Wrapper global.                                                       */

.ActOnglet
  {
    flex: 1;
    flex-direction:column;            /* Boutons en haut du contenu      */
  }


/* --------------------------------------------------------------------- */
/* Wrapper des boutons.                                                  */

.ActOnglet > .Boutons
  {
    flex: 0;
    min-height: auto;                 /* Annule le min-height:0          */
    margin-bottom: 2px;
    margin-top: 2px;
  }

.ToolBarLayout .Onglet2D3D .ActOnglet:not(.Stepper) > .Boutons /* Barre d'outils - Layout     */
{
  margin-bottom: 0px;
  margin-top: 0px;
  border-bottom: none;
}

/* --------------------------------------------------------------------- */
/* Wrapper deu contenu.                                                  */

.ActOnglet > .Contenu
  {
    flex: 1;
  }

/* --------------------------------------------------------------------- */
/* Boutons.                                                              */

.ActOnglet > .Boutons > button
  {
    background-color: var(--couleurBoutonOnglet);
    border: none;
  }

.ActOnglet:not(.Stepper) > .Boutons > button 
  {
    padding: 8px 0px;
    margin-right: 26px;
  }

/* Ligne sous le bouton actif et inactif en mouse hover*/
.ActOnglet:not(.Stepper) > .Boutons > .Actif   { border-bottom: solid 4px var(--couleurBordureBoutonOngletActif); }
.ActOnglet:not(.Stepper) > .Boutons > .Inactif { border-bottom: solid 4px transparent; transition: border-bottom 200ms ease-in-out;}
.ActOnglet:not(.Stepper) > .Boutons > .Inactif:hover { border-color: var(--couleurBordureBoutonOngletActif) }
.ActOnglet:not(.Stepper) > .Boutons            { border-bottom: solid 1px var(--couleurBordureBoutonOnglet) }  /* Ligne sous la barre de boutons */

.ActOnglet.Small:not(.Stepper) > .Boutons > .Actif   { border-bottom: solid 2px var(--couleurBordureBoutonOngletActif)} /* Ligne sous le bouton actif   */
.ActOnglet.Small:not(.Stepper) > .Boutons > .Inactif { border-bottom: solid 2px transparent }  /* Ligne sous le bouton inactif */
.ActOnglet.Small:not(.Stepper) > .Boutons > .Inactif:hover { border-color: var(--couleurBordureBoutonOngletActif) }  /* Apparence de l'état mouse hover */
.ActOnglet.Small:not(.Stepper) > .Boutons            { border-bottom: solid 0px }  /* Ligne sous la barre de boutons */

/* --------------------------------------------------------------------- */
/* 'Steppers'.                                                           */

.Stepper > .Boutons
  {
    padding: 0px;
    flex: none;                       /* Efface la valeur d�finie par ActOnglet > .Boutons */
    flex-shrink: 1;                   /* Pour entrer ds l'espace dispo   */
    overflow : auto;
    min-Height: fit-content;
  }

.Stepper > .Boutons > button
  {
    padding: 0px;
    margin: 0px 4px 0px 4px;
    height: auto;
    border: none;
    text-align: left;
    background-color: var(--couleurBoutonStepper);
  }

.Stepper.Grand > .Boutons > button, .Stepper.Grand > .Boutons > button > span  {  width: 200px  }
.Stepper.Petit > .Boutons > button, .Stepper.Petit > .Boutons > button > span  {  width: 158px  }

.Stepper.Grand > .Boutons > .Actif::before           { content: url("../../Client/Imgs/StepperActif.svg");          transform: scale(0.89); transform-origin: left }
.Stepper.Grand > .Boutons > .Actif.Dernier::before   { content: url("../../Client/Imgs/StepperActifDernier.svg");   transform: scale(0.89); transform-origin: left }
.Stepper.Grand > .Boutons > .Inactif::before         { content: url("../../Client/Imgs/StepperInactif.svg");        transform: scale(0.89); transform-origin: left }
.Stepper.Grand > .Boutons > .Inactif.Dernier::before { content: url("../../Client/Imgs/StepperInactifDernier.svg"); transform: scale(0.89); transform-origin: left }
.Stepper.Petit > .Boutons > .Actif::before           { content: url("../../Client/Imgs/StepperActif.svg");          transform: scale(0.71); transform-origin: left }
.Stepper.Petit > .Boutons > .Actif.Dernier::before   { content: url("../../Client/Imgs/StepperActifDernier.svg");   transform: scale(0.71); transform-origin: left }
.Stepper.Petit > .Boutons > .Inactif::before         { content: url("../../Client/Imgs/StepperInactif.svg");        transform: scale(0.71); transform-origin: left }
.Stepper.Petit > .Boutons > .Inactif.Dernier::before { content: url("../../Client/Imgs/StepperInactifDernier.svg"); transform: scale(0.71); transform-origin: left }

/* --------------------------------------------------------------------- */
/* Ajouter un encadré et des paddings dans la fenêtre «Ajouter des items»
 dans le layout - CuisineBase et Avivia                                  */
.Layout.ActOnglet {padding: 10px; margin: 4px;}
.Layout.ActOnglet > .Boutons {margin-bottom: 30px;}
.Layout.ActOnglet .ActChoix {margin-bottom: 14px;}