.SocialButton {
  position: relative;
  display: inline-block;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 100%;
  height: var(--control-height-s);
  width: var(--control-height-s);
  line-height: var(--control-height-s);
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-gainsboro);
  border-radius: var(--control-radius);
  font-family: var(--font-primary);
  font-size: var(--button-font-size);
  font-weight: var(--font-weight-text-regular);
  white-space: nowrap;
  text-decoration: none;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-transition: background 0.2s ease, border 0.2s ease, color 0.2s ease,
    -webkit-transform 0.12s ease;
  transition: background 0.2s ease, border 0.2s ease, color 0.2s ease,
    -webkit-transform 0.12s ease;
  transition: background 0.2s ease, border 0.2s ease, color 0.2s ease,
    transform 0.12s ease;
  transition: background 0.2s ease, border 0.2s ease, color 0.2s ease,
    transform 0.12s ease, -webkit-transform 0.12s ease;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-appearance: none;
  padding-top: 1px;
  text-align: center;
  color: var(--color-reach-black);
}

  .SocialButton:hover {
    background-color: var(--color-blue-primary-light10);
  }

  .SocialButton:active {
    background-color: var(--color-blue-primary-light16);
  }

  .SocialButton > .Picture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
