// Nav
//
// Primariy, horisontal navigation
//
// Markup:
// <nav class="nav">
//   <ul class="nav-list">
//     <li class="nav-item">
//       <a class="nav-link" href="#">Documentation</a>
//     </li>
//     <li class="nav-item">
//       <a class="nav-link" href="#">Blog</a>
//     </li>
//     <li class="nav-item">
//       <a class="nav-link" href="#">Dev Wiki</a>
//     </li>
//   </ul>
// </nav>
//
// Styleguide 3.8.1.
.nav {
  a,
  a:visited,
  .a-faux {
    background-image: none;
  }
  @include media($mid) {
    margin-top: modular-scale($base-font-size, -2, $base-ratio);
    margin-bottom: modular-scale($base-font-size, -2, $base-ratio);
    @include span-columns(6 of 6);
  }
  @include media($wide) {
    // Break out of .row at wide size
    @include span-columns(7 of 6);
  }
  .button {
    width: auto;
    padding: modular-scale($base-font-size, 0, $base-ratio);
    margin-left: -1 * modular-scale($base-font-size, 0, $base-ratio);
    margin-right: -1 * modular-scale($base-font-size, 0, $base-ratio);
    margin-top: 0;
    margin-bottom: 0;
    display: inline-block;
    font-size: inherit;
    @include media($mid) {
      font-size: modular-scale($base-font-size, -1, $base-ratio);;
      margin-top: -modular-scale($base-font-size, 0, $base-ratio);
      margin-bottom: -modular-scale($base-font-size, 0, $base-ratio);
      margin-left: 0;
      margin-right: 0;
    }
    @include media($huge) {
      font-size: modular-scale($base-font-size, 0, $base-ratio);
    }
  }
}

.nav-list {
  list-style-type: none;
  margin-left: 0;
  display: block;
  text-align: right;
  font-size: modular-scale($base-font-size, -1, $base-ratio);
  margin-bottom: modular-scale($base-font-size, 0, $base-ratio);
  @include media($mid) {
    margin-top: 0;
    margin-bottom: 0;
    @include span-columns(4 of 6);
  }
  @include media($wide) {
    margin-top: 0;
    margin-bottom: 0;
    font-size: modular-scale($base-font-size, -1, $base-ratio);
    @include shift(0);
    @include span-columns(5 of 7);
  }
}

.nav-item {
  display: block;
  font-size: modular-scale($base-font-size, 1, $base-ratio);
  margin-left: 0;
  margin-bottom: modular-scale($base-font-size, -8, $base-ratio);
  #getting-started-nav{display:none};
//  #faq-nav{display:none};
//  #wiki-nav{display:none};
  @include media($mid) {
    margin: 0;
  }
  @include media($wide) {
    display: inline-block;
    #getting-started-nav{display:initial};
//    #faq-nav{display:initial}
//    #wiki-nav{display:initial}
  }
}

.nav-item--active {
  font-weight: 600;
  > ol,
  > ul,
  > dl,
  > li {
    font-weight: 400;
  }
}

.nav-link,
.nav-item .i18n-label,
.nav-item .i18n-menu {
  display: block;
  padding: modular-scale($base-font-size, -8, $base-ratio) 0;
  @include media($mid) {
    display: inline-block;
    float: left;
    font-size: modular-scale($base-font-size, -1, $base-ratio);
    padding: modular-scale($base-font-size, 2, $base-ratio) modular-scale($base-font-size, -4, $base-ratio) modular-scale($base-font-size, 0, $base-ratio);
  }
  @include media($wide) {
    padding-top: modular-scale($base-font-size, -1, $base-ratio);
  }
  @include media($huge) {
    font-size: modular-scale($base-font-size, 0, $base-ratio);
    padding: modular-scale($base-font-size, 0, $base-ratio) modular-scale($base-font-size, 0, $base-ratio);
  }
}

// Nav logo
//
// Markup:
// <nav class="nav">
//   <a class="nav-logo logo" href="#">
//     <img class="logo-image" src="/images/crosswalk-logo-black.svg">
//   </a>
//   <ul class="nav-list">
//     <li class="nav-item">
//       <a class="nav-link" href="#">Documentation</a>
//     </li>
//     <li class="nav-item">
//       <a class="nav-link" href="#">Blog</a>
//     </li>
//   </ul>
// </nav>
//
// Styleguide 3.8.2.
.nav-logo {
  padding-top: modular-scale($base-font-size, 1, $base-ratio);
  padding-bottom: modular-scale($base-font-size, 1, $base-ratio);  
  margin: 0px;
  @include span-columns(2);
  .logo-image {
    width: 100%;
  }
  @include media($mid) {
    @include span-columns(2);
  }
  @include media($wide) {
    // .nav is 7 columns when wide
    @include span-columns(2 of 7);
  }
}

// Nav Toggle
//
// Content that’s visible on larger
// screens, and uses a CSS-only toggle
// to reveal on smaller screens.
//
// Markup:
// <nav id="contents" class="nav-toggleContainer">
//   <a href="#contents" id="contents-toggle" class="button button--small button--tertiary nav-toggle">Toggle</a>
//   <a href="#contents-toggle" class="button button--small button--tertiary nav-toggle--dummy">Toggle</a>
//   <ul class="nav-toggleHide">
//    <li>Nav item 1 (hidden on small screens)</li>
//    <li>Nav item 2 (hidden on small screens)</li>
//    <li>Nav item 3 (hidden on small screens)</li>
//   </ul>
// </nav>
//
// Styleguide 3.8.3.
.nav-toggle {
  display: block;
  visibility: visible;
  margin-bottom: modular-scale($base-font-size, 2, $base-ratio);
  @include media($wide) {
    display: none;
    visibility: hidden;
  }
}

