.social-shares {
  @include font-brandon-bold;
  line-height: 1; // reduce extra whitespace below inline-block buttons

  .article__header & {
    @include shopify-breakpoint($tablet-up) {
      float: right;
    }

    @include shopify-breakpoint($mobile) {
      margin-top: em($gutter / 2);
    }
  }
}

.social-shares--full {
  padding: $gutter 0;
  margin-bottom: $gutter;
  clear: both;
  border: $border-grey;
  border-width: 1px 0;

  .social-shares__icon {
    @include shopify-breakpoint($tablet-up) {
      width: auto;
      padding: 0 8px 0 $gutter;

      > .visuallyhidden {
        @include showvisuallyhidden;
      }
    }
  }
}

.social-shares__icon {
  width: em(25, 14);
  height: em(25, 14);
  margin-bottom: 0;
  line-height: em(25, 14);
  font-size: em(14);
  border-radius: $border-radius;
  background-position: left center;
  color: $color-white;

  @include shopify-breakpoint($mobile) {
    width: em(36, 14);
    height: em(36, 14);
    line-height: em(36, 14);
    margin-right: em(10, 14);
    float: left;
  }
}

.social-shares__count {
  margin-right: 10px;

  &,
  > span {
    vertical-align: top;
  }
}

.social-shares__count--with-icons {
  line-height: em(25);

  @include shopify-breakpoint($mobile) {
    line-height: em(36, 14);
  }
}

.icon-facebook--square {
  @include button-bg(map-get($icon-colors, 'blue_fb'));
  background-image: asset-svg-url('facebook', $color-white);
}

.icon-twitter--square {
  @include button-bg(map-get($icon-colors, 'blue_twitter'));
  background-image: asset-svg-url('twitter', $color-white);
}

.icon-linkedin--square {
  @include button-bg(map-get($icon-colors, 'blue_linkedin'));
  background-image: asset-svg-url('linkedin', $color-white);
}