@import 'common/sass/variables';
@import 'common/sass/mixins';

$footer-link-color: #fff;

.Footer {
  background-color: $ether-navy;
  padding: $space-sm $space-sm 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  border-top: 3px solid $brand-primary;

  &-section {
    color: #fff;
    padding: $space;
  }

  // Responsive ordering behavior
  &-links {
    order: 1;
    text-align: left;
  }
  &-about {
    order: 2;
    text-align: center;
  }
  &-support {
    order: 3;
    text-align: right;
  }

  @media (max-width: 75rem) {
    justify-content: center;

    &-links {
      text-align: center;
      order: 2;
    }
    &-about {
      order: 1;
      width: 100%;
      padding-bottom: $space * 2;
      margin-bottom: $space * 2;
      border-bottom: 1px solid rgba(#fff, 0.2);
    }
    &-support {
      text-align: center;
      order: 3;
    }
  }


  &-links {
    &-social {
      margin-bottom: $space;
      margin-left: -$space-xs;
    }

    &-links {
      a {
        display: block;
        font-size: $font-size-small;
        color: $footer-link-color;
        margin-bottom: $space-md;
      }
    }
  }


  &-about {
    &-logo {
      display: block;
      width: 100%;
      max-width: 245px;
      margin: -$space-xs auto $space * 1.25;
      text-align: center;
    }

    &-links {
      margin-bottom: $space;

      > a {
        margin: 0 $space-md;
        color: $footer-link-color;
        font-size: $font-size-bump;
      }
    }

    &-text {
      font-size: $font-size-xs;
      opacity: 0.8;
      margin: 0 auto $space;
      max-width: 530px;
    }

    &-legal {
      font-size: $font-size-xs-bump;

      &-text {
        display: inline-block;
        margin: 0 $space-sm;

        > a {
          color: $footer-link-color;
        }
      }
    }
  }


  &-support {
    &-title {
      margin: 0 0 $space-sm;
      font-size: $font-size-base;
    }

    &-affiliates {
      margin-bottom: $space-sm;

      > a {
        display: block;
        font-size: $font-size-xs-bump;
        margin-bottom: $space-xs;
        color: $footer-link-color;
      }
    }

    &-donate {
      margin-bottom: $space-sm;

      &-address {
        font-size: 0.7rem;
        opacity: 0.8;
      }
    }

    &-friends {
      > a {
        display: inline-block;
        font-size: $font-size-xs;
        color: $footer-link-color;

        &:after {
          content: '·';
          margin: 0 $space-sm;
        }

        &:last-child:after {
          display: none;
        }
      }
    }
  }
}

.SocialMediaLink {
  transition: opacity 0.3s;
  color: #fff;
  margin: 0.55rem;

  > i {
    font-size: 1.15rem;
  }

  &:hover,
  &:focus {
    opacity: 0.8;
    color: #fff;
  }
}