/*
 * 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.
 */

/* ----------------------------------------------------------------------------
 * Drawer layout
 * ------------------------------------------------------------------------- */

/*
 * Drawer container
 */
.drawer {
  width: 262px;
  font-size: 13px;
  line-height: 1.0em;

  /* [tablet landscape-]: Fixed positioning */
  @include break-to-device(tablet landscape) {
    position: fixed;
    z-index: 5;
    height: 100%;
  }

  /* [tablet landscape+]: Inline with content */
  @include break-from-device(tablet landscape) {
    position: static;
    float: left;
    height: auto;
    margin-bottom: 96px;
    padding-top: 80px;
  }

  /* Hack [iOS]: Mitigate scrolling of parent container on boundaries */
  .ios & {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
  }

  /*
   * Links to articles
   */
  .toc li a {
    display: block;
    padding: 14.5px 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /*
   * Links to anchors
   */
  .toc li.anchor a {
    margin-left: 12px;
    padding: 10px 24px 10px 12px;
  }

  /*
   * Nested links and anchors
   */
  .toc li ul {
    margin-left: 12px;
  }

  /*
   * Nested anchors
   */
  .current + ul {
    margin-bottom: 9px;
  }

  /*
   * Main sections
   */
  .section {
    display: block;
    padding: 14.5px 24px;
  }

  /*
   * Scrollable container
   */
  .scrollable {
    top: 104px;
    z-index: -1;

    /* [tablet landscape+]: Revert fixed positioning */
    @include break-from-device(tablet landscape) {
      position: static;
    }

    /*
     * Leave room for status bar in iOS web application
     */
    .ios.standalone & {

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

    /*
     * Content wrapper
     */
    .wrapper {
      height: auto;
      min-height: 100%;

      /*
       * Add spacing at top and bottom of separator
       */
      hr {
        margin: 12px 0;

        /* [screen+]: Shorten separator */
        @include break-from-device(screen) {
          width: 48px;
        }

        /* Hack [IE]: Left-align horizontal rule */
        margin-right: auto;
      }

      /*
       * Add spacing at top and bottom of top level navigation
       */
      .toc {
        margin: 12px 0;
      }
    }
  }
}

/*
 * Project information
 */
.project {
  display: block;

  /*
   * Leave room for status bar in iOS web application
   */
  .ios.standalone & {

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

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

  /*
   * Project banner
   */
  .banner {
    display: table;
    width: 100%;
    height: 104px;
    padding: 20px;
  }

  /*
   * Project logo
   */
  .logo {
    display: table-cell;
    width: 64px;
    padding-right: 12px;

    /*
     * Project logo image
     */
    img {
      display: block;
      width: 64px;
      height: 64px;
    }
  }

  /*
   * Project name
   */
  .name {
    display: table-cell;
    padding-left: 4px;
    font-size: 14px;
    line-height: 1.25em;
    vertical-align: middle;

    /* [tablet portait+]: Slightly larger project name */
    @include break-from-device(tablet portrait) {
      margin: 26px 0 0 5px;
    }
  }

  /*
   * Shrink font, if a logo is given.
   */
  .logo + .name {
    font-size: 12px;
  }
}

/*
 * Repository
 */
.repo {
  margin: 24px 0;
  text-align: center;

  /*
   * Inline buttons
   */
  li {
    display: inline-block;
    padding-right: 12px;
    white-space: nowrap;

    /*
     * No padding on last button
     */
    &:last-child {
      padding-right: 0;
    }
  }

  /*
   * Buttons
   */
  a {
    display: inline-block;
    padding: 0px 10px 0px 6px;
    font-size: 12px;
    line-height: 30px;
    height: 30px;

    /*
     * Slightly larger icons
     */
    .icon {
      font-size: 18px;
      vertical-align: -3px;
    }

    /*
     * Stars
     */
    .count {
      display: inline-block;
      position: relative;
      padding: 0px 8px 0 4px;
      margin: 0 -10px 0 8px;
      font-size: 12px;

      /*
       * Star bubble
       */
      &:before {
        content: " ";
        display: block;
        position: absolute;
        top: 0px;
        left: -5px;
      }

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