@charset "UTF-8";

///
/// Apply this mixin to the `<body>` tag only. It will set the body tag height to
/// 100% and set it to `display: grid`. It will also set whatever element you specify
/// with $selector to css grid's `align-self: flex-end;`. This will keep the footer
/// at the bottom of the page when the content is shorter than the window, but allow
/// the content to push the footer below the viewport when the page is long.
/// Stick the footer to the bottom of the browser window no matter the size of the
/// browser or content.
///
/// @name sticky-footer
///
/// @param {selector} $selector - [> .site-footer] the CSS selector used to target the footer
///
/// @group mixin
@mixin sticky-footer($selector: '> .site-footer') {
  @include padding(0);
  @include margin(0);

  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-basis: 100%;
  justify-content: flex-start;
  flex-direction: column;

  #{$selector} {
    margin-top: auto;
  }

  /// IE 11 needs html to be flex in order to work.
  @at-root html {
    display: flex;
  }
}
