$social-bar-position: left; // Change this value to `right` for changing sidebar's position.
$social-bar-transformation: rem-calc(140);
$social-bar-width: rem-calc(180);
$social-bar-background: #333333;
$social-icon-color: $white;
$social-icon-transition: all 0.3s ease-in-out;
$social-icon-font-size: 1.1rem;
$social-icon-padding: 0.5rem;

// Source: https://designpieces.com/2012/12/social-media-colours-hex-and-rgb/
$social-brand-facebook: #3b5998;
$social-brand-twitter: #55acee;
$social-brand-linkedin: #007bb5;
$social-brand-youtube: #bb0000;
$social-brand-instagram: #125688;
$social-brand-pinterest: #cb2027;

.sticky-social-bar {
  padding: 0;
  margin: 0; 
  top: 50%;
  transform: translateY(-50%);
  width: $social-bar-width;
  background-color: $social-bar-background;
  position: fixed;
	
  @if $social-bar-position == left {
	  left: $social-bar-transformation * -1;
  }
  @if $social-bar-position == right {
	  right: $social-bar-transformation * -1;
  }

  .social-icon {
    list-style-type: none;
    color: $social-icon-color;
    background-color: inherit;
    margin: 0;
    transition: $social-icon-transition;
    cursor: pointer;
    font-size: $social-icon-font-size;
    padding: 0.25rem 0.25rem 0.5rem;

    &:first-of-type {
	    padding-top: 0.375rem;
    }
    &:last-of-type {
	    padding-bottom: 0.625rem;
    }

    > a {
      color: inherit;
      background-color: inherit;

      > .fa {
        padding: $social-icon-padding;
        width: 2rem;
        height: 2rem;

        @if $social-bar-position == left {
          float: right;
          margin-left: 0.5rem;
        }
        @if $social-bar-position == right {
          float: left;
          margin-right: 0.5rem;
        }

        &.fa-facebook {
          background-color: $social-brand-facebook;
        }
        &.fa-twitter {
          background-color: $social-brand-twitter;
        }
        &.fa-linkedin {
          background-color: $social-brand-linkedin;
        }
        &.fa-youtube {
          background-color: $social-brand-youtube;
        }
        &.fa-instagram {
          background-color: $social-brand-instagram;
        }
        &.fa-pinterest-p {
          background-color: $social-brand-pinterest;
        }
      }

      > .social-icon-text {
        font-size: 80%;
        color: $social-icon-color;
        text-transform: uppercase;

        @if $social-bar-position == left {
          margin-right: 0.5rem;
        }
        @if $social-bar-position == right {
          margin-left: 0.5rem;
        }
      }
    }

    &:hover {

      @if $social-bar-position == left {
        transform:translateX($social-bar-transformation * 1);
      }
      @if $social-bar-position == right {
        transform:translateX($social-bar-transformation * -1);
      }

      > a {
        color: inherit;
        background-color: inherit;
      }
    }
  }
}
