nav {

&.nav-extended {
  height: auto;

  .nav-wrapper {
    min-height: $navbar-height-mobile;
    height: auto;
  }

  .nav-content {
    position: relative;
    line-height: normal;
  }
}

color: $navbar-font-color;
@extend .z-depth-1;
background-color: $primary-color;
width: 100%;
height: $navbar-height-mobile;
line-height: $navbar-line-height-mobile;

a { color: $navbar-font-color; }

i,
[class^="mdi-"], [class*="mdi-"],
i.material-icons {
  display: block;
  font-size: 24px;
  height: $navbar-height-mobile;
  line-height: $navbar-line-height-mobile;
}

.nav-wrapper {
  position: relative;
  height: 100%;
}

@media #{$large-and-up} {
  a.sidenav-trigger { display: none; }
}

// Collapse button
.sidenav-trigger {
  float: left;
  position: relative;
  z-index: 1;
  height: $navbar-height-mobile;
  margin: 0 18px;

  i {
    height: $navbar-height-mobile;
    line-height: $navbar-line-height-mobile;
  }
}

// Logo
.brand-logo {
  position: absolute;
  color: $navbar-font-color;
  display: inline-block;
  font-size: $navbar-brand-font-size;
  padding: 0;
  margin-left: 10px;
  &.center {
    left: 50%;
    transform: translateX(-50%);
  }

  @media #{$medium-and-down} {
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0px;
    &.left, &.right {
      padding: 0;
      transform: none;
    }

    &.left { left: 0.5rem; }
    &.right {
      right: 0.5rem;
      left: auto;
    }
  }

  &.right {
    right: 0.5rem;
    padding: 0;
  }

  i,
  [class^="mdi-"], [class*="mdi-"],
  i.material-icons {
    float: left;
    margin-right: 15px;
  }
}

// Title
.nav-title {
  display: inline-block;
  font-size: 32px;
  padding: 28px 0;
}

// Navbar Links
ul {
  margin: 0;

  li {
    transition: background-color .3s;
    float: left;
    padding: 0;

    &.active {
      background-color: rgba(0,0,0,.1);
    }
  }
  a {
    transition: background-color .3s;
    font-size: $navbar-font-size;
    color: $navbar-font-color;
    display: block;
    padding: 0 15px;
    cursor: pointer;

    &.btn, &.btn-large, &.btn-flat, &.btn-floating {
      margin-top: -2px;
      margin-left: 15px;
      margin-right: 15px;

      & > .material-icons {
        height: inherit;
        line-height: inherit;
      }
    }

    &:hover {
      background-color: rgba(0,0,0,.1);
    }
  }

  &.left {
    float: left;
  }
}

// Navbar Search Form
form {
  height: 100%;
}

.input-field {
  margin: 0;
  height: 100%;

  input {
    height: 100%;
    font-size: 1.2rem;
    border: none;
    padding-left: 2rem;

    &:focus, &[type=text]:valid, &[type=password]:valid,
    &[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
      border: none;
      box-shadow: none;
    }
  }

  label {
    top: 0;
    left: 0;

    i {
      color: rgba(255,255,255,.7);
      transition: color .3s;
    }
    &.active i { color: $navbar-font-color; }
  }
}

}

// Fixed Navbar .navbar-fixed {

position: relative;
height: $navbar-height-mobile;
z-index: 997;

nav {
  position: fixed;
}

} @media #{$medium-and-up} {

nav.nav-extended .nav-wrapper {
  min-height: $navbar-height;
}
nav, nav .nav-wrapper i, nav a.sidenav-trigger, nav a.sidenav-trigger i {
  height: $navbar-height;
  line-height: $navbar-line-height;
}
.navbar-fixed {
  height: $navbar-height;
}

}