/* ===================================================================== */
/*                             OngletCustom.css                          */
/*   2020  Dunin Technologie Inc.                                       */
/* ===================================================================== */

/* - DÉFINITION -------------------------------------------------------- */
/* Dispositions / espacements.                                           */
/* --------------------------------------------------------------------- */

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

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

.Stepper.Petit > .Boutons > button#General.Actif, .Stepper.Petit > .Boutons > button#General.Inactif { width: 168px;}

.Stepper.Petit.Layout > .Boutons > button, .Stepper.Petit.Layout > .Boutons > button > span {width: fit-content;}
.Stepper.Petit > .Boutons > button {flex-direction: row; align-items: center; margin-right: 20px;}
.Stepper.Petit > .Boutons > button > span {text-transform: uppercase;}

/* Préchargez le SVG pour éviter l'effet de scintillement (flickering et flashing) au mouse hover */
.Stepper.Petit > .Boutons > .Inactif::after         {content: url("../../Client/Imgs/StepperActif.svg"); display: none;}
.Stepper.Petit > .Boutons > .Inactif.Dernier::after {content: url("../../Client/Imgs/StepperActifDernier.svg"); display: none;}
/* Apparence de l'état mouse hover */
.Stepper.Petit > .Boutons > .Inactif:hover::before         { content: url("../../Client/Imgs/StepperActif.svg"); }
.Stepper.Petit > .Boutons > .Inactif.Dernier:hover::before { content: url("../../Client/Imgs/StepperActifDernier.svg"); }

.Stepper.CommEdit {height: 60px; justify-content: center;}
.Stepper.CommEdit > .Boutons > button {flex-direction: row; margin: 0px}
.Stepper.CommEdit > .Boutons {margin-left: 20px;}
.Stepper.CommEdit > .Boutons > .Actif > span {color: var(--couleurTexteGrandStepper);}
.Stepper.CommEdit > .Boutons > button.Inactif:hover > span {color: var(--couleurTexteGrandStepper);} /* Apparence de l'état mouse hover */
.Stepper.CommEdit > .Boutons > button > span {text-transform: uppercase; margin-left: 16px; margin-right: 16px;}

.Stepper.CommEdit > .Boutons > button.Actif:not(:nth-child(1))::before   { content: url("../../Client/Imgs/grand-stepper-trait-vertical2px.svg"); } /* transform: scale(0.71); transform-origin: left */
.Stepper.CommEdit > .Boutons > button.Inactif:not(:nth-child(1))::before { content: url("../../Client/Imgs/grand-stepper-trait-vertical2px.svg"); } /* transform: scale(0.71); transform-origin: left */

/* Stepper verticale de layers du layout */
#Layer_Gamme.Actif         { background: url("../../Client/Imgs/mini-stepper-vertical-etape-gammes-etat-selected-sans-trait.svg") no-repeat left center; }
#Layer_Gamme.Inactif       { background: url("../../Client/Imgs/mini-stepper-vertical-etape-gammes-etat-normal-sans-trait.svg") no-repeat left center; }
#Layer_Gamme.Inactif:hover { background: url("../../Client/Imgs/mini-stepper-vertical-etape-gammes-etat-selected-sans-trait.svg") no-repeat left center; }
#Layer_Gamme.Inactif::after  { content: url("../../Client/Imgs/mini-stepper-vertical-etape-gammes-etat-selected-sans-trait.svg"); visibility: hidden;  width: 0; height: 0;   }

.OngletsConfigItem {margin-left: 20px}