.navbar {
  background-color: lightgray;
  font-family: $type1;

  transition: left $action-transition-duration $action-transition-timing-function,
    width $action-transition-duration $action-transition-timing-function;
  -webkit-transition: left $action-transition-duration $action-transition-timing-function,
    width $action-transition-duration $action-transition-timing-function;
  -moz-transition: left $action-transition-duration $action-transition-timing-function,
    width $action-transition-duration $action-transition-timing-function;
  -ms-transition: left $action-transition-duration $action-transition-timing-function,
    width $action-transition-duration $action-transition-timing-function;

  padding: 0;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  @include display-flex();
  width: calc(100% - #{$sidebar-width-lg});
  min-height: $navbar-height;
  background: $navbar-bg;

  .navbar-menu-wrapper {
    transition: width $action-transition-duration $action-transition-timing-function;
    -webkit-transition: width $action-transition-duration $action-transition-timing-function;
    -moz-transition: width $action-transition-duration $action-transition-timing-function;
    -ms-transition: width $action-transition-duration $action-transition-timing-function;
    color: $navbar-menu-color;
    padding-left: 15px;
    padding-right: 15px;

    height: $navbar-height;
    width: 100%;
    background: $navbar-bg;

    .navbar-toggler {
      border: 0;
      outline: none;
      color: $navbar-menu-color;

      i {
        font-size: 1.5rem;
      }
    }

    .navbar-nav {
      @include flex-direction(row);
      @include align-items(stretch);

      .nav-item {
        @include display-flex();
        @include align-items(center);

        .nav-link {
          color: $navbar-menu-color;
          font-size: $navbar-font-size;

          i {
            font-size: $navbar-icon-font-size;
            color: $navbar-menu-color;
          }
        }
      }
    }
  }

}