.nav-toggle--dummy {
  display: none;
  visibility: hidden;
}

.nav-toggleHide {
  height: 0;
  overflow: hidden;
  width: 100%;
  @include media($wide) {
    overflow: visible;
    display: block;
    height: 100%;
  }
}

.nav-toggleContainer:target {
  .nav-toggle {
    display: none;
    visibility: hidden;
  }
  .nav-toggle--dummy {
    display: block;
    visibility: visible;
  }
  &:target {
    .nav-toggleHide {
      overflow: visible;
      display: block;
      height: 100%;
    }
  }
  @include media($wide) {
    .nav-toggle--dummy {
      display: none;
      visibility: hidden;
    }
  }

}

// Header area above documentation
//
// The style is different than above so that
// the header can be fixed and the documentation
// scroll beneath it.

// Header row
.doc-header {
    background-color: #f4f4f4;  //fallback-color
    background-image: url(/assets/doc-header-bkgd.png);  /*fallback image*/
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #FFFFFF),color-stop(1, #CFCFCF));
    background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #CFCFCF 100%);
    background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #CFCFCF 100%);
    background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #CFCFCF 100%);
    background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #CFCFCF 100%);
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #CFCFCF 100%);

    top: 0px;
    left: 0px;
    height: 60px;
    width: 100%;
    position: fixed;
    z-index: 1;
    display: table;

    //padding: 0px 100px 0px 100px;
    //@include span-columns(6);
    //@include shift(1);
}

// Style for Crosswalk logo in header

.doc-logo-div {
    display: block;
    margin: auto;
    @include media($mid) {
      display: table-cell;
      vertical-align: middle;
    }
}
.doc-logo-link {
    background-image: none;
}
.doc-logo-img {
    max-height: 35px;
    display: block;
    //margin: auto;
    padding: 5px;

    @include media($mid) {
      padding: 0px 5px 0px 5px;
      float: left;
    }
    @include media($wide) {
      float: right;
    }
}

// Style for header navigation links

.doc-nav-div {
    display: block;

    @include media($mid) {
        display: table-cell;
        vertical-align: middle;
    }
}

.doc-nav-list {
  //<ul>
  list-style-type: none;
  width: 100%;
  margin-left: 3px;

  @include media($wide) {
    margin-left: 50px;
  }
  @include media($huge) {
    margin-left: 100px
  }
}

.doc-nav-item {
  //<li>
  font-size: 17px;
  display: inline-block;
}

// when screen size shrinks, hide these items
.hide-on-small {
  display: none;
  @include media($wide) {
      display: inline-block;
  }
}

.doc-nav-link {
  background-image: none;

  @include media($narrow) {
    padding: modular-scale($base-font-size, 2, $base-ratio) modular-scale($base-font-size, -4, $base-ratio) modular-scale($base-font-size, 0, $base-ratio);
  }
  @include media($wide) {
    padding-top: modular-scale($base-font-size, -1, $base-ratio);
  }
  @include media($huge) {
    padding: modular-scale($base-font-size, 0, $base-ratio) modular-scale($base-font-size, 0, $base-ratio);
  }
}

.doc-main {
    position: relative;
    height: 100%;
    top: 58px;
}

.doc-anchor {
    display: block;
    position: relative;
    top: -65px;
}

// Styles for language dropdown menu in nav

.i18n-globe {
    padding-right:($base-font-size, 0, $base-ratio);
    width: modular-scale($base-font-size, 1, $base-ratio);

    vertical-align: -3px;
    @include media($wide) {
	vertical-align: -2px; //the middle size needs this tweak to align text in menu
    }
    @include media($huge) {
	vertical-align: -3px;
    }      
}
.i18n-arrow {
    padding: 0px 0px 2px 3px;
}

.i18n-label {
    color: $color-primary;
    cursor: pointer;
    padding-left: 10px;
}

.doc-anchor,
.i18n-globe,
.i18n-label,
.i18n-menu {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.i18n-menu {
  display: none;
  position: absolute;
  z-index: 5;
  padding: 0;
  cursor: pointer;
  text-align: center;
}

.i18n-menu-dark {
    background-color: rgba(50,50,50,0.8);
}
.i18n-menu-light {
    background-color: rgba(250,250,250,0.95); //doc page
}
.i18n-menu-dark a:hover {
    background-color: rgba(80,80,80,0.5);
}
.i18n-menu-light a:hover {
    background-color: rgb(255,255,255); //doc page
}

.i18n-menu a {
    color: $color-primary;
    display: block;
    padding: 8px 6px;
    background-image: none;
    text-shadow: none;
}
.i18n-menu a:hover {
    font-weight: bold;
}

#translation-missing-toaster {
  background-color: $color-primary;
  display: none;
  width: 100%;
  height: 40px;
  left: 0px;
  padding-left: 0px;
  font-weight: 100;
  text-align: center;
}
