.share-button {
  position: relative;
  display: inline-flex;

  &__open {
    width: 30px;
    height: 30px;
    display: inline-flex;
    position: relative;

    &:before,
    &:after {
      width: 30px;
      height: 30px;
      background-image: url(../img/svg/Share.svg);
      background-repeat: no-repeat;
      background-position: 50%;
      display: block;
      content: " ";
      position: absolute;
      top: 0;
      left: 0;
      transition: opacity .2s linear;
    }

    &:after {
      background-image: url(../img/svg/Share_lb.svg);
      opacity: 0;
    }

    &:hover:after {
      opacity: 1;
    }
  }

  &__share-box {
    position: absolute;
    padding: 20px 9px 16px;
    top: -83px;
    width: 167px;
    background-color: #fff;
    z-index: 9999;
    box-shadow: 0 3px 12px 0 rgba(0,0,0,.41);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);
    transition: all .25s ease-out;
    display: flex;

    @include md {
      right: 0;
      left: auto;
    }
  }

  &.js-open .share-button__share-box {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }

  &__box-tip {
    position: absolute;
    margin-left: -4px;
    bottom: -5px;
    width: 0;
    height: 0;
    border-color: #fff transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0;

    @include md {
      right: 10%;
      left: auto;
    }
  }

  &__share-icon {
    margin: 5px 8px;

    svg {
      width: 22px;
      height: 22px;

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