i.gl.icon
  align-items center
  display inline-flex
  font-style normal
  justify-content center

  > svg
    height 100%
    width 100%

  &:not(.custom):not(.font)
    height 3em
    width 3em

    &.small
      height 2em
      width 2em

    &.large
      height 4.5em
      width 4.5em

  &.custom
    height 1em
    width 1em

    &.large
      height 1.5em
      width 1.5em

    &.massive
      height 15em
      width 15em

    &.logo
      width 130px
      height 30px

      &.large
        width 210px
        height 50px

  &.white

    > svg
      fill #fff

  &.grey

    &.font
      color $color-grey-darkest

    > svg
      fill $color-grey-darkest

  &.blue

    &.font
      color $color-blue

    > svg
      fill $color-blue

  &.social
    background hsla(#fff, .2)
    border-radius 50%
    padding .25em
    transition background-color $transition-duration

    > svg
      height 2em
      width 2em

    &.linkedin

      &:hover
        background $color-linkedin

    &.twitter

      &:hover
        background $color-twitter

    &.facebook

      &:hover
        background $color-facebook

    &.youtube

      &:hover
        background $color-youtube

  &.clickable
    cursor pointer