$navbar-z-index: 10;

.navbar {
  position: fixed;
  z-index: $navbar-z-index;
  visibility: hidden;
  background: #FFF;
  &.visible {
    visibility: visible;
  }

  .navbar-container {
    position: absolute;

    .bar.bar-header {
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
      z-index: 2;
      padding: 5px 0px;

      &.bar-transparent {
        background: transparent;
      }

      &.cached {
        box-shadow: none;
        z-index: 1;
      }

      .title {
        -webkit-transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        opacity: 0;
      }

      .hide {
        display: none;
      }
    }
  }
}

.navbar,
.navbar > .navbar-container {
  left: 0;
  top: 0;
  width: 100%;
  height: 44px;
}

.bar.bar-header {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}