//
// Navigation
// --------------------------------------------------

//== Sidebar right
//
//##

.navmenu
  background-color: $navbar-default-bg
  width: $left-menu-width-open
  overflow: hidden
  z-index: $zindex-navbar-fixed + 10

.navmenu-default
  background-color: #fff
  border: none
  +material-box-shadow-soft(3)

  .navmenu-brand
    background-color: $blue-darker
    color: #fff
    display: block
    font-size: 1.4em
    font-weight: 300
    line-height: 20px
    margin: 0
    padding: 20px
    text-align: center
    text-transform: uppercase
    &:hover,
    &:focus
      background-color: $blue-darker
      color: white

  .navmenu-nav
    background-color: $gray-lighter
    height: calc(100% - 60px)
    width: $left-menu-width-open
    padding: 0
    margin: 0
    display: block
    overflow-x: hidden
    overflow-y: auto
    list-style: none

    //** overriding jasny
    > li > a
      color: $gray
      &:hover,
      &:focus
        background-color: $gray
        color: $gray-lighter

    //** Para components
    .component-section-list-items
      background-color: white
      list-style: none
      margin: 0
      padding: 0

    .component-section-title
      background-color: $gray-lighter
      color: $text-color
      font-weight: bold
      line-height: 19px
      padding: 30px 30px 15px 15px
      text-transform: uppercase
      width: 100%
      &:hover,
      &:focus
        background-color: $gray-lighter
        color: $text-color
        text-decoration: none
      .fa
        margin-right: -15px
      &.collapsed
        .fa
          +rotate(180deg)

    .component-item
      a, button
        background-color: transparent
        display: block
        font-weight: 400
        line-height: 19px
        color: $text-color
        font-weight: 400
        padding: 11px 13px 11px 15px
        text-decoration: none

        +default-transition
        &:hover,
        &:focus
          padding-left: 25px
          background-color: $gray-lighter

      &.active
        a, button
          border-left: 2px solid $brand-primary
          background-color: $gray-light
          color: $text-color
          padding-left: 25px

//== Top navbar
//
//##

.navbar-default
  border: none
  padding-right: 22px
  .nav > li >
    button
      -webkit-appearance: none
      border: none
    a,
    button
      padding: 6px 10px
      text-align: center
      margin: 14px 3px
      color: inherit
      border-radius: $border-radius-small
      i
        line-height: 14px
      &.btn-home
        background-color: $blue-darker
        color: $gray-lighter

      &.btn-power-off
        background-color: $brand-danger
        color: $gray-lighter

.navbar-fixed-top
  padding-left: 0
  &.navbar
    margin-bottom: 0

//** Btn menu toggle
.navbar-toggle
  float: left
  display: block

//** Dark theme override
//***********************
.dark-theme.navmenu-default
  .navmenu-nav
    background-color: $navbar-default-bg
    > li > a
      &:hover,
      &:focus
        background-color: $navbar-default-bg
        color: white
  .component-section-title
    background-color: $navbar-default-bg
    color: white
    &:hover,
    &:focus
      background-color: transparent
      color: white
  .component-item
    a, button
      background-color: $text-color
      color: $gray-lighter
      &:hover,
      &:focus
        background-color: $navbar-default-bg
    &.active
      a, button
        background-color: lighten($navbar-default-bg, 10%)
        border-color: $brand-primary
        color: white