.socials {
  font-size: 0;

  .footer & {
    right: 0;
  }

  &-i {
    transition: 0.3s background-color;
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: fade-out(#fff, 0.8);

    &:not(:first-child) {
      margin-left: 10px;
    }

    &:hover {
      background-color: fade-out(#fff, 0.6);
    }

    &:before {
      @include image-2x('../images/socials@2x.png', 16px, 69px);
      transform: translate(-50%, -50%);
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      background-image: url(../images/socials.png);
    }

    &_github {
      &:before {
        width: 16px;
        height: 16px;
        background-position: 0 0;
      }
    }

    &_oracles {
      &:before {
        width: 16px;
        height: 14px;
        background-position: 0 -16px;
      }
    }

    &_reddit {
      &:before {
        width: 15px;
        height: 13px;
        background-position: 0 -30px;
      }
    }

    &_telegram {
      &:before {
        width: 16px;
        height: 14px;
        background-position: 0 -43px;
      }
    }

    &_twitter {
      &:before {
        width: 15px;
        height: 12px;
        background-position: 0 -57px;
      }
    }
  }
}