.social-buttons {
  .social-buttons__container {
    display: inline-flex;
    align-items: center;
    margin: 8px 0 0;

    .button-theme {
      background: var(--Yellow);
    }

    .social-buttons__content {
      display: none;

      .social-buttons__list {
        white-space: nowrap;

        .social-buttons__item {
          display: inline-block;
          vertical-align: middle;
          // background-image: url("@{imgRoot}/Shared/Components/SocialButtons/dash-black.png");
          background-repeat: no-repeat;
          background-position: 0px 50%;
          padding-left: 4px;

          .social-buttons__link {
            width: 32px;
            height: 32px;

            .social-buttons__img {
              max-width: 19px;
              max-height: 19px;
            }
          }
        }

        .social-buttons__item--light {
          // background-image: url("@{imgRoot}/Shared/Components/SocialButtons/dash-white.png");
        }
      }
    }
  }
}

.social-link__top-item {
  display: inline-block;
  vertical-align: middle;
  margin: 0 6px;

  @media (max-width: 900px) {
    margin: 0 4px;
    display: none;
  }

  &--visible-sm {
    display: none;

    @media (max-width: 479px) {
      display: inline-block;
    }
  }

  &--hidden-sm {
    @media (max-width: 479px) {
      display: none;
    }
  }

  .btn-icon {

    .btn-icon__img,
    use {
      fill: var(--Main1);
      fill-opacity: 0.8;
      transition: all .2s ease-in-out;
    }

    &.active,
    &:active,
    &:hover {
      background: fade(#3A3A3A, 80%);
      border-color: transparent;

      .btn-icon__img,
      use {
        fill: #FFF;
        fill-opacity: 1;
      }
    }

    &--light {
      border-color: #fff;
      fill: #fff;
      transition: all .2s ease-in-out;

      .btn-icon__img,
      use {
        fill: #fff;
        transition: all .2s ease-in-out;
      }

      &.active,
      &:active,
      &:hover {
        background: #fff;

        .btn-icon__img,
        use {
          fill: fade(#3A3A3A, 80%);
        }
      }
    }
  }
}

// .social-link__top-item {
//   display: inline-flex;
//   align-items: center;
//   margin: 0 8px;

//   @media (max-width: 900px) {
//     margin: 0 8px;
//     display: none;
//   }

//   &--visible-sm {
//     display: none;

//     @media (max-width: 479px) {
//       display: inline-block;
//     }
//   }

//   &--hidden-sm {
//     @media (max-width: 479px) {
//       display: none;
//     }
//   }

//   .btn-icon {
//     border: none !important;
//     width: 24px;
//     height: 24px;

//     .btn-icon__img,
//     use {
//       fill: var(--Main1);
//       fill-opacity: 0.8;
//       transition: all .2s ease-in-out;
//     }

//     // &.active,
//     // &:active,
//     // &:hover {
//     //   background: fade(#3A3A3A, 80%);
//     //   border-color: transparent;

//     //   .btn-icon__img,
//     //   use {
//     //     fill: #FFF;
//     //     fill-opacity: 1;
//     //   }
//     // }

//     &--light {
//       fill: #fff;
//       transition: all .2s ease-in-out;

//       .btn-icon__img,
//       use {
//         fill: #fff;
//         transition: all .2s ease-in-out;
//       }

//       // &.active,
//       // &:active,
//       // &:hover {
//       //   background: #fff;

//       //   .btn-icon__img,
//       //   use {
//       //     fill: fade(#3A3A3A, 80%);
//       //   }
//       // }
//     }
//   }
// }