/*Style   <button class="btn big primary lightgreen">  <!-- <i class="whatsapp"></i> -->  <p>Quero registrar</p>   </button>
   */
   .btn {width: fit-content; min-width: fit-content; border: 0;padding: var(--spac3) var(--spac4);border-radius: var(--box-border-radius-small);display: flex;align-items: center;gap: 10px;cursor: pointer; transition: .2s;text-decoration: none !important;}
   .btn p {padding: 0;margin: 0;color: inherit;font-size: 14px;font-weight: var(--font-medium); flex: none;}
   .btn i {width: 20px;height: 20px;}


   .btn.big {padding: var(--spac5) var(--spac6);}
   .btn.form {padding: var(--spac7) var(--spac6);}
   .btn.big p {font-size: var(--base-font-size);}


   .btn.small {padding: var(--spac1) var(--spac3);height: 28px;gap: 8px;font-size: 14px;}


    /* PRIMARY */
   .btn.primary.darkgreen {background-color: var(--darkgreen);color: var(--white);}
   .btn.primary.darkgreen i {background-color: var(--white);}
   .btn.primary.darkgreen:hover {background-color: var(--darkgreen-hover);}

   .btn.primary.lightgreen {background-color: var(--lightgreen);color: var(--white);}
   .btn.primary.lightgreen i {background-color: var(--white);}
   .btn.primary.lightgreen:hover {background-color: var(--lightgreen-hover);}

   .btn.primary.white {background-color: var(--white);color: var(--white);}
   .btn.primary.white i {background-color: var(--white);}
   .btn.primary.white:hover {background-color: var(--gray100);}

   .btn.primary.blue {background-color: var(--blue);color: var(--white);}
   .btn.primary.blue i {background-color: var(--blue);}
   .btn.primary.blue:hover {background-color: var(--blue-hover);}


    /* SECUNDARY */
   .btn.secundary{height: 24px;}
   .btn.secundary.darkgreen {background-color: transparent;border: 2px solid var(--darkgreen);color: var(--darkgreen);}
   .btn.secundary.darkgreen i {background-color: var(--darkgreen);}
   .btn.secundary.darkgreen:hover {background-color: var(--darkgreenbg);border: 2px solid var(--darkgreen-hover);color: var(--darkgreen-hover);}
   .btn.secundary.darkgreen:hover i {background-color: var(--darkgreen-hover);}


   .btn.secundary.lightgreen {background-color: transparent;border: 2px solid var(--lightgreen);color: var(--lightgreen);}
   .btn.secundary.lightgreen i {background-color: var(--lightgreen);}
   .btn.secundary.lightgreen:hover {background-color: var(--lightgreenbg);border: 2px solid var(--lightgreen-hover);color: var(--lightgreen-hover);}
   .btn.secundary.lightgreen:hover i {background-color: var(--lightgreen-hover);}
   
   .btn.secundary.white {background-color: transparent;border: 2px solid var(--white);color: var(--white);}
   .btn.secundary.white i {background-color: var(--white);}
   .btn.secundary.white:hover {background-color: #f2f2f210;border: 2px solid var(--gray100);color: var(--gray100);}
   .btn.secundary.white:hover i {background-color: var(--gray100);}

   .btn.secundary.blue {background-color: transparent;border: 2px solid var(--blue);color: var(--blue);}
   .btn.secundary.blue i {background-color: var(--blue);}
   .btn.secundary.blue:hover {background-color: var(--bluebg);border: 2px solid var(--gray100);color: var(--gray100);}
   .btn.secundary.blue:hover i {background-color: var(--gray100);}

    /* TERCEARY */
   .btn.terceary.darkgreen {background-color: transparent;color: var(--darkgreen);}
   .btn.terceary.darkgreen:hover {background-color: var(--darkgreenbg);}
   .btn.terceary.darkgreen i {background-color: var(--darkgreen);}

   .btn.terceary.lightgreen {background-color: transparent;color: var(--lightgreen);}
   .btn.terceary.lightgreen i {background-color: var(--lightgreen);}
   .btn.terceary.lightgreen:hover {background-color: var(--darkgreenbg);}

   .btn.terceary.white {background-color: transparent;color: var(--white);}
 
   .btn.terceary.blue {background-color: transparent;color: var(--blue);}