a{
  text-decoration: none;
}

.social-icons{
  position:relative;
  display:inline-block;
  top:10px;
  .common {
    height: 30px;
    width: 30px;
    margin-right:8px;
    font-size: 15px;
    padding: 2px;
    text-align:center;
    display:inline-block;
    position:relative;
    i {
      top: calc(~'100% - 22px');
      position:relative;
    }
  }
  .default{
    border: fade(@site-color, 10%) 3px solid;
    border-radius: 11px;
    background: @white;
    transition:0.5s all ease;
    i {
      color: @site-color;
    }
    &:hover {
      transform:scale(1.2);
    }
  }
  .style1 {
    border:1px dashed @white;
    border-radius:50%;
    transition:0.7s all ease;
    &:hover {
      background:@white;
      border:1px dashed @site-color;
      i{
        transition:0.3s all ease;
        color:@site-color;
      }
    }
  }
  .style2 {
    border:2px solid @white;
    transition:0.3s all ease;
    &:hover {
      background:fade(@white, 30%);
      animation-duration: 0.7s;
      animation-name:pop-in;
    }
  }
}