.glypto-nav,
#glypto-nav-placeholder {
  float: left;
  width: $glypto-nav-width;
  min-height: 1px;
}

.glypto-nav {
  transition: 120ms ease-in;
  -webkit-font-smoothing: antialiased;
  color: #ddd;
  font-size: 14px;

  &.s-hidden {
    transition: 120ms ease-out;
    margin-left: -$glypto-nav-width;

    > .glypto-nav-toggle {
      margin-right: -35px;
      opacity: .7;

      &:before {
        box-shadow: 0 2px 0 1px black, 0 7px 0 1px black, 0 12px 0 1px black;
      }

      &:active {
        background: rgba(black, .2);
      }
    }
  }

  ._logo {
    font-weight: bold;
    padding: 0 10px;
    line-height: 45px;
    font-size: 16px;
    display: inline-block;
    outline: none;
    color: #aaa;
    background: none;

    &:hover,
    &:focus {
      color: white;
    }
  }

  .search {
    padding: 4px 10px 10px;

    input {
      transition: 100ms;
      box-sizing: border-box;
      border: 0;
      background: rgba(white, .7);
      padding: 5px 10px;
      font-size: inherit;
      width: 100%;
      outline: 1px solid rgba(black, .2);

      &::-webkit-search-decoration {
        -webkit-appearance: none;
      }

      @include placeholder {
        color: #888;
      }

      &:focus {
        background: white;
        outline: 1px solid rgba(black, .5);

        @include placeholder {
          color: #ddd;
        }
      }
    }
  }

  > .glypto-nav-toggle {
    @include size(25px);
    transition: margin 360ms ease-out;
    padding: 0;
    background: none;
    border: 0;
    float: right;
    margin: 10px 7px 0 0;
    position: relative;
    z-index: 1;
    cursor: pointer;
    opacity: .7;
    outline: none;

    &:before {
      @include position(absolute, 5px 0 null 0);
      transition: 300ms;
      box-shadow: 0 2px 0 1px white, 0 7px 0 1px white, 0 12px 0 1px white;
      width: 15px;
      margin: auto;
      content: '';
    }

    &:hover {
      opacity: 1;
    }

    &:active {
      opacity: 1;
      background: rgba(black, .5);
    }
  }

  ul {
    @include clearfix;
    list-style: none;
    font-size: 14px;
    line-height: 1.2;
    padding: 0;
    margin: 0;

    a {
      transition: 50ms;
      color: #ddd;

      &:hover,
      &:focus {
        transition: none;
        background: rgba(white, .07);
        color: white;
      }

      &:active {
        background: rgba(white, .15);
      }
    }
  }

  a {
    display: block;
    padding: 8px 10px;
    color: $light-grey;
    text-decoration: none;
    outline: none;

    &:active {
      color: white;
      background: rgba(black, .01);
    }
  }

  li._index {
    > a {
      font-weight: 600;
    }

    ._count {
      float: right;
      color: #999;
      font-weight: normal;
      line-height: 16px;
    }

    ul {
      margin: 0;

      a:before {
        content: '';
        margin: 0 5px;
      }

      ul a:before {
        margin-left: 15px;
      }

      li:not(._index) a:before {
        content: '•';
      }
    }
  }

  li.s-selected > a {
    background: linear-gradient(58deg, rgba(black, .6), rgba(black, .1));

    &:active,
    &:focus {
      background: black;
    }
  }
}