$list: (
  (fb, 16px, 16px),
  (vk, 21px, 13px),
  (ok, 12px, 18px),
  (twi, 22px, 18px),
  (ya, 9px, 19px),
  (mail, 18px, 19px),
  (yahoo, 25px, 16px)
);

.auth-social {
  position: relative;
  display: grid;
  grid-gap: 10px;
  &__button {
    position: relative;
    height: 40px !important;
    text-align: center;
    padding-left: 0;
  }
  &__social {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    @each $item, $width, $height in $list {
      &_#{$item} {
        width: $width;
        height: $height;
        background-image: inline-image('auth-social/social/#{$item}.svg');
      }
    };
    &_more {
      display: block;
      background-image: inline-image('auth-social/more.svg');
      background-repeat: no-repeat;
      background-size: 100%;
      width: 18px;
      height: 4px;
    }
  }
}
.no-cssgrid {
  .auth-social {
    display: flex;
    flex-wrap: wrap;
    margin-top: -10px;
    justify-content: flex-start;
    &__button {
      margin-left: 10px;
      margin-top: 10px;
      &:nth-of-type(1) {
        margin-left: 0;
      }
    }
  }
}