$nav-item-shaded-bg: $gray-light url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAyCAMAAABI+VrBAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALFQTFRF/////f39/v7+/Pz8+/v7+fn56+vr+vr69PT09vb28/Pz9fX1xcXF9/f3+Pj45+fn8PDwycnJ7+/v6enpzc3N19fX8fHx8vLy7u7u6Ojo7Ozs3Nzc5OTk7e3t4uLi2dnZ39/fxsbG29vb0dHR3d3d4ODg4+Pj6urqyMjI09PT5eXl0NDQ1dXV2NjYysrKx8fH5ubmzs7O3t7exMTE4eHh2tray8vLz8/PzMzM1NTU1tbWhgtdWwAAAOFJREFUeNok0NWSxCAURdFDhCQkMx3tuLe7jP//h829NC+rqIKNAK8hhGEQjmUyrm+ziVTs50O6jkA6b+J3gSCqpWfiGZxL1yKyhbIQEDQLxj7xTYy7SXoCY1RXbwLXy6OgfdevIbYFdulHaBuI7t3SIY5Nbhm4zAdF/Ow5gvTEEaR/W49Ov2eSIvjuW+Y4tdTCXHML+1XI/A7cwmmdM1nHLZwbl+kPPj9lunELq5LuRWy5hUFyC+uKI+hazabgCJpYcws5gsXS5F8qc02i9C9Jn9ejelHoMkJdhrJ5xb8AAwBmihB0TS21nQAAAABJRU5ErkJggg==) no-repeat right 0;
$nav-border-color: rgb(232, 232, 232);
$nav-font-size: 0.9em;
$z-index-nav-hover: 1001;
$nav-hover-gradient: linear-gradient(205deg,rgba(229,229,229,.7) 0,rgba(233,233,233,.7) 20%, rgba(244,244,244,.7) 100%);
$nav-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.12);

#topnav {
  @include display-flex();
  @include align-items(center);
  height: $top-nav-height;
  position: relative;
  //margin-bottom: $main-content-top-margin;
}

#logo {
  @include display-flex();
  @include align-items(center);
  @include user-select(none);

  a {
    @include display-flex();
    @include align-items(center);
    color: $gray-dark;

    font-size: 2em;
    font-weight: 400;
    letter-spacing: -1px;

    img {
      margin-bottom: -4px;
      height: 40px;
      width: 123px;
    }
  }

  .collase-icon {
    display: none;
    background: url("../../images/burger-icon.png") 50% 100% no-repeat;
    background-size: cover;
    width: 20px;
    height: 20px;

    &.active {
      background-position: 50% 0;
    }
  }
}

#fatnav {
  height: 100%;
  @include display-flex();
  @include justify-content(flex-end);
  @include flex(1);
  white-space: nowrap;

  li {
    list-style: none;
  }

  > ul {
    @include display-flex();
    padding: 0;
    margin: 0;
  }

  .toplevel {
    color: $gray-medium;
    font-weight: 600;
    text-transform: uppercase;
    @include user-select(none);

    &::after {
      content: '';
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNpiyc/Pn8XAwDATiM8yEAaMQBwBxHxMQMIdiE8D8Vog1sGjyQGqbhkQK4A0PoKaFATEF4F4MRCrImnQBuJtQLwfiI2hYk9AGl2AuB2I/wAxiB8DxNeAeA4QzwXiS0DsCdXwHIj9gHgqSOFPIK4CYksgvgJVwALEyUCcBDWMAeoSkO2bGZAEQeAM1CmtUNth4BkQ+wJxHBC/hwkyoQXALyCuAWILIL4MxIugAbYFI3iNZ54BR4fNtcXo0QEy9B+ywBGtWMzoAAquBWLk6EDXhBIdLNDokINGRwBQAUiiCYhvI0VHN1LIjpjoAAgwAMoSTlKlzAY4AAAAAElFTkSuQmCC) no-repeat;
      background-size: 9px;
      display: inline-block;
      height: 5px;
      width: 14px;
      margin-left: 10px;
      margin-bottom: 2px;
    }
  }

  .pillar {
    @include display-flex();
    @include align-items(center);
    padding: 0 $default-padding;
    cursor: pointer;
    z-index: $z-index-nav-hover + 1; // ensure on top of expandee
  }

  .expandee {
    display: none;
    
// @include display-flex();
// @include flex-direction(row);
// //visibility: hidden;
// pointer-events: none;
// transition: opacity 300ms ease-in-out 200ms;
// opacity: 0;
// height: 0;

    position: absolute;
    z-index: $z-index-nav-hover;
    left: 0;
    width: 100%;
    @include box-sizing(border-box);
    background-color: $gray-light;
    padding: $default-padding 0;
    cursor: initial;
    margin: 0;

    a {
      font-weight: 600;
      padding: 0.5em 0;
      display: block;
      color: $gray-dark;

      &:hover {
        background-image: $nav-hover-gradient;
      }
    }

    li {
      white-space: nowrap;

      &.submenu {
        color: #333;;
        font-size: 1.1em;
        font-weight: bold;
        @include flex(1);

        &.active {
          background-image: $nav-hover-gradient;
        }

        > ul {
          font-size: $nav-font-size - 0.1;
          padding: $default-padding - 5 0 0 0;
          margin: 0;
        }

        .category {
          border-bottom: 1px solid $nav-border-color;

          &:last-child {
            border: none;
          }

          a {
            overflow: hidden;
            text-overflow: ellipsis;
          }

          // Hide 3rd level articles.
          > ul {
            display: none;
          }

          ul {
            padding: 0;
          }
        }
      }
    }
  }
}

