button[disabled] {
  opacity: .5;
}

button .button-content,
.button-ghost--black-thin .button-content,
.button-simple--gray .button-content,
.button--secondary .button-content,
.button-simple--black .button-content {
    max-width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: var(--font-size-small-mobile);
    margin: auto;
}

.button-content .text {
    margin: auto;
}

.button--medium .button-content {
    display: flex;
}

.button-content .icon {
    margin: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/*****************/
/* Boutons de contexte sur fond noir */
.button-context--black {
  border: 0;
  text-decoration: none;
  position: relative;
  color: var(--white);
  background-color: rgba(0, 0, 0, .48);
  -webkit-transition: background-color .25s, color .25s, opacity .25s;
  transition: background-color .25s, color .25s, opacity .25s;
}
/* Hover & focus */
.button-context--black.active:not([disabled]):not(div),
.button-context--black:active:not([disabled]):not(div),
.button-context--black:focus:not([disabled]):not(div),
.button-context--black:hover:not([disabled]):not(div) {
  background-color: var(--black);
  color: var(--white);
}

/*****************/
/* Petits boutons ronds */
.button--tiny {
  height: 2.4rem;
  min-width: 2.4rem;
  border-radius: 1.2rem;
  padding: 0 1rem;
  font-weight: 400;
  font-size: 1.1rem;
}

[class*=button-context--].button--tiny {
  padding: 0;
}

[class*=button-simple--].button--small {
  height: auto;
  font-size: var(--font-size-small-mobile);
  padding: .5rem .2rem;
}

[class*=button-simple--].button--tiny {
  height: auto;
  padding: .5rem .2rem;
}

/*****************/
/* Bouton simple gris */
.button-simple--gray {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  -webkit-transition: color .2s;
  transition: color .2s;
  text-align: left;
  word-break: break-word;
  color: var(--gray-600);
  padding: 0 .2rem;
  height: auto;
  font-size: var(--font-size-base);
  text-decoration: none;
}
/* Hover & focus */
.button-simple--gray.underlined:not([disabled]):not(div):focus,
.button-simple--gray.underlined:not([disabled]):not(div):hover {
  text-decoration: underline;
  color: var(--black);
}

/*****************/
/* Bouton blanc */
.button--white {
    font-family: var(--font-family);
    position: relative;
    height: 4.8rem;
    min-width: 4.8rem;
    border-radius: 2.4rem;
    padding: 0 var(--spacer-pop-small);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: none;
    font-weight: 700;
    text-decoration: none;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    line-height: 1;
    font-size: var(--font-size-base-mobile);

    background-color: var(--white);
    color: var(--black);
    -webkit-transition: background-color .25s, color .25s;
    transition: background-color .25s, color .25s;
}

.button--white:hover:not([disabled]):not(div) {
    -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%), 0 4px 8px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%), 0 4px 8px 0 rgb(0 0 0 / 20%);
}


/*****************/
/* Bouton noir */
.button--black,
.button-ghost--black-thin {
  font-family: var(--font-family);
  position: relative;
  height: 4.8rem;
  min-width: 4.8rem;
  border-radius: 2.4rem;
  padding: 0 var(--spacer-pop-small);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: none;
  font-weight: 700;
  text-decoration: none;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  letter-spacing: .05rem;
  font-size: var(--font-size-base-mobile);

  background-color: var(--black);
  color: var(--white);
  -webkit-transition: background-color .25s, color .25s;
  transition: background-color .25s, color .25s;
}

.button--black:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3.2rem;
  -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%), 0 4px 8px 0 rgb(0 0 0 / 20%);
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%), 0 4px 8px 0 rgb(0 0 0 / 20%);
  opacity: 0;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
}

/* Hover & focus */
.button--black.active:not([disabled]):not(div):before,
.button--black:active:not([disabled]):not(div):before,
.button--black:focus:not([disabled]):not(div):before,
.button--black:hover:not([disabled]):not(div):before {
  opacity: 1;
}

/*****************/
/* Bouton simple noir */
.button-simple--black {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  -webkit-transition: color .2s;
  transition: color .2s;
  text-align: left;
  word-break: break-word;
  color: var(--black);
  padding: 0 .2rem;
  height: auto;
  font-size: var(--font-size-base);
  text-decoration: none;
}

/* Hover & focus */
.button-simple--black.underlined:not([disabled]):not(div):focus,
.button-simple--black.underlined:not([disabled]):not(div):hover {
  text-decoration: underline;
}

