// 
// Styles for Navbar module
// --------------------------------------------------
#navbar {
  font-family: inherit;
  font-size: 1.0em;
  .navbar-bar {
    background-color: $drupalNavbarBackground;
    padding: 10px 0;
    height: 60px;
    @include box-shadow(none);
    .section {
      &.section-user {
        float: right !important;
      }
      ul.menu {
        li {
          margin: 0 10px 0 0;
          a {
            background: lighten($drupalNavbarBackground, 5) !important;
            border: 1px solid #000;
            @include border-radius(3px);
            @include box-shadow(inset rgba(#FFFFFF,0.2) 0 1px 0);
            color: #999;
            overflow: hidden;
            padding: 8px 15px !important;
            text-decoration: none;
            text-shadow: none !important;
            i {
              font-size: 1.2em;
              width: 0.9em;
              height: 0.9em;
              line-height: 100%;
              margin-right: 8px;
              margin-top: -3px;
              text-align: center;
              text-indent: 0;
              vertical-align: middle;
            }
            span {
              vertical-align: middle;
              font-size: 12px;
              text-transform: uppercase;
            }
            &:hover,
            &.active {
              color: #fff;
              background: $drupalNavbarLinkColor !important;
            }
            &.toggle-tray {
              margin-left: 10px;
            }
          }
          &:hover {
            background: none !important;
          }
        }
      }
    }
  }
  .navbar-tray {
    background-color: $drupalNavbarBackground;
    border: none;
    @include box-shadow(inset -5px 0px 15px 0px rgba(#000, 0.4));
    color: #fff;
    width: 18rem !important;
    a {
      color: #999;
    }
    .lining {
      padding: 0;
    }
    .navbar-shortcuts {
      display: none;
    }
    .navbar-menu {
      border: none;
      margin: 0;
      .handle {
        background-size: 30%;
        width: 4em
      }
      .fleximenu {
        li.open {
          .box {
            border: none !important;
          }
        }
        > ul.menu {
          > li {
            border: none;
            border-bottom: 1px solid #000;
            border-top: 1px solid #333;
            margin: 0;
            &.first {
              border-top: none;
            }
            .box {
              > a {
                background: none !important;
                color: #fff;
                @include clearfix();
                font-weight: normal;
                line-height: 100%;
                padding: 0px;
                text-decoration: none !important;
                text-indent: 0;
                i {
                  background: #000;
                  float: left;
                  font-size: 1.4em;
                  height: 60px;
                  line-height: 60px;
                  width: 60px;
                  text-align: center;
                }
                span {
                  float: left;
                  height: 60px;
                  font-size: 1.2em;
                  line-height: 60px;
                  padding: 0 15px;
                  vertical-align: top;
                }
                &:hover {
                  background: $drupalNavbarLinkColor !important;
                  border: none;
                  text-decoration: none !important;
                  i {
                    background-color: darken($drupalNavbarLinkColor, 20);
                  }
                }
              }
              &.expanded {
                .box {
                  a {
                    margin-right: 55px;
                  }
                }
              }
            }
            ul.menu {
              background: #000;
              border-top: 1px solid #000;
              padding: 0;
              margin: 0;
              li {
                margin: 0;
                border: none;
                .handle {
                  display: none;
                }
                a {
                  padding: 10px 15px;
                  background: none !important;
                  border-left: 60px solid #000;
                  margin: 0;
                  span {
                    height: auto;
                    font-size: 1.0em;
                    line-height: 100%;
                    padding: 0;
                  }
                  &:hover {
                    text-decoration: none;
                    border: none;
                    border-left: 60px solid darken($drupalNavbarLinkColor, 20);
                  }
                }
                &.open {
                  border: none;
                }
              }
            }
            &.open {
              > .box {
                background: $drupalNavbarLinkColor !important;
                border: none;
                > a {
                  text-decoration: none !important;
                  i {
                    background-color: darken($drupalNavbarLinkColor, 20);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.menu-tray-open {
  padding-left: 18rem !important;
  .container {
    width: 95%;
  }
  .navbar-bar {
    left: 18rem !important;
  }
  .navbar-tray {
    top: 0 !important;
  }
}

// Tablet
@media (min-width: 768px) and (max-width: 979px) {
  #navbar {
    .navbar-bar {
      .section {
        ul.menu {
          li {
            a {
              padding: 8px 15px 9px !important;
              margin: 0;
              text-align: center;
              text-indent: 0;
              width: auto !important;
              height: auto !important;
              i {
                font-size: 1.8em;
                width: 0.9em;
                height: 0.9em;
                line-height: 100%;
                margin: 0;
                text-align: center;
                text-indent: 0;
                vertical-align: middle;
              }
              span {
                span {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
  .menu-tray-open {
    .navbar-bar {
      a {
        display: none !important;
        &.toggle-tray {
          display: block !important;
        }
      }
    }
  }
}

// Mobile
@media (max-width: 767px) {
  #navbar {
    .navbar-bar {
      .section {
        ul.menu {
          li {
            a {
              padding: 8px 15px 9px !important;
              margin: 0;
              text-align: center;
              text-indent: 0 !important;
              width: auto !important;
              height: auto !important;
              i {
                font-size: 1.8em;
                width: 0.9em;
                height: 0.9em;
                line-height: 100%;
                margin: 0;
                text-align: center;
                text-indent: 0;
                vertical-align: middle;
              }
              span {
                span {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
  .menu-tray-open {
    .navbar-bar {
      a {
        display: none !important;
        &.toggle-tray {
          display: block !important;
        }
      }
    }
  }
}