$footer-text-color: setTextColor($footer-color);
$footer-link-hover-color: setLinkColor($footer-color);

@mixin linkHoverBehavior() {
  @if ($footer-link-hover-color == $footer-color) {
    &, a {
      color: $footer-text-color;
      transition: 0.3s ease-in-out;
      &:hover {
        transform: translateY(-4px);
      }
    }
  }
  @else {
    a {
      color: $footer-text-color;
      &:hover {
        color: $footer-link-hover-color;
      }
    }
  }
}

#footer {
  box-sizing: border-box;


  background-color: $footer-color;
  color: $footer-text-color;

  position: relative;
  display: flex;

  @include breakpoint(mobile) {
    height: auto;

    padding-top: calculateRem(30);
    padding-right: calculateRem(50);
    padding-bottom: calculateRem(30);
    padding-left: calculateRem(50);

    flex-flow: column nowrap;
    align-items: center;
  }

  @include breakpoint(tablet) {
    height: calculateRem($footer-height);

    padding-top: calculateRem(16);
    padding-right: calculateRem(50);
    padding-bottom: calculateRem(15);
    padding-left: calculateRem(50);

    flex-flow: row nowrap;
    justify-content: space-between;
  }

  #footer_logo {
    max-height: 100%;
    @include breakpoint(mobile) {
      max-width: 100%;
    }
  }

  .logo-and-text {
    flex-grow: 30;
    height: 100%;
    display: flex;
    align-items: center;

    @include breakpoint(mobile) {
      max-width: 80%;
      flex-flow: column nowrap;
    }

    @include breakpoint(tablet) {
      flex-flow: row nowrap;
    }

    @include breakpoint(laptop) {
      max-width: 100%;
    }

    .logo-link {
      @include breakpoint(mobile) {
        height: calculateRem(100);
        max-width: 100%;
        display: inline-block;
      }
      @include breakpoint(tablet) {
        max-width: calculateRem(300);
      }
    }

    .text-link {
      margin-bottom: 0;

      display: flex;
      @include linkHoverBehavior();
    }
  }

  .footer-menu {
    flex-grow: 70;
    height: 100%;

    padding-top: calculateRem(30);
    padding-bottom: calculateRem(30);

    .menu-container {
      display: flex;
      flex-flow: column wrap;
      align-content: flex-end;

      height: 100%;

      .menu-item {
        @include breakpoint(mobile) {
          text-align: center;
          margin-top: calculateRem(8);
          margin-bottom: calculateRem(8);
        }
        @include breakpoint(tablet) {
          text-align: left;

          margin-top: 0;
          margin-bottom: 0;
        }

        &:not(:last-child) {
          @include breakpoint(tablet) {
            margin-right: calculateRem(50);
          }
        }

        &.sub {
          a {
            font-weight: 400;
          }
        }

        a {
          font-size: 14px;
          font-weight: 600;
          color: $light;
          text-decoration: none;
          text-transform: uppercase;
          letter-spacing: setLetterSpacing($body-font-family);
        }
        @include linkHoverBehavior();
      }
    }
  }
}

$subfooter-text-color: setTextColor($subfooter-color);

#sub_footer {
  box-sizing: border-box;
  padding-left: calculateRem(50);
  padding-right: calculateRem(50);

  background-color: $subfooter-color;
  color: $subfooter-text-color;

  position: relative;
  display: flex;

  @include breakpoint(mobile) {
    height: auto;

    flex-flow: column nowrap;
    align-items: center;
  }
  @include breakpoint(tablet) {
    height: calculateRem($subfooter-height);

    flex-flow: row nowrap;
    justify-content: space-between;
  }
  p {
    font-size: 12px;
    margin-bottom: 0;
    &.copyright {
      @include breakpoint(mobile) {
        order: 2;
      }
      @include breakpoint(tablet) {
        order: 1;
      }
    }
    &.links {
      @include breakpoint(mobile) {
        order: 1;
      }
      @include breakpoint(tablet) {
        order: 2;
      }
      i {
        @include breakpoint(mobile) {
          padding-top: calculateRem(10);
        }
      }
    }
    a {
      font-size: 12px;
      color: $subfooter-text-color;
      @include breakpoint(mobile) {
        text-decoration: underline;
      }
      @include breakpoint(laptop) {
        text-decoration: none;
      }
      &:hover {
        text-decoration: underline;
      }
    }
  }

  #footer_logo.logo {
    padding-right: calculateRem(15);
  }
}
