/**
 * Copyright 2015 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "../variables";
@import "../mixins";

.mdl-mega-footer {
  padding: $footer-min-padding $footer-padding-sides;

  color: $footer-color;
  background-color: $footer-bg-color;
}


.mdl-mega-footer--top-section:after,
.mdl-mega-footer--middle-section:after,
.mdl-mega-footer--bottom-section:after,
.mdl-mega-footer__top-section:after,
.mdl-mega-footer__middle-section:after,
.mdl-mega-footer__bottom-section:after {
  content: '';
  display: block;
  clear: both;
}

.mdl-mega-footer--left-section,
.mdl-mega-footer__left-section {
  margin-bottom: $footer-min-padding;
}

.mdl-mega-footer--right-section,
.mdl-mega-footer__right-section {
  margin-bottom: $footer-min-padding;
}

.mdl-mega-footer--right-section a,
.mdl-mega-footer__right-section a {
  display: block;

  margin-bottom: $footer-min-padding;

  color: inherit;
  text-decoration: none;
}

@media screen and (min-width: 760px) {
  .mdl-mega-footer--left-section,
  .mdl-mega-footer__left-section {
    float: left;
  }

  .mdl-mega-footer--right-section,
  .mdl-mega-footer__right-section {
    float: right;
  }

  .mdl-mega-footer--right-section a,
  .mdl-mega-footer__right-section a {
    display: inline-block;

    margin-left: $footer-min-padding;

    line-height: $footer-btn-size;
    vertical-align: middle;
  }
}

.mdl-mega-footer--social-btn,
.mdl-mega-footer__social-btn {
  width: $footer-btn-size;
  height: $footer-btn-size;

  padding: 0;
  margin: 0;

  background-color: $footer-button-fill-color;

  border: none;
}

.mdl-mega-footer--drop-down-section,
.mdl-mega-footer__drop-down-section {
  display: block;

  position: relative;
}

@media screen and (min-width: 760px) {
  .mdl-mega-footer--drop-down-section,
  .mdl-mega-footer__drop-down-section {
    width: 33%;
  }

  .mdl-mega-footer--drop-down-section:nth-child(1),
  .mdl-mega-footer--drop-down-section:nth-child(2),
  .mdl-mega-footer__drop-down-section:nth-child(1),
  .mdl-mega-footer__drop-down-section:nth-child(2) {
    float: left;
  }

  .mdl-mega-footer--drop-down-section:nth-child(3),
  .mdl-mega-footer__drop-down-section:nth-child(3) {
    float: right;

    &:after {
      clear: right;
    }
  }

  .mdl-mega-footer--drop-down-section:nth-child(4),
  .mdl-mega-footer__drop-down-section:nth-child(4) {
    clear: right;
    float: right;
  }

  .mdl-mega-footer--middle-section:after,
  .mdl-mega-footer__middle-section:after {
    content: '';

    display: block;

    clear: both;
  }

  .mdl-mega-footer--bottom-section,
  .mdl-mega-footer__bottom-section {
    padding-top: 0;
  }
}

@media screen and (min-width: 1024px) {
  .mdl-mega-footer--drop-down-section,
  .mdl-mega-footer--drop-down-section:nth-child(3),
  .mdl-mega-footer--drop-down-section:nth-child(4),
  .mdl-mega-footer__drop-down-section,
  .mdl-mega-footer__drop-down-section:nth-child(3),
  .mdl-mega-footer__drop-down-section:nth-child(4) {
    width: 24%;

    float: left;
  }
}

.mdl-mega-footer--heading-checkbox,
.mdl-mega-footer__heading-checkbox {
  position: absolute;
  width: 100%;
  height: $footer-heading-line-height + ($footer-min-padding * 2);

  padding: ($footer-min-padding * 2);
  margin: 0;
  margin-top: -$footer-min-padding;

  cursor: pointer;

  z-index: 1;
  opacity: 0;

  & + .mdl-mega-footer--heading:after,
  & + .mdl-mega-footer__heading:after {
    font-family: 'Material Icons';
    content: '\E5CE'
  }
}

.mdl-mega-footer--heading-checkbox:checked,
.mdl-mega-footer__heading-checkbox:checked {
  // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
  // break consecutive "+" operators in some cases. Therefore, we need to use
  // both here to cover all the bases.
  & ~ .mdl-mega-footer--link-list,
  & ~ .mdl-mega-footer__link-list,
  & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list,
  & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list {
    display: none;
  }

  & + .mdl-mega-footer--heading:after,
  & + .mdl-mega-footer__heading:after {
    font-family: 'Material Icons';
    content: '\E5CF'
  }
}

.mdl-mega-footer--heading,
.mdl-mega-footer__heading {
  position: relative;
  width: 100%;

  padding-right: $footer-heading-line-height + $footer-min-padding;
  margin-bottom: $footer-min-padding;

  box-sizing:border-box;

  font-size: $footer-heading-font-size;
  line-height: $footer-heading-line-height;

  font-weight: 500;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  color: $footer-heading-color;
}

.mdl-mega-footer--heading:after,
.mdl-mega-footer__heading:after {
  content: '';

  position: absolute;
  top: 0;
  right: 0;

  display: block;

  width: $footer-heading-line-height;
  height: $footer-heading-line-height;

  background-size: cover;
}

.mdl-mega-footer--link-list,
.mdl-mega-footer__link-list {
  list-style: none;

  margin: 0;
  padding: 0;

  margin-bottom: $footer-min-padding * 2;
  &:after {
    clear: both;
    display: block;
    content: '';
  }
}

.mdl-mega-footer--link-list li,
.mdl-mega-footer__link-list li {
  @include typo-body-1();
  line-height: 20px;
}

.mdl-mega-footer--link-list a,
.mdl-mega-footer__link-list a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

@media screen and (min-width: 760px) {
  .mdl-mega-footer--heading-checkbox,
  .mdl-mega-footer__heading-checkbox {
    display: none;

    & + .mdl-mega-footer--heading:after,
    & + .mdl-mega-footer__heading:after {
      content: '';
    }
  }
  .mdl-mega-footer--heading-checkbox:checked,
  .mdl-mega-footer__heading-checkbox:checked {
    // WebViews in iOS 9 break the "~" operator, and WebViews in OS X 10.10
    // break consecutive "+" operators in some cases. Therefore, we need to use
    // both here to cover all the bases.
    & ~ .mdl-mega-footer--link-list,
    & ~ .mdl-mega-footer__link-list,
    & + .mdl-mega-footer__heading + .mdl-mega-footer__link-list,
    & + .mdl-mega-footer--heading + .mdl-mega-footer--link-list {
      display: block;
    }

    & + .mdl-mega-footer--heading:after,
    & + .mdl-mega-footer__heading:after {
      content: '';
    }
  }
}

.mdl-mega-footer--bottom-section,
.mdl-mega-footer__bottom-section {
  padding-top: $footer-min-padding;
  margin-bottom: $footer-min-padding;
}

.mdl-logo {
  margin-bottom: $footer-min-padding;
  color: white;
}

.mdl-mega-footer--bottom-section .mdl-mega-footer--link-list li,
.mdl-mega-footer__bottom-section .mdl-mega-footer__link-list li {
  float: left;

  margin-bottom: 0;
  margin-right: $footer-min-padding;
}


@media screen and (min-width: 760px) {
  .mdl-logo {
    float: left;

    margin-bottom: 0;
    margin-right: $footer-min-padding;
  }
}