// Navigation bar


$picnic-nav-shadow: $picnic-shadow !default;
$picnic-nav-position: fixed !default;
$picnic-nav-sides: .6em !default;


// Vertical align based on
// http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
%nav {

  // Position it on the top, full width
  position: $picnic-nav-position;
  top: 0;
  left: 0;
  right: 0;

  // Total height
  height: 3em;
  padding: 0;

  // Make it look like a hovering bar
  background: #fff;
  box-shadow: $picnic-nav-shadow;
  z-index: 10;

  // Everything happens slow-ish  
  transition: all .3s;
  
  // Half-pixel fix (vertical align hack)
  transform-style: preserve-3d;

  // The two main elements
  .brand,
  .menu,
  .burger {
    float: right;

    position: relative;
    top: 50%;
    transform: translateY(-50%);
    }

  .brand {
    font-weight: 700;
    float: left;
    padding: 0 $picnic-nav-sides;
    max-width: 50%;
    white-space: nowrap;
    color: $picnic-black;

    * {
      vertical-align: middle;
      }
    }

  .logo {
    height: 2em;
    margin-right: .3em;
    }

  .select::after {
    height: calc(100% - 1px);
    padding: 0;
    line-height: 2.4em;
    }

  .menu > * {
    margin-right: $picnic-nav-sides;
    }
  }


nav {
  @extend %nav;
  }






.burger {
  display: none;
  }

@media all and (max-width: $picnic-breakpoint) {

  nav {

    .burger {
      display: inline-block;
      cursor: pointer;
      bottom: -1000em;
      margin: 0;
      }

    .menu,
    .show:checked ~ .burger {
      position: fixed;
      min-height: 100%;
      width: 0;
      overflow: hidden;
      top: 0;
      right: 0;
      bottom: -1000em;
      margin: 0;
      background: $picnic-white;
      transition: all .3s ease;
      transform: none;
      }

    .show:checked ~ .burger {
      color: transparent;
      width: 100%;
      border-radius: 0;
      background: rgba(0, 0, 0, .2);
      transition: all .3s ease;
      }

    .show:checked ~ .menu {
      width: 70%;
      overflow: auto;
      transition: all .3s ease;
      }

    .menu > * {
      display: block;
      margin: $picnic-separation / 2;
      text-align: left;
      }

    .menu > a {
      padding: $picnic-separation / 2 $picnic-separation * 1.5;
      }
    }
  }