//
// Mobile overrides
//

._mobile {
  font-size: 100%;
  background: $contentBackground;

  ._hide-on-mobile { display: none; }

  // Layout

  body { -ms-overflow-style: -ms-autohiding-scrollbar; }

  ._app, ._content { overflow: visible; }

  ._container {
    margin: 0;
    padding-top: $headerHeight;
  }

  ._content {
    position: static;
    height: auto;
    margin: 0;
    padding: .75rem 1rem 1px;

    &:before { content: none; }
  }

  ._booting:before, ._content-loading:before { font-size: 3rem; }

  ._header { position: fixed; }

  ._header, ._list {
    width: 100%;
    border-right: 0;
    box-shadow: none;
  }

  // Settings

  ._settings { position: relative; }
  ._settings-tabs { display: block; }
  ._header > ._settings-btn-back { width: auto; }

  // Header

  ._header-btn[hidden] { display: block; }

  ._search {
    padding-right: .125rem;
    padding-left: .125rem;

    > svg { left: .5rem; }
  }

  ._search-tag { left: .5rem; }
  ._search-clear > svg { left: .25rem; }

  // Sidebar

  ._sidebar {
    position: relative;
    min-height: 100%;
    overflow: visible;
  }

  ._resizer { display: none; }

  ._list-item {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-shadow: none;
  }

  ._list-result {
    padding-left: 2.375rem;

    &:before {
      position: absolute;
      top: .25rem;
      left: .75rem;
    }
  }

  // Notice

  ._notice {
    position: fixed;
    left: 0;
    padding: 0 .5rem;
  }

  ._notice-text { font-size: .75em; }

  // Notification

  ._notif { position: fixed; }

  // Table of contents

  ._toc {
    float: none;
    max-width: none;
    margin-left: 0;
  }
}

//
// Fix viewport on Windows Phone
//

@-ms-viewport { width: device-width; }
@media (orientation: portrait) and (min-device-width: 720px) and (max-device-width: 768px),
       (orientation: landscape) and (device-width: 1280px) and (max-device-height: 768px) {
  @-ms-viewport { width: 50%; }
}

//
// Header buttons
//

._forward-btn {
  margin-right: -.5rem;

  > svg { margin-left: -.375rem; }
}

//
// Intro
//

._mobile-intro {
  > ._intro-list { padding-left: 1.5rem; }

  ._intro-hide {
    position: static;
    float: none;
    display: block;
    margin-top: .75rem;
    text-align: center;
  }
}