@import "../vendor/bootstrap/scss/navbar";
@import "fonts/asap";

.navbar-switcher .dropdown-toggle {
  color: inherit;
  padding: 0;

  &::after {
    @extend %dropdown-toggle-icon;
    @extend .rounded-circle;

    font-size: 20px;
    margin-left: map-get($spacers, 3);
  }
}

.navbar-content {
  @extend %text-lg-semibold;

  vertical-align: middle;
}

.navbar-icon {
  vertical-align: middle;

  .material-icons-round { font-size: $navbar-img-width; }
}

.navbar-img { max-width: $navbar-img-width; }

.navbar-img + .navbar-content,
.navbar-icon + .navbar-content { margin-left: map-get($spacers, 3); }

.dropdown-item {
  .navbar-content { @extend %text-md-regular; }
  .navbar-img { max-height: $navbar-dropdown-img-width; }
  .navbar-icon .material-icons-round { font-size: $navbar-dropdown-img-width; }
}

.navbar {
  sds-sidenav-trigger .btn { margin-right: map-get($spacers, 2); }

  .input-group {
    .form-control {
      & + .btn {
        border-style: solid;
        border-width: $input-border-width;
        border-left: none;
        margin-left: 0;
      }

      border-right: none;
    }

    .dropdown .dropdown-toggle {
      border: solid transparent;
      border-start-end-radius: 0;
      border-end-end-radius: 0;
      line-height: $icon-size;
      padding: map-get($spacers, 1) $navbar-nav-link-padding-x;

      &::after { @extend %dropdown-toggle-icon; }
    }
  }
}

.navbar-header {
  & > *:first-child {
    padding-left: $navbar-brand-padding-x;
    padding-right: $navbar-brand-padding-x;
  }

  .navbar-link {
    @extend .cursor-pointer;

    color: inherit;
    display: inline-block;

    &:hover { text-decoration: none; }
  }
}

.navbar-brand {
  @extend %navbar-user-divider-right;
  @extend %text-lg-semibold;

  $divider-space: $navbar-divider-space - $navbar-brand-padding-x;

  margin-right: $divider-space;
  padding-right: $divider-space;

  &::after {
    height: $navbar-divider-height;
    top: $navbar-img-width - $navbar-divider-height;
  }

  &.navbar-switcher .dropdown-toggle::after { display: none; } /* stylelint-disable-line no-descending-specificity */

  .dropdown-item.active,
  .dropdown-item:active {
    border-left: $navbar-divider-width solid $gray-900;

    &:not(:hover) { background-color: transparent; }
  }
}

.navbar-instance {
  line-height: inherit;
  padding-top: $navbar-brand-padding-y;
  padding-bottom: $navbar-brand-padding-y;
  white-space: nowrap;

  & + .navbar-instance { margin-left: map-get($spacers, 1); }
}

.navbar-nav {
  & + .navbar-nav { margin-left: map-get($spacers, 2); }

  &.nav-capsule {
    padding-left: $navbar-nav-link-padding-x;
    padding-right: $navbar-nav-link-padding-x;

    .dropdown-toggle::after { display: none; } /* stylelint-disable-line no-descending-specificity */
  }
}

.navbar-user {
  .nav-link {
    line-height: $navbar-user-img-width;
    padding-top: $navbar-user-padding-y;
    padding-bottom: $navbar-user-padding-y;
  }

  .user-initial {
    @extend %text-md-bold;
    @extend .rounded-circle;

    /* stylelint-disable font-family-no-missing-generic-family-keyword */
    font-family: Asap, $font-family-sans-serif;
    line-height: $navbar-user-img-width;
    text-align: center;
    width: $navbar-user-img-width;
  }

  &:not(:first-child) { @extend %navbar-user-divider-left; }
  &:not(:last-child) { @extend %navbar-user-divider-right; }
}

@each $name, $config in $navbar-variant {
  @include navbar-variant($name, map-get($config, "mode"), map-get($config, "primary"),
  map-get($config, "secondary"), map-get($config, "color"));
}

@include media-breakpoint-down(md) {
  .navbar-brand .navbar-content { display: none; }

  .navbar-user .nav-link {
    font-size: 0;
    visibility: hidden;

    .user-initial {
      margin-right: 0 !important;
      visibility: visible;
    }
  }
}