@import "../../../sass/webpack_deps";

$logo-height: 4rem;

.lp-global-footer {
  position: relative;

  @media (min-width: $min-960) {
    @include container-padded();
  }

  &__container {
    @include clearfix;
    position: relative;
  }

  &__bottom {
    @include clearfix;
    border-top: .1rem solid $color-gray;
    padding-bottom: $gutter;
    position: relative;

    @media (min-width: $min-960) {
      padding-bottom: ($spacing + 6.6);
      padding-left: 8rem + $gutter;
      padding-right: ($logo-height + .2) * 3 + $spacing;
      padding-top: 2.6rem;
    }
  }

  &__social-list {
    @include clearfix;
    font-size: 1.8rem;
    list-style: none;

    @media (max-width: $max-960) {
      float: right;
      margin-bottom: $spacing;
      margin-right: $spacing;
    }

    @media (min-width: $min-960) {
      position: absolute;
      right: 0;
      top: 2rem;
    }
  }

  &__social-item {
    float: left;

    &:not(:first-child) {
      margin-left: .6rem;
    }
  }

  &__social-link {
    border: .1rem solid $social-network-button-color;
    border-radius: 50%;
    color: darken($color-white, 20); // #cccdce;
    display: block;
    height: $logo-height;
    line-height: ($logo-height + .5);
    text-align: center;
    transition-duration: $animation-speed;
    transition-property: color, border, background-color;
    width: $logo-height;

    &:hover,
    &:active,
    &:focus {
      background-color: $social-network-button-color;
      color: $color-white;
    }

    .svg-icon {
      top: -.3rem;
    }

    &--facebook {
      &:hover,
      &:active,
      &:focus {
        background-color: $color-facebook;
        border-color: $color-facebook;
      }
    }

    &--twitter {
      &:hover,
      &:active,
      &:focus {
        background-color: $color-twitter;
        border-color: $color-twitter;
      }
    }

    &--pinterest {
      &:hover,
      &:active,
      &:focus {
        background-color: $color-pinterest;
        border-color: $color-pinterest;
      }

      .svg-icon {
        height: 2rem;
        width: 2rem;
      }
    }
  }

  &__copyright {
    clear: both;
    color: $footer-copyright-color;
    font-size: 1.2rem;
    line-height: 1.4;
    margin-top: 1.2rem;
    text-align: center;

    @media (max-width: $max-960) {
      margin-left: $spacing;
      margin-right: $spacing;
    }

    @media (min-width: $min-960) {
      line-height: 1;
      text-align: left;
    }
  }
}

.links {
  font-size: 1.3rem;
  line-height: 1;
  margin-bottom: $spacing;

  @media (min-width: $min-960) {
    margin: 0;
  }

  &__item {
    @include divider;
    display: block;

    @media (min-width: $min-960) {
      border-bottom: 0;
      display: inline-block;
    }

    &:not(:last-child) {
      @media (min-width: $min-960) {
        margin-right: 2.1rem;
      }
    }
  }

  &__link {
    color: $font-color-light;
    display: block;
    font-weight: 600;
    transition: color $animation-speed;

    @media (max-width: $max-960) {
      padding: 1.4rem $spacing;
    }

    &:hover,
    &:active,
    &:focus {
      color: $lpblue;
    }
  }
}

.lp-global-footer__main {
  @include divider("top");

  @media (min-width: $min-960) {
    overflow: hidden;
    padding-bottom: ($gutter * 2);
    padding-top: ($gutter * 2);
  }
}

.lp-global-footer__main__checkbox {
  display: none;
}

.lp-global-footer__main__links {
  max-height: 50px;
  overflow: hidden;
  vertical-align: top;

  @media (max-width: $max-960) {
    transition: max-height $animation-speed linear;
  }

  @media (min-width: $min-960) {
    float: left;
    max-height: 600px;
    padding-right: percentage($gutter / $max-width);
    width: percentage(22rem / $max-width);
  }

  &:not(:first-of-type) {
    @media (max-width: $max-960) {
      @include divider("top");
    }
  }
}

