.social {
  margin-top: .9375rem;
  text-align: center;
  .item {
    display: inline-block;
    width: 1.875rem;
    height: 1.875rem;
    line-height: 1.875rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-radius: 38%;

    i {
      font-size: 1.4em;
      vertical-align: middle;
      transform: scale(.8);
    }


    &::before {
      top: 90%;
      left: -110%;
      content: "";
      width: 120%;
      height: 120%;
      position: absolute;
      transform: rotate(45deg);
    }

    &::before,
    i {
      the-transition(.35s, cubic-bezier(.31, -.105, .43, 1.59));
    }

    &:focus::before,
    &:hover::before {
      top: -10%;
      left: -10%;
    }

    $social = hexo-config('social');

    for type in $social {
      for i in split(" || ", slice(type, 1)) {
          color = slice(i, 1, -1)
      }

      &.{slice(type, 0, 1)} {

        &::before {
          background-color: unquote(color);
        }
        i {
          color: unquote(color);
        }

      }
    }


    &:focus i,
    &:hover i {
      color: var(--grey-0);
      transform: scale(1);
    }

  }
}