//
// NAVIGATIONBAR 
//

.navigationbar {
  @include backface-visibility(hidden);
  @include background($navigationbar-background);
  @include touch-action(pan-x);

  min-height: $navigationbar-height;
  height: $navigationbar-height;
  color: $navigationbar-text-color; 

  padding-left: rem(16);
  padding-right: rem(16);
  position: relative;

  z-index:1;
}

// Fix for WP8 rendering problem on drawer. 
.root:not(.android):not(.ios) {
  outline: 1px solid rgba(0,0,0,0);
}

.title {
  font-weight: $navigationbar-font-weight;
  font-size: $navigationbar-text-size;
  text-align: center;
}

.navigationbar > .label {
  height:  $navigationbar-height;
  line-height:  $navigationbar-height;
}

.navigationbar-button, .navigationbar-backbutton {
  @include background($navigationbarbutton-background);
  @include border-radius($navigationbarbutton-border-radius);
  @include background-clip(padding-box);
  @include box-sizing(border-box);

  display:block;

  color: $navigationbarbutton-text-color;
  border: rem(1) solid $navigationbarbutton-border-color;

  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  font-weight: $navigationbarbutton-font-weight;
  font-size: rem(12);

  padding-left: rem(5);
  padding-right: rem(5);

  height: $navigationbar-height - $navigationbar-padding * 2;

  min-width: rem(50);
}

.left-container, .right-container {
  padding: $navigationbar-padding;
}

.navigationbar-button > div, .navigationbar-backbutton > div {
  height: 100%;
  line-height: 100%;
}

.navigationbar-button.active, .navigationbar-backbutton.active {
  @include background($navigationbarbutton-active-background);
  color: $navigationbarbutton-active-text-color;
  border: rem(1) solid $navigationbarbutton-active-border-color;
}