/* Form
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.follower__form {
  position: relative;
}

.follower__form-input-container {
  flex-grow: 1;
}

.follower__form-container {
  display: flex;
  margin: 0 auto;
  align-items: center;
  border-radius: 4px;
  background: $white;
  padding: 2px;
  max-width: 300px;

  @include device-is('desktop') {
    flex-direction: row;
    max-width: 400px;
  }
}

/* Input
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.follower-email {
  height: 46px;
  width: 100%;
  border: none;
  border-radius: 5px;
  outline: none;
  font-size: 16px;
  color: $raven-grey;
  font-family: $font-lato;

  @include device-is('desktop') {
    padding-left: 16px;
  }
}

/* Button
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.follower-form__button {
  position: relative;
  border: 1px solid $periwinkle-blue;
  border-radius: 4px;
  min-width: 111px;
  padding: 10px 19px;
  font-size: 18px;
  font-weight: $font-bold;
  text-align: center;
  color: $white;
  outline: none;
}

.follower-form__button--default {
  background: $pix-blue;
}

.follower-form__button--pending {
  background: $jade;
}

.follower-button:before {
  content: '\00a0\00a0\00a0\00a0 Merci';
  position: absolute;
  z-index: 500;
  transform: rotateX(180deg);
  color: $white;
  letter-spacing: 1px;
  opacity: 0;
  transition: none;
}

.follower-button-is-error:before {
  content: '\00a0\00a0\00a0\00a0 Erreur';
}

.follower-button:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  opacity: 0;
  height: 100%;
  overflow: hidden;
  background-color: $vivid-blue;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  transition: width 10ms 600ms ease-in-out, background-color 300ms ease-in, opacity 250ms 300ms ease-in;
}

.follower-button-is-active {
  transform: rotateX(180deg);
  background-color: $white;
  box-shadow: 1px 1px 4px 1px transparent !important;
  transition: transform 300ms ease-in-out, background-color 300ms ease-in;
}

.follower-button-is-active:after {
  opacity: 1;
  background-color: green;
  width: 100%;
  transition: width 1s 0.5s ease-in-out, background-color 300ms 300ms ease-in, opacity 250ms 300ms ease-in;
}

.follower-button-is-active:before {
  opacity: 1;
  transition: opacity 250ms 1.5s ease-in;
}

.follower-button-is-error {
  transform: rotateX(180deg);
  background-color: $white;
  box-shadow: 1px 1px 4px 1px transparent !important;
  transition: transform 300ms ease-in-out, background-color 300ms ease-in;
}

.follower-button-is-error:after {
  opacity: 1;
  background-color: red;
  width: 100%;
  transition: width 1s 0.5s ease-in-out, background-color 300ms 300ms ease-in, opacity 250ms 300ms ease-in;
}

.load-email-button-is-error:before {
  opacity: 1;
  transition: opacity 250ms 1.5s ease-in;
}

.follower-info-message {
  width: 400px;
  margin: 0 auto;
  font-family: $font-lato;
  font-size: 15px;
  font-weight: $font-normal;
  font-style: normal;
  font-stretch: normal;
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.follower-info-message span,
.follower-info-message svg {
  display: inline-block;
  vertical-align: middle;
}

.follower-info-message.has-error {
  border-radius: 4px;
  background-color: $white;
  border: solid 2px $pure-orange;
  padding: 14px 91px;
  color: $pure-orange;
}

.follower-info-message.has-success {
  border-radius: 4px;
  background-color: $white;
  border: solid 2px $jade;
  padding: 14px 91px;
  color: $jade;
}