/*****************/
/* Bouton medium */
.button--medium {
  height: 4rem;
  min-width: 4rem;
  border-radius: 2rem;
  padding: 0 var(--spacer-pop-small);
  font-size: 1.1rem;
}

/*****************/
/* Bouton big */
.button--big {
  height: 6.4rem;
  min-width: 100%;
  border-radius: 3.2rem;
  padding: 0 var(--spacer-pop-large);
  font-size: 2.8rem;
}

/*****************/
.button--secondary {
  position: relative;
  background-color: var(--yellow);
  color: var(--black);
  -webkit-transition: background-color .25s,color .25s;
  transition: background-color .25s,color .25s;
  font-family: var(--font-family);
  font-weight: 700;
  text-decoration: none;

  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.button--secondary:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 2.4rem;
  -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%), 0 4px 8px 0 rgb(0 0 0 / 20%);
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%), 0 4px 8px 0 rgb(0 0 0 / 20%);
  opacity: 0;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
}

.button--secondary.active:not([disabled]):not(div):before,
.button--secondary:active:not([disabled]):not(div):before,
.button--secondary:focus:not([disabled]):not(div):before,
.button--secondary:hover:not([disabled]):not(div):before {
  opacity: 1;
}

/*****************/
/* Icônes selon les boutons */
[class*=button-ghost--].button--medium.icon-left [class*=icon-],
[class*=button-simple--].button--medium.icon-left [class*=icon-],
[class*=button-simple--].button--small.icon-left [class*=icon-],
[class*=button-simple--].button--tiny.icon-left [class*=icon-] {
  margin-right: .3rem;
}

/* Mot de passe oublié */
/* On décale l'icône en seconde position */
[class*=button--].icon-right [class*=icon],
[class*=button-context--].icon-right [class*=icon],
[class*=button-ghost--].icon-right [class*=icon] {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
  margin-left: .5rem;
}

.button-ghost--black-thin,
.button-ghost--black-thin:active:not([disabled]):not(div),
.button-ghost--black-thin:focus:not([disabled]):not(div) {
  color: black;
}

.button-ghost--black-thin:hover:not([disabled]):not(div) {
  background-color: var(--neutrals-gray);
  color: var(--white);
}

.button-ghost--black-thin {
  background: var(--transparent-gray);
  -webkit-transition: color .25s;
  transition: color .25s;
}

#btn-resend-email.disabled {
    cursor: not-allowed;
    pointer-events: none;
    background-color: rgba(0, 0, 0, .48);
}

@media (min-width: 576px) {

  [class*=button-simple--].button--small {
    font-size: var(--font-size-base-mobile);
  }

  [class*=button-simple--].button--small .button-content {
    font-size: 1.4rem;
  }

  .button--big {
    font-size: 3.2rem;
  }

  .button--medium .button-content {
    font-size: 1.2rem;
  }
  /* Icônes */
  [class*=button-simple--].button--medium.icon-left [class*=icon-],
  [class*=button-simple--].button--small.icon-left [class*=icon-],
  [class*=button-simple--].button--tiny.icon-left [class*=icon-] {
    margin-right: .5rem;
    width: 1.6rem;
    height: 1.6rem;
  }

  [class*=button--].icon-right [class*=icon],
  [class*=button-context--].icon-right [class*=icon],
  [class*=button-ghost--].icon-right [class*=icon] {
    margin-left: var(--spacer-pop-tiny);
  }
}

.button--tiny {
    font-size: var(--font-size-small-mobile);
}

.auth-switch .button-content .text {
    padding: 0.2rem 0 0.2rem 0;
}

.auth-switch .button-content .icon {
    height: 18px;
    width: 16px;
    padding: 0.05rem;
    align-content: center;
    display: flex;
    margin-left: 0.5rem;
}

.form .submit .button-content {
    font-size: var(--font-size-base-mobile);
    letter-spacing: 0.1rem;
}

.form .submit .button-content .text {
    padding: 0.4rem 0 0.4rem 0;
}

.form .submit .button-content .icon {
    height: 2.4rem;
    width: 2.4rem;
    padding: 0.1rem;
    align-content: center;
    display: flex;
}

.footer .button-content .text {
    padding: 0.4rem 0 0.4rem 0;
}

.footer .button-content .icon {
    height: 16px;
    width: 16px;
    padding: 0.05rem;
    align-content: center;
    display: flex;
    margin-right: 0.5rem;
}

.btn-modifier-email {
  font-size: var(--font-size-base-mobile);
  text-decoration: underline;
  color: black;
}

#btn-continue.active {
    background-color: var(--green);
    color: black;
}