@import "~bootstrap/scss/navbar";

// Set default customise component variables here,
// Override it in theme variables files
$enable-navbar-fixed-top:      false          !default;
$x-navbar-nav-link-min-height: 3.125rem       !default;
$x-navbar-logo-height:         1.625rem       !default;
$x-navbar-nav-border-color:    rgba(theme-color('primary-lighter'), 0.6) !default;

@if($enable-navbar-fixed-top) {
  body {
    padding-top: $x-navbar-nav-link-min-height;
  }
}

%x-navbar-primary,
.x-navbar-primary {
  @extend .navbar,
          %p-0,
          %bg-transparent,
          %d-block,
          %mb-0;
  @if($enable-navbar-fixed-top) {
    @extend %position-fixed,
            %fixed-top;
  }

  > *:not(:last-child):not(.x-main-heading) {
    @extend .border-right;
    border-color: $x-navbar-nav-border-color !important;
  }

  .navbar-brand  {
    @extend %mr-0,
            %px-3,
            %x-flex-a-center;
  }

  .navbar-nav {
    &:last-child {
      @extend %ml-auto;
    }
  }

  .nav-item {
    @extend %d-flex,
            %align-items-stretch;
    border: 0 solid $x-navbar-nav-border-color;


    &:not(:last-child) {
      border-right-width: 1px;
      &:first-child {
        border-left-width: 1px;
      }
    }
  }

  .nav-link {
    @extend %btn,
            %border-0,
            %py-0,
            %btn-primary,
            %x-flex-a-center;

    &.x-nav-link-icon {
      @include hover-focus-active {
        @extend %text-secondary-darker;
      }
    }

    min-height: $x-navbar-nav-link-min-height;

    .x-nav-user-info {

      @extend %font-size-lg,
              %mr-2,
              %d-flex,
              %flex-column,
              %align-items-start,
              %font-weight-normal,
              %text-capitalize;

      small {
        @extend %text-lowercase,
                %font-size-xs,
                %font-weight-bold,
                %text-light-transparent !optional;
        margin-top: -(map_get($spacers, 1))
      }
    }

    &.x-nav-link-icon {
      @extend %x-icon-lg;
    }
  }
}

.x-navbar-secondary {
  @extend %x-navbar-primary,
          %border-bottom-0,
          %my-2;
}

.x-navbar-logo {
  height: $x-navbar-logo-height;
}