.social

ul 
  margin: 0 0 0 5px
  padding: 0
li
  +inline-block
  +breakpoint($mobile-device)
    margin: 0 0 8px
li ~li
  +breakpoint($desktop)
    margin: 0 0 0 5px
a
  +hide-text
  +inline-block
  +border-radius(20px)
  font-size: 0
  width: $header-icon
  height: $header-icon

  &.facebook 
    +svg-bg-simple("facebook")
  &.twitter
    +svg-bg-simple("twitter")
  &.mail
    +svg-bg-simple("email")
  &.more
    +svg-bg-simple("more-social")

+breakpoint($print-media)
  display: none