/* ==========================================================================
   Main footer
   ========================================================================== */

footer.main

  width: 100%
  background: $black
  color: $footerTextColor

  a
    color: $footerTextColor
    text-decoration: none
    +transition(color 100ms ease-out)

    &:hover
      color: #fff

  .flexable-layout
    flex-wrap: wrap
    padding-top: column(.75,12)


  // The footer is divided in three equal columns
  .footer-col
    display: flex
    flex-direction: column // 1
    flex-basis: initial
    flex-grow: 0
    flex-shrink: 0
    justify-content: flex-end
    width: 33.33333%
    font-size: $baseFontSize

    // Position logo at the bottom left
    &.logo-container
      align-items: flex-start

      .logo
        width: 60%
        max-width: 250px
        fill: $footerTextColor
        +transition(fill 100ms ease-out)

        &:hover
          fill: #fff

        +respond-to-width($mdGridBreakpoint)
          width: column(3,4)

    // Position button centered
    &.button-container
      align-items: center

      .streamer
        display: inline-block
        text-align: center
        margin-bottom: 30px
        font-size: 1.5rem
        line-height: 1.4

    // Social media is vertically centered
    // Contact details are at the bottom right
    &.contact-container
      align-items: flex-end
      line-height: 1.6
      text-align: right

    .contact-details
      .right
        margin-top: 20px

      @include respond-to-width-beyond($smGridBreakpoint)
        display: flex
        justify-content: flex-end

        .right
          margin-top: 0
          margin-left: 40px

  nav.footer
    border-top: 1px solid #262F3E
    margin-top: column(.75,12)
    text-align: center
    width: 100%

    ul
      padding: 0
      margin: 0
      list-style: none
    li
      padding: column(.4,12) 0
      display: inline-block
      margin-right: 50px

      &:last-child
        margin-right: 0

  // Social icons
  .social-media
    .icon
      display: inline-block
      height: 24px
      margin-left: 10px

      &.facebook
        width: 14px
        +sprite(0 -60px)

      &.linkedIn
        width: 22px
        +sprite(-20px -60px)

      &.instagram
        width: 22px
        +sprite(-75px -60px)

      &.behance
        width: 30px
        +sprite(-100px -57px)

  .less-important-stuff
    background: $blacker
    width: 100%

    .col-6
      font-size: .8rem
      line-height: 40px
      color: #606D7A

      a
        color: #606D7A
        &:hover
          color: lighten(#606D7A,10)

      &:nth-child(2)
        text-align: right
        a
          margin-left: 20px

  +respond-to-width-between(950, 1200)
    .flexable-layout
      justify-content: space-between

    .footer-col.logo-container
      width: 210px

      .logo
        width: 80%

    .footer-col.button-container
      width: 240px

    .footer-col.contact-container
      width: 340px

  +respond-to-width-between($smGridBreakpoint, 950)
    .footer-col.logo-container
      width: 50%

    .footer-col.button-container
      width: 50%
      align-items: flex-end
      justify-content: center

    .footer-col.contact-container
      margin-top: 80px
      width: 400px
      margin-left: auto

  +respond-to-width($mdGridBreakpoint)

    .footer-col.button-container
      .button
        height: 50px
        line-height: 45px
        &:before
          top: 17px

    nav.footer
      li
        margin-right: 20px

  /*
   * Small breakpoint
   * Align footer in column direction
   */
  +respond-to-width($smGridBreakpoint)

    .flexable-layout
      flex-direction: column

    .footer-col
      width: 100%
      margin-bottom: 30px
      &.button-container
        align-items: flex-start
        order: 3
      &.contact-container
        align-items: flex-start
        order: 1
        padding-top: 0
        text-align: left
        .social-media .icon
          margin-left: 0
          margin-right: 10px
      &.logo-container
        order: 4
        margin: column(.75,12) 0

    nav.footer
      margin: 0 0 column(.75,12)
      order: 2
      border-top: none
      text-align: left
      li
        display: block
        padding: 0

    .less-important-stuff
      padding: 20px 0
      .col-6
        line-height: 1.2
        display: block
        margin: 0 0 0 column(1,12)
        &:nth-child(2)
          text-align: left
          a
            margin: 0
        a
          display: block
          margin: 0


  +respond-to-width($xsGridBreakpoint)
    padding-top: $mobileTopSpace
    .flexable-layout
      padding: 0 $mobileAsideSpace