/*
 * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 * IN THE SOFTWARE.
 */

/* ----------------------------------------------------------------------------
 * Base layout
 * ------------------------------------------------------------------------- */

/*
 * Stretch container to viewport
 */
html {
  height: 100%;
}

/*
 * Stretch body to container and leave room for sticky footer.
 */
body {
  position: relative;
  min-height: 100%;
}

/*
 * Horizontal separators
 */
hr {
  display: block;
  height: 1px;
  padding: 0;
  margin: 0;
}

/*
 * Lock body (e.g. in search mode)
 */
.locked {
  height: 100%;
  overflow: hidden;
}

/*
 * Scrollable container
 */
.scrollable {
  @include position(absolute, 0 0 0 0);

  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /*
   * Content wrapper
   */
  .wrapper {
    height: 100%;

    /* Hack [iOS]: Force overflow scrolling */
    .ios & {
      margin-bottom: 2px;
    }
  }
}

/*
 * Toggle states and button
 */
.toggle {
  display: none;

  /*
   * Toggle button
   */
  &-button {
    display: block;
  }
}

/*
 * Backdrop
 */
.backdrop {
  @include position(absolute, 0 0 0 0);

  z-index: -1;
}

/*
 * Backdrop paper container
 */
.backdrop-paper {
  max-width: 1200px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;

  /*
   * Actual paper
   */
  &:after {
    content: " ";
    display: block;
    height: 100%;
    margin-left: 262px;
  }
}

/*
 * Overlay
 */
.overlay {
  position: fixed;
  top: 0;
  width: 0;
  height: 0;
  z-index: 4;

  /* [tablet landscape-]: Trigger overlay */
  @include break-to-device(tablet landscape) {

    /*
     * Expanded drawer
     */
    #toggle-drawer:checked ~ &,
    .toggle-drawer & {
      width: 100%;
      height: 100%;
    }
  }
}

/*
 * Application header stays always on top
 */
.header {
  @include user-select(none);

  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  height: 56px;
  padding: 4px;
  overflow: hidden;

  /* [tablet portait+]: Larger header bar */
  @include break-from-device(tablet portrait) {
    height: 64px;
    padding: 8px;
  }

  /* [screen+]: Stretch to screen */
  @include break-from-device(screen) {
    width: 100%;
  }

  /*
   * Absolute positioning in iOS web application
   */
  .ios.standalone & {
    position: absolute;

    /* [orientation: portrait]: Account for status bar in portrait mode */
    @include break-at-orientation(portrait) {
      height: (56px + 20px);
      padding-top: (4px + 20px);

      /* [tablet portait+]: Larger header bar */
      @include break-from-device(tablet portrait) {
        height: (64px + 20px);
        padding-top: (8px + 20px);
      }

      /*
       * Add status bar overlay
       */
      &:before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4;
        width: 100%;
        height: 20px;
      }
    }
  }
}

/*
 * Header bar
 */
.bar {
  display: table;
  max-width: 1184px;
  margin-left: auto;
  margin-right: auto;

  /*
   * Links should span icons entirely
   */
  a {
    display: block;
  }

  /*
   * Hide search button, in case javascript is not available.
   */
  .no-js & .button-search {
    display: none;
  }

  /*
   * Navigation path
   */
  .path {

    /*
     * Correct icon alignment
     */
    .icon:before {
      vertical-align: -1.5px;
    }

    /* [tablet portait-]: Hide path */
    @include break-to-device(tablet portrait) {
      display: none;
    }
  }
}

/*
 * Buttons
 */
.button {
  display: table-cell;
  vertical-align: top;
  width: 1%;

  /*
   * Remove native spacing on button
   */
  button {
    margin: 0;
    padding: 0;

    /* Hack [IE]: Remove button offset in active state */
    &:active:before {
      position: relative;
      top: 0;
      left: 0;
    }
  }

  /*
   * Button icons
   */
  .icon {
    display: inline-block;
    font-size: 24px;
    padding: 8px;
    margin: 4px;
  }
}

/*
 * Hide source and twitter button
 */
.button-github,
.button-twitter {

  /* [mobile landscape-]: Hide button */
  @include break-to-device(mobile landscape) {
    display: none;
  }
}

/*
 * Hide menu button
 */
.button-menu {

  /* [tablet landscape+]: Hide button */
  @include break-from-device(tablet landscape) {
    display: none;
  }
}

/*
 * Stretch content to remaining space
 */
.stretch {
  display: table;
  table-layout: fixed;
  width: 100%;

  /*
   * Set vertical spacing for header
   */
  .header & {
    padding: 0 20px;

    /* [tablet portait]: Increase vertical spacing */
    @include break-at-device(tablet portrait) {
      padding: 0 24px;
    }

    /* [tablet portait+]: Account for missing menu icon */
    @include break-from-device(tablet portrait) {
      padding: 0 (24px - 8px) 0 16px;
    }
  }

  /*
   * Title with ellipsis on overflow
   */
  .title {
    display: table-cell;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    /*
     * Increase header font size
     */
    .header & {
      font-size: 18px;
      padding: 13px 0;

      /* [tablet portait+]: Slightly larger typography in header */
      @include break-from-device(tablet portrait) {
        font-size: 20px;
        padding: 12px 0;
      }
    }
  }
}

/*
 * Main content
 */
.main {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}