/** @component footer */

@include exports('md-footer') {
  .#{$footer-class} {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: rem-calc(1360);
    padding: rem-calc(32) 0;
    margin: 0 auto;
    background-color: $footer__background-color;

    &.#{$footer-class}--light {
      background-color: $footer__background-color--light;
    }

    &__list {
      margin-left: 0;
      list-style: none;

      &-item-title {
        font-size: rem-calc(12.8);
        color: $md-gray-10;
      }
    }

    &__link-section {
      flex: 1 0 auto;
    }

    &__logo {
      position: relative;
      top: rem-calc(8);
      margin-right: rem-calc(20);
      font-size: rem-calc(22);
      color: $md-white-100;
    }

    &__copyright,
    .md-list-item {
      font-size: rem-calc(12.8);
      color: $footer__font-color;
    }

    &__social {
      margin-top: rem-calc(16);
    }

    &__top,
    &__bottom {
      display: flex;
      padding: 0 rem-calc(32);
      color: $footer__font-color;

      @media #{$xlarge-up} {
        padding-right: rem-calc(200);
        padding-left: rem-calc(200);
      }
    }

    &__bottom {
      padding-top: rem-calc(16);
      margin-top: rem-calc(64);
      font-size: rem-calc(12);
      border-top: rem-calc(1) solid $md-gray-50;
      justify-content: space-between;
    }

    .md-list-item {
      height: auto;
      padding: 0;
      background-color: $footer__background-color;

      &:hover {
        color: $md-white-100;
        background-color: $footer__background-color;
      }
    }
  }
}