/*
Navbar
 */
.navbar {
  min-height: $navbar-height;

  &.fixed-top {
    + .content-page {
      padding-top: $navbar-height;
    }

    + .navbar.fixed-top {
      top: $navbar-height;

      + .content-page {
        padding-top: $navbar-height * 2;
      }

      + .navbar.fixed-top {
        top: $navbar-height * 2;

        + .content-page {
          padding-top: $navbar-height * 3;
        }
      }
    }
  }
}

/**
navbar toggler
 */
.navbar-toggler {
  border: 0;
  font-size: $navbar-toggler-font-size;
  width: add($navbar-toggler-size, $navbar-toggler-padding-x * 2);
  height: add($navbar-toggler-size, $navbar-toggler-padding-y * 2);
  margin: $navbar-toggler-margin;
  position: relative;
}


.navbar-toggler-icon {
  $time: $navbar-toggler-transform-time / 2;

  background-image: none !important;
  position: absolute;
  width: $navbar-toggler-size;
  height: $navbar-toggler-item-height;
  border-radius: 3px;

  left: 50%;
  top: 50%;
  margin-left: -($navbar-toggler-size / 2);
  margin-top: -($navbar-toggler-item-height / 2);

  background: currentColor;
  transform-origin: center;
  transition: transform $time, top $time $time, bottom $time $time;

  &:before,
  &:after {
    content: '';
    background: inherit;
    position: absolute;
    height: inherit;
    width: inherit;
    left: 0;
    border-radius: inherit;
    transition: inherit;
  }

  &:before {
    top: $navbar-toggler-item-spacing;
  }

  &:after {
    bottom: $navbar-toggler-item-spacing;
  }

  .navbar-toggler.collapsed & {
    transform: rotate(45deg);
    transition: top $time, bottom $time, transform $time $time, opacity $time;

    &:before {
      top: 0;
      transform: rotate(-90deg);
    }

    &:after {
      bottom: 0;
      opacity: 0;
    }
  }
}

/**
navbar with border
*/
.navbar-border {
  box-shadow: inset 0 -1px 0 0px $navbar-border-color;
}

/**
Navbar logo
 */
.navbar-brand-logo {
  height: 2rem;
}

.navbar-nav {
  margin-right: -($navbar-padding-x);
  margin-left: -($navbar-padding-x);

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

  .nav-item:hover,
  .dropright:hover {
    > .dropdown-menu {
      display: block;
    }
  }

  .dropdown-menu {
    .dropdown,
    .dropright {
      .dropdown-toggle:after {
        margin-left: auto;
      }
    }
  }
}

.navbar-brand {
  padding: 0;
  line-height: 1;
}