/// Defines the margin around social sharing buttons
/// @type number
$bonsai-social-sharing-button-margin: $bonsai-spacing-small !default;

/// Defines the height of the social sharing buttons
/// @type number
$bonsai-social-sharing-button-height: 30px !default;

/// Defines the width of the social sharing buttons
/// @type number
$bonsai-social-sharing-button-width: 30px !default;

/// Styling for the element containing social sharing buttons
@mixin social-sharing-container {
  display: flex;
  flex-wrap: wrap;
}

/// Styling for the social sharing buttons
@mixin social-sharing-button {
  padding: 0;
  width: $bonsai-social-sharing-button-width;
  height: $bonsai-social-sharing-button-height;
  border: none;
}

/// Spacing between social sharing buttons
@mixin social-sharing-button-spacing {
  margin-left: $bonsai-social-sharing-button-margin;
}

/// Styling for the email social sharing button
@mixin social-sharing-email-share-button {
  background-image: linear-gradient(-210deg, #3023ae 0%, #c86dd7 100%);
}

/// Styling for the social sharing icons
@mixin social-sharing-icon {
  font-size: 18px;
}

/// Styling for the default social sharing buttons
@mixin social-sharing-button-default-style {
  @include social-sharing-button;

  & + .button {
    @include social-sharing-button-spacing;
  }

  &[data-email-share] {
    @include social-sharing-email-share-button;
  }

  & i {
    @include social-sharing-icon;
  }
}

/// Style for social sharing list 
@mixin social-sharing-list-style {
  @inlcude bonsai-dropdownmenu-hover-style();

  padding: $bonsai-spacing-small;

  &:hover {
    cursor: pointer;
  }
}

/// Style for social sharing list buttons 
@mixin social-sharing-button-list-style {
  @include social-sharing-button-default-style;

  display: inline-block;
  margin-left: $bonsai-spacing-small;
  margin-right: $bonsai-spacing-medium;
}

/// Gateway mixin for social sharing styling
@mixin social-sharing {
  div[data-social-sharing] {
    @include social-sharing-container;

    .button {
      @include social-sharing-button-default-style;
    }
  }

  ul[data-social-sharing] {
    li {
      @include social-sharing-list-style;

      .button {
        @include social-sharing-button-list-style;
      }
    }
  }
}