@import url('https://fonts.googleapis.com/css?family=Lato');

network($amt)
  $width = ($amt * 60)px

  &.sb-center
    if ($width >= 480px)
      @media screen and (max-width: 520px)
        white-space: initial
        text-align: center
        width: 420px

    if ($width >= 380px)
      @media screen and (max-width: 460px)
        white-space: initial
        text-align: center
        width: 360px

    if ($width >= 320px)
      @media screen and (max-width: 400px)
        white-space: initial
        text-align: center
        width: 300px

socialIcon($name)
  li[class*={"'" + $name + "'"}]
    background-image: svg($name)
    background-size: 40px 40px
    &:hover
      opacity: 0.7
      transition: 0.5s

networks = 'email' 'facebook' 'googlePlus' 'linkedin' 'pinterest' 'reddit' 'twitter' 'whatsapp' 'kakaotalk' 'kakaostory' 'naverline' 'naverband' 'naverblog'

label-bg = #a29baa
label-color = #333333

share-button
  position: relative
  font-size: 16px
  color: label-color
  background: label-bg
  padding: 5px 10px 5px 1.75em
  border-radius: 5px
  font-family: Lato, sans-serif
  font-weight: 800
  -webkit-font-smoothing: antialiased
  cursor: pointer
  white-space: nowrap
  transition()
  upcase()

  &:hover
    color: rgba(label-color, 0.8)
    background: rgba(label-bg, 0.8)

  &:before
    position: absolute
    line-height: 1em
    left: 0.6em
    width: 1em
    height: 1em
    content: ' '

  .sb-social
    position: absolute
    opacity: 0
    visibility: hidden
    transition: all 0.4s ease

    &.sb-center
      left: 50%

      &.sb-top
        top: 0
        transform: translate(-50%, -100%)

      &.sb-bottom
        bottom: 0
        transform: translate(-50%, 100%)

      &.active
        &.sb-top
          top: -1em

        &.sb-bottom
          bottom: -1em

    &.sb-left
      left: 50%

      &.sb-top
        top: 0
        transform: translate(calc(-100% + 30px), -100%)

      &.sb-middle
        top: 50%
        left: 0
        transform: translate(-100%, -50%)

      &.sb-bottom
        bottom: 0
        transform: translate(calc(-100% + 30px), 100%)

      &.active
        &.sb-top
          top: -1em

        &.sb-middle
          left: -1em

        &.sb-bottom
          bottom: -1em

    &.sb-right
      left: 50%

      &.sb-top
        top: 0
        transform: translate(-30px, -100%)

      &.sb-middle
        top: 50%
        left: 100%
        transform: translate(0, -50%)

      &.sb-bottom
        bottom: 0
        transform: translate(-30px, 100%)

      &.active
        &.sb-top
          top: -1em

        &.sb-middle
          left: calc(100% + 1em)

        &.sb-bottom
          bottom: -1em

    &.active
      opacity: 1
      transition: all .4s ease
      visibility: visible

    &.load
      transition: none !important

    for num in (1..8)
      &.networks-{num}
        network(num)

    ul
      margin: 0
      padding: 0
      list-style: none
      line-height: 0

      li
        position: relative
        height: 40px
        width: 40px
        cursor: pointer
        z-index: 2
        box-sizing: content-box
        transition()

        &.enabled
          display: inline-block

        &.disabled
          display: none

        &:hover
          &:before
            opacity: 0

          &:after
            opacity: .5

        &:before, &:after
          background-repeat: no-repeat !important

        &:before
          opacity: 1

        &:after
          opacity: 0

        a
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%
          z-index: 3

    for name in networks
      socialIcon(name)