.share-bar {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 24px 0;

  @include sm {
    margin: 50px 0;
  }

  &__wrapper {
    width: 100%;
    max-width: #{$text-width-medium + 2 * $gutter};
    padding: 0 $gutter;
    margin: 0 auto;

    .share-bar--small & {
      max-width: #{$text-width-small + 2 * $gutter};
    }

    .share-bar--large & {
      max-width: #{$text-width-large + 2 * $gutter};
    }

    @include sm {
      padding: 0 $gutter-mobile;
    }
  }

  &__container {
    display: flex;
    align-items: center;

    .share-bar--center & {
      justify-content: center;
    }

    .share-bar--right & {
      justify-content: flex-end;
    }
  }

  &__share-label {
    font-weight: 600;
    margin-right: 32px;
  }

  &__share-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 15px;

    &:first-child {
      margin-left: 0;
    }

    svg {
      height: 18px;
      width: 18px;

      g, path {
        fill: $primary-color;
      }
    }
  }
}