#search {
  @include display-inline-flex();
  @include align-self(stretch);
  @include align-items(center);
  width: auto;
  padding: 0 $default-padding;
  cursor: pointer;

  img {
    height: 16px;
    width: 16px;
    @include user-select(none);
  }

  .expandee {
    padding: $default-padding;

    input[type="search"] {
      width: 100%;
      @include box-sizing(border-box);
      background: url("../../images/search.png") no-repeat 15px 55%;
      background-size: 20px;
      background-color: white;
      border: $default-border;
      //border-color: $gray-light-dark;
      padding: 10px 10px 10px 40px;
      font-size: 1.4em;
      @include flex(1);
      font-family: inherit;
      font-weight: 300;
    }
  }
}

@media only screen and (min-width: $break-small)  { 

  #topnav {
    padding: 15px 0 0;
  }

  #fatnav {
    .pillar {
      &.active {
        background: $nav-item-shaded-bg;

        .toplevel {
          &::after {
            background-position: 0% -5px;
          }
        }

        .expandee {
          @include display-flex();
          @include flex-direction(row);

// pointer-events: all;
// opacity: 1;
// //visibility: visible;

          &::after {
            position: absolute;
            background-image: linear-gradient(bottom,rgba(255, 255, 255, 0) 0,rgba(211, 211, 211, 0.5) 25%,rgb(211, 211, 211) 50%,rgba(211, 211, 211, 0.5) 75%,rgba(255, 255, 255, 0) 100%);
            right: 0;
            top: 0;
            content: '';
            width: 1px !important;
            height: 100%;
          }
        }
      }

      .expandee {
        min-height: 400px;
        font-size: $nav-font-size;
        box-shadow: $nav-box-shadow;
        top: $top-nav-height;

        .submenu {
          padding: 0 $default-padding;
          border-right: 1px solid $nav-border-color;
          &:last-child {
            border: none;
          }
        }
      }
    }
  }

  #search {
    margin-right: -4px;

    &.active {
      background: $nav-item-shaded-bg;

      .expandee {
        display: block;
        top: $top-nav-height;
      }
    }
  }

}

// Phone
@media only screen and (max-width: $break-small)  { 
  #topnav {
    @include flex-direction(column);
    height: auto;
  }

  #fatnav {
    width: 100%;
    max-height: 0;
    //@include transition(all 1s); // TODO(ericbidelman): janky on close
    overflow: hidden;
    background: $gray-light;

    &.active {
      max-height: 5000px; // TODO(ericbidelman): Hack. Make nav bigger than we'll ever need.
    }

    > ul {
      @include flex(1);
      @include flex-direction(column);
    }

    .toplevel {
      width: 100%;
      height: 50px;
      @include align-items(center);
      @include justify-content(center);
      @include display-inline-flex();
    }
    
    .pillar {
      @include flex-direction(column);
      padding: 0;
      border-bottom: $default-border;
      //border-color: $gray-medium;

      &.active {
        .expandee {
          display: initial;
        }
      }

    }

    .expandee {
      position: relative;
      padding: 0;
      background-color: rgba(229,229,229,.7);

      li {
        &.submenu {
          padding: $default-padding / 2 $default-padding - 5;
          //border-bottom: none;
          
          &:not(:last-child) {
            border-color: #ccc;//$gray-light-dark;
          }

          > ul {
            background-color: inherit;;
          }
        }
      }
    }

  }

  #logo {
    height: 50px;
    width: 90%;

    a {
      @include flex(1);
    }

    .collase-icon {
      display: initial;
    }
  }

  #search {
    @include display-flex();
    @include align-items(center);
    @include order(-1);
    padding: 15px 15px 0 15px;

    img {
      display: none;
    }

    .expandee {
      display: block;
    }
  }
}