.top-navigation {
  width: 100%;
  height: $nav-height - $border-width;
  z-index: $zindex-9;
  @extend .z-index-1;
}

.bottom-navigation {
  position: relative;
  height: $nav-height + $border-width;
  width: 100%;
  background: $bg-1-color;
  z-index: $zindex-1;
  @extend .z-index-1;


  .bottom-navigation-item {
    @include flex-centered();
    flex-direction: column;
    opacity: 0.5;
    cursor: pointer;
    height: inherit;
    line-height: 15px;

    &[disabled],
    &:disabled,
    &.disabled {
      opacity: 1;
    }

    &.active {
      opacity: 1;
      color: $primary-color;
    }

    .bottom-navigation-label {
      font-size: $font-size-sm;
    }

    &:last-child {
      justify-content: center !important;
    }
  }
}


.sub-navigation {
  height: $control-padding * 1.5;
  width: 100%;
  z-index: $zindex-1;
}


.vertical-navigation {
  height: 100%;
  width: 60px;

  .vertical-navigation-item {
    @include flex-centered();
    position: relative;
    cursor: pointer;
    width: 60px;
    height: 60px;

    opacity: 0.5;

    &.active, &:hover {
      opacity: 1;
    }
  }
}