$share-button-width: 32px;
$share-button-height: 32px;

.gem-c-share-links__link {
  margin-right: $gutter;
  margin-bottom: $gutter-one-third;
  @include bold-16($line-height: $share-button-height, $line-height-640: $share-button-height);
  text-decoration: none;
}

.gem-c-share-links__title {
  margin-bottom: $gutter-one-third;
}

.gem-c-share-links__link__icon {
  display: inline-block;
  width: $share-button-width;
  height: $share-button-height;
  margin-right: $gutter-one-third;
  vertical-align: top;
}

.direction-rtl {
  .gem-c-share-links__link {
    // By changing the link to inline-block the browser
    // calculates the icon and the text as a single run of text
    // rather than two. When they are considered to be two runs
    // the browser splits the first link, putting the text before
    // the second link, and the icon after the second link.
    display: inline-block;
    margin-right: 0;
    margin-left: $gutter;

    .gem-c-share-links__link__icon {
      margin-right: 0;
      margin-left: $gutter-one-third;
      vertical-align: middle;
    }
  }
}