.lp-global-footer__main__links--newsletter {
  border-top: 0;
  max-height: none;

  @media (min-width: $min-960) {
    float: right;
    padding-right: 0;
    width: percentage(19rem / $max-width);
  }
}

.lp-global-footer__main__links__header {
  color: $darkgray;
  font-size: 1.2rem;
  font-weight: $font-weight-semibold;
  line-height: inherit;
  text-transform: uppercase;

  @media (max-width: $max-960) {
    padding: 2.1rem $spacing 1.7rem;
  }

  @media (min-width: $min-960) {
    border: 0;
    margin-bottom: 1.7rem;
  }

  .accordion-target {
    bottom: 2.1rem;
    cursor: pointer;
    float: right;
    height: 5rem;
    padding-right: $spacing;
    position: relative;
    right: -#{$spacing};
    width: 50%;

    @media (min-width: $min-960) {
      display: none;
    }
  }

  .icon {
    float: right;
    height: 1.3rem;
    margin-top: 2rem;
    transition: transform $animation-speed linear;
    width: 1.3rem;
  }

  a {
    color: currentColor;
    transition-duration: $animation-speed;
    transition-property: color, border, background;

    &:hover,
    &:active,
    &:focus {
      color: $lpblue;
    }
  }
}

.lp-global-footer__main__checkbox:checked + .lp-global-footer__main__links {
  max-height: 600px;

  .icon {
    transform: rotateZ(180deg);
  }
}

.lp-global-footer__main__links__list {
  @media (max-width: $max-960) {
    margin: 0 $spacing $spacing;
  }
}

.lp-global-footer__main__links__list__item {
  font-size: 1.3rem;
  letter-spacing: .02rem;
  line-height: 2.2;
  list-style: none;

  @media (min-width: $min-960) {
    line-height: (24 / 13);
  }

  a {
    color: $font-color-light;
    display: block;
    transition-duration: $animation-speed;
    transition-property: color, border, background;

    &:hover,
    &:active,
    &:focus {
      color: $lpblue;
    }
  }
}

.newsletter-register {
  @media (max-width: $max-960) {
    margin: 0 $spacing $spacing;
  }

  label {
    @include visuallyhidden("focusable");
  }
}

.newsletter-register__text {
  color: $font-color-light;
  font-size: 1.2rem;
  letter-spacing: .02rem;
  line-height: (18 / 12);
}

.newsletter-register__email {
  @include form-control;
  margin-top: 1.4rem;
}

.newsletter-register__country {
  @include form-control("select");
  margin-top: 1rem;
}

.newsletter-register__button {
  @include button();
  margin-top: $spacing;

  @media (max-width: $max-480) {
    display: block;
    width: 100%;
  }

  @media (min-width: $min-960) {
    margin-top: 2rem;
  }
}

.language {
  align-items: center;
  clear: both;
  display: flex;
  justify-content: center;

  @media (min-width: $min-960) {
    width: 22rem;
  }

  .lp-global-footer & {
    @media (max-width: $max-960) {
      margin-bottom: $gutter;
      margin-left: $spacing;
      margin-right: $spacing;
    }

    @media (min-width: $min-960) {
      position: absolute;
      right: 0;
      top: 8rem;
    }
  }
}

.language__label {
  color: rgba($titlegray, .72);
  font-size: 1.3rem;
  line-height: 1;

  @media (min-width: $min-960) {
    padding-left: 1.2rem;
    width: 11rem;
  }
}

.language__select {
  @include form-control("select");

  @media (max-width: $max-960) {
    margin-left: 2rem;
  }

  @media (min-width: $min-960) {
    width: 11rem;
  }

  .no-flexbox & {
    @media (max-width: $max-960) {
      margin-left: 0;
    }
  }
}