//
// Footer
// --------------------------------------------------


// Mixin for styling footer, footer-top and footer-bottom
.footer-variant(@bg, @bg-parent, @color, @link: '', @link-hover: '') {
  @bg-parent-opaque:  mix(@bg-parent, @body-bg, (100% * alpha(@bg-parent)));
  @bg-opaque:         mix(@bg, @bg-parent-opaque, (100% * alpha(@bg)));

  background-color: @bg-opaque; // Rgba fallback
  background-color: @bg;

  // Color is defined as a color (i.e. not 'inherit' or undefined)
  & when (iscolor(@color)) {
    .opacify(color, @color, @bg-opaque); // Rgba fallback
    color: @color;

    .text-muted {
      @muted: fade(@color, alpha(@text-muted) * 100%);
      .opacify(color, @muted, @bg-opaque); // Rgba fallback
      color: @muted; // Mix with base color
    }

    .text-faded {
      @faded: fade(@color, alpha(@text-faded) * 100%);
      .opacify(color, @faded, @bg-opaque); // Rgba fallback
      color: @faded; // Mix with base color
    }

    // Use base color for headings, with max opacity
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
      color: fade(@color, 100%);
    }
  }

  // Links are defined as colors (i.e. not 'inherit' or undefined);
  & when (iscolor(@link)) and (iscolor(@link-hover)) {
    .link-variant(@bg-opaque, @link, @link-hover);
  }
}


// Styling for the global page footer - the container
.footer {
  font-size: @footer-font-size;
  .footer-variant(@footer-bg, @body-bg, @footer-color);
}

// Top footer section - site links
.footer-top {
  font-size: @footer-top-font-size;
  .footer-variant(@footer-top-bg, @footer-bg, @footer-top-color, @footer-top-link, @footer-top-link-hover);
  padding-top: @footer-top-padding-vertical;
  padding-bottom: @footer-top-padding-vertical;
}

// Bottom footer section - legal stuff
.footer-bottom {
  font-size: @footer-bottom-font-size;
  .footer-variant(@footer-bottom-bg, @footer-bg, @footer-bottom-color, @footer-bottom-link, @footer-bottom-link-hover);
  padding-top: @footer-bottom-padding-vertical;
  padding-bottom: @footer-bottom-padding-vertical;
  // Remove the bottom margin from lists
  ul {
    margin-bottom: 0;
  }
}

// Brand logo for footer - often a 'watermark' style monochrome version of the brand logo
.footer-brand {
  width: @footer-logo-width;
  height: @footer-logo-height;
  background-size: contain;
  background-image: url(@footer-logo);
  background-repeat: no-repeat;
  background-position: center center;
  text-indent: -5000em;
  display: block;
  @media (min-width: @screen-sm-min) {
    margin-top: floor(-(@footer-logo-height - @line-height-computed)/2);
    margin-bottom: floor(-(@footer-logo-height - @line-height-computed)/2);
  }
}

// Links in the footer - bigger tappable areas for mobile
.footer-links {
  a {
    display: inline-block;
    padding-top: @padding-small-vertical;
    padding-bottom: @padding-small-vertical;
    @media (max-width: @screen-xs-max) {
      display: block;
    }
  }
}

.legal-footer {
  color: @footer-color;
  background-color: @color-white;
  p {
    font-size: @footer-font-size;
  }
}