.social-menu {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: $gutter 0;
  width: 100%;
  list-style: none;
  line-height: 1;

  li {
    flex: 0 0 auto;
    margin: 0;
    padding: 2px 8px;

    &:first-of-type {
      padding-left: 0;
    }
  }

  a {
    text-decoration: none;
    color: $di-purple;
    font-size: 14px;

    &:hover,
    &:active {
      border-bottom: 1px solid $di-purple;
      color: $di-purple;
    }
  }


  footer & {
    justify-content: flex-end;
  }
}

@media screen and (max-width: #{$screen-tablet - 1}) {
  .social-menu {
    header & { display: none; }
  }
}