@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 {
  @extend .navbar-expand,
          .align-items-stretch,
          .bg-primary,
          .p-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,
            .d-flex,
            .align-items-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,
            %btn-primary,
            .py-0,
            .border-0,
            .rounded-0,
            .d-flex,
            .align-items-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 %font-size-xs,
                .font-weight-bold,
                .text-lowercase,
                .text-light-transparent !optional;

        margin-top: -(map_get($spacers, 1))
      }
    }

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

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