.Button--share {
  .Button-label {
    font-size: 13px;
  }
}

.FofShareSocialModal .Modal-body {
  .ShareUrl {
    display: flex;
    gap: 5px;
    margin-top: 10px;
  }

  .Button:not(.ShareUrl .Button) {
    width: 100%;
    border-radius: @border-radius;
    margin-top: 10px !important;
  }
}

.item-share-social .Dropdown {
  &:not(.itemCount1) {
    .SplitDropdown-button {
      width: unset;
    }
  }

  .Dropdown-menu {
    .Button {
      width: 100% !important;
      color: var(--button-color);
      background: var(--button-bg);

      .icon {
        margin-top: 4px;
      }

      &:hover,
      &:focus,
      &.focus {
        background-color: var(--button-bg-hover);
      }

      &:active,
      &.active,
      .open > .Dropdown-toggle& {
        background-color: var(--button-bg-active);
      }
    }

    @media @tablet-up {
      padding: 0;

      .Button {
        margin: 4px 4px;
        border-radius: @border-radius;
        width: ~"calc(100% - 8px)" !important;
      }
    }
  }
}

.item-share-social, .FofShareSocialModal {
  .Share--facebook {
    .Button--color(#fff, #3B5998);
  }

  .Share--vkontakte {
    .Button--color(#fff, #567ca4);
  }

  .Share--twitter {
    .Button--color(#fff, #00ACED);
  }

  .Share--reddit {
    .Button--color(#fff, #FF4500);
  }

  .Share--odnoklassniki {
    .Button--color(#fff, #EE8208);
  }

  .Share--my_mail {
    .Button--color(#fff, #168DE2);
  }

  .Share--linkedin {
    .Button--color(#fff, #0077B5);
  }

  .Share--qq {
    .Button--color(#fff, #12B8F6);
  }

  .Share--qzone {
    .Button--color(#fff, #FFBB30);
  }

  .Share--whatsapp {
    .Button--color(#fff, #4ac959);
  }

  .Share--telegram {
    .Button--color(#fff, #0088cc);
  }

  .fa-lg {
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -15%;
  }
}