a.mail__button {
  background-color: $blue;
  border-radius: 50px;
  bottom: 1em;
  color: $white;
  font-size: 1.5em;
  position: fixed;
  right: 1em;
  text-align: center;
  z-index: 9;
  padding: 1em;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: 'Source Sans Pro';
  text-decoration: none;
}

a.mail__button:hover {
  width: auto;
  background-color: $blue;
}

.mail__button span {
  display: none;
}

.mail__button:hover span {
  display: inline;
  font-size: 0.875em;
}

.mail__button:hover i {
  display: none;
}

.footer__contact {
  background-color: $background-grey;
  border: 1px solid $border-active;
  bottom: 1em;
  padding: 2em;
  position: fixed;
  right: 1em;
  z-index: 10000;

  h3 {
    color: $blue;
  }

  p {
    color: $dark-text;
  }

  textarea {
    height: 20em;
  }

  form {
    width: 100%;
    .form-special-field {
      // hide field used as honey-pot
      display: none;
    }
  }
}

.footer__contact--close {
  float: right;
  font-size: 1.3em;

  &:hover {
    color: $dark-blue;
  }
}

.footer__contact .button {
  float: right;
}

@include media-desktop-up {
  .footer__contact {
    width: 30em;
    bottom: 1em;
  }

  .footer__alwayson {
    bottom: 2.5em;
  }
}
