.bd-footer-title
  color: $text-strong
  font-size: 1.25rem
  line-height: 1.25
  margin-bottom: 0.5rem
  transition-duration: $speed
  transition-property: color
  strong
    font-weight: $weight-semibold

.bd-footer-subtitle
  color: $grey-light
  margin-top: -0.5rem
  transition-duration: $speed
  transition-property: color

.bd-footer-iframe
  display: flex
  flex-wrap: wrap
  margin-bottom: -10px
  min-height: 30px
  iframe
    height: 30px
    margin-bottom: 10px
  .fb-like
    margin-left: 10px
  &.is-github
    iframe
      width: 100%

.bd-footer-tsp
  color: $grey-light
  margin-top: 1.5rem

%bd-footer-box
  @extend %bd-box
  text-align: center
  .bd-footer-title
    font-size: 1.5rem

// Support

.bd-footer-support
  @extend %bd-footer-box
  border-top: 2px solid $white-ter
  box-shadow: none
  padding: 3rem
  .bd-footer-title
    margin-bottom: 1.5rem

.bd-footer-donations
  justify-content: center

.bd-footer-donation
  flex: none

.bd-footer-sponsor a
  @extend %center
  height: 70px

+tablet
  .bd-footer-donation
    width: 240px

.bd-footer-donation-title
  color: $grey-light
  margin-bottom: 0.5rem
  strong
    color: currentColor

.bd-footer-donation-action
  @extend %center
  height: 70px
  .paypal-form
    height: 30px
    img
      display: block

// Stars

$star-figure-height: 156px

.bd-footer-stars
  margin-top: 2.5rem
  +tablet
    align-items: stretch
    display: flex
    justify-content: space-between

.bd-footer-star
  @extend %bd-footer-box
  transition-duration: $speed
  transition-property: box-shadow, transform
  will-change: box-shadow, transform
  +mobile
    &:not(:last-child)
      margin-bottom: 1.5rem
  +tablet
    width: calc(33.3333% - 2rem)
  &:hover
    box-shadow: 0 3rem 3rem -1.25rem rgba($black, 0.1)
    transform: translateY(-0.5rem)
    .bd-footer-title,
    .bd-footer-subtitle
      color: $link
  &.bd-is-expo,
  &.bd-is-love
    padding-bottom: $star-figure-height
    .bd-footer-title
      align-items: center
      display: flex
      justify-content: center
      .icon
        margin-right: 0.25em
  &.bd-is-expo
    background-image: url("/images/footer/expo-examples.png")
    background-repeat: repeat-x
    background-position: bottom center
    background-size: 352px $star-figure-height
  &.bd-is-love
    background-image: url("/images/footer/love.png")
    background-repeat: no-repeat
    background-position: bottom center
    background-size: 440px 180px

.bd-footer-star-header
  padding: 1.5rem

.bd-footer-star-figure
  @extend %center
  height: $star-figure-height
  margin-top: -1rem

// Links

.bd-footer-links
  margin-top: 6rem
  padding-bottom: 6rem
  a
    color: currentColor
    &:hover
      color: $link

.bd-footer-link-title
  color: $text-strong
  font-size: 1.25rem
  font-weight: $weight-semibold
  &:not(:first-child)
    margin-top: 1.5em

.bd-footer-link
  margin-top: 0.5rem
  &.bd-is-more
    font-size: 0.875rem
    a:not(:hover)
      color: $grey-light
  &.bd-has-subtitle
    a
      align-items: center
      display: flex
      justify-content: space-between
      strong
        flex-grow: 1
        flex-shrink: 1
        font-weight: unset
      em
        display: block
        font-size: 0.875rem
        font-style: normal
      &:not(:hover)
        em
          color: $grey-light
      +mobile
        flex-wrap: wrap
        margin-top: 1rem
        em
          width: 100%
      +tablet
        em
          margin-left: 1rem
          text-align: right

.bd-footer-link-icon
  flex-grow: 0
  flex-shrink: 0
  margin-right: 0.5em
  text-align: center
  width: 1em