.site-footer {
  padding: 2em 0 1em 0 !important;

  h4 {
    margin: 7px 0;
    white-space: nowrap;
  }

  &--is-medium {
    padding: 1em 0 !important;
  }
}

.footer-logo {
  @include sprite($logo-small);
  display: inline-block;
  text-indent: -9999px;
}

.footer-columns {
  > li {
    float: left;
    margin-bottom: 1em;
    padding-left: 8%;
    width: 25%;

    @include media($md-screen) {
      padding-left: 12%;
      width: 50%;
    }
    @include media($xs-screen) {
      padding-left: 7%;
    }
  }
}

@mixin footer-icon {
  content: "";
  margin: 0 8px -3px 0;
  display: inline-block;
  width: 16px;
  height: 16px;
}

.footer-links {
  li {
    display: block;
    float: left;
    margin-bottom: 5px;
    width: 100%;
  }

  a {
    font-size: $body-font-size-small;

    &.facebook:before {
      @include footer-icon;
      @include sprite($fb-footer);
    }

    &.github:before {
      @include footer-icon;
      @include sprite($github-footer);
    }

    &.twitter:before {
      @include footer-icon;
      @include sprite($twitter-footer);
    }

    &.slack:before {
      @include footer-icon;
      @include sprite($slack-footer);
    }
  }

  &--horizontal {
    li {
      display: inline-block;
      float: none;
      margin: 0;
      width: auto;

      a {
        padding: 0.5em;
      }
    }
  }
}
