@mixin background($imgpath,$width:20px,$height:20px) {
  background: {
    image: url($imgpath);
  }
  display: block;
  width: $width;
  height: $height;
  margin: 2px;
}

.svt-icon-twitter {
  @include background('../img/share/twitter.svg');
}

.svt-icon-external-link {
  @include background('../img/share/external-link.svg');
}

.svt-icon-facebook {
  @include background('../img/share/facebook.svg');
}

.svt-icon-googleplus {
  @include background('../img/share/googleplus.svg');
}

.svt-icon-linkedin {
  @include background('../img/share/linkedin.svg');
}

.svt-icon-pinterest {
  @include background('../img/share/pinterest.svg');
}

.svt-icon-whatsapp {
  @include background('../img/share/whatsapp.svg');
}






.svt-share {

  position: relative;
  display: inline-block;

  .svt-sharebox {
    border-bottom: 1px solid black;
    border-top: 1px solid black;

    border-left: 1px dotted black;
    border-right: 1px dotted black;

    visibility: hidden;
    background-color: #fff;
    color: #fff;
    text-align: center;
    padding: 5px;
    border-radius: 6px;

    position: absolute;
    z-index: 1;

    width: 35px;
    bottom: 100%;
    left: 50%;
    margin-left: -15px;

    img {
      width: 24px;
      height: 24px;
    }


    &.svt-sharebox::after {
      content: " ";
      position: absolute;
      top: 100%; /* At the bottom of the tooltip */
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: black transparent transparent transparent;
    }
  }

  &:hover .svt-sharebox {
    visibility: visible;
  }

  .svt-share-icon{
    color: gray;
    vertical-align: super;
    font-size: small;
    &:hover{
      color: black;

    }
  }


}