// Please try to maintain the same code style as outlined here:
// https://github.com/lintelio/lintel/blob/master/CONTRIBUTING.md

@import 'navbar-vars';
@import 'navbar-functions';
@import 'navbar-mixins';


// Common
// ------
.navbar {
  @include clearfix;
  @include navbar-theme(
    $bg: $navbar-bg,
    $bg-hover: $navbar-bg-hover,
    $bg-active: $navbar-bg-active,
    $bg-brand: $navbar-bg-brand,
    $border: $navbar-border,
    $border-brand: $navbar-border-brand,
    $text: $navbar-text,
    $link: $navbar-link,
    $link-hover: $navbar-link-hover,
    $link-active: $navbar-link-active
  );
  transition: top $navbar-animate ease-in-out,
              bottom $navbar-animate ease-in-out,
              left $navbar-animate ease-in-out,
              width $navbar-animate ease-in-out;
  z-index: $navbar-z-index;
}

// Modifiers
.navbar-fixed {
  position: fixed;
  width: 100%;
}

// Brand
.navbar-brand {
  border-bottom: 1px solid transparent;
  line-height: $navbar-height - 4;
  vertical-align: middle;
}

.navbar-brand-link {
  unicode-bidi: bidi-override;
  text-decoration: none;
}

// Title
.navbar-title {
  color: inherit;
}

// Logo
.navbar-logo {
  max-width: 100%;
  vertical-align: middle;
}

// List
.navbar-list {
  list-style: none;
  margin: 0;
  padding: 0;

  > li {
    > a {
      display: block;
      text-decoration: none;
    }
  }
}

// Dropdown
.navbar-dropdown {
  box-shadow: none;
  margin-top: 1px;
}


// Scroll to hide
// --------------
@if $navbar-scrollable == true {
  .navbar-up.navbar-mobile {
    top: -100%;
  }

  @media screen and (min-width: $navbar-breakpoint-min) {
    .navbar-up.navbar-top {
      top: -100%;
    }
  }
}


// Navbar Mobile
// -------------
.navbar-mobile {
  display: none;
}

@media screen and (max-width: $navbar-breakpoint-max) {
  .navbar:not(.navbar-mobile):not(.active) {
    left: -$navbar-expanded-width;
  }

  .navbar-mobile.navbar-mobile {
    display: block;
    height: auto;
    left: 0;
    right: 0;
    width: 100%;
    z-index: $navbar-z-index + 5;
  }
}


// Top and Bottom
// --------------
@media screen and (min-width: $navbar-breakpoint-min) {
  .navbar-top,
  .navbar-bottom {
    @include navbar-y;
  }

  .navbar-top {
    border-bottom: 1px solid $navbar-border;
    top: 0;
  }

  .navbar-bottom {
    border-top: 1px solid $navbar-border;
    bottom: 0;
  }
}

@media screen and (max-width: $navbar-breakpoint-max) {
  .navbar-top,
  .navbar-bottom {
    @include navbar-x;
  }

  .navbar-top {
    border-right: 1px solid $navbar-border;
    left: 0;
  }

  .navbar-bottom {
    border-left: 1px solid $navbar-border;
    right: 0;
  }
}


// Left and Right
// --------------
@if $navbar-x == true {
  .navbar-right,
  .navbar-left {
    @include navbar-x;
  }

  .navbar-left {
    border-right: 1px solid $navbar-border;
    left: 0;
  }

  .navbar-right {
    border-left: 1px solid $navbar-border;
    right: 0;
  }
}

@if $navbar-x == true and $navbar-collapsible == true {
  // Body
  .has-navbar-left {
    transition: padding-left $navbar-animate ease-in-out;
  }

  .has-navbar-right {
    transition: padding-right $navbar-animate ease-in-out;
  }

  @media screen and (min-width: $navbar-breakpoint-min) {
    .has-navbar-expanded {
      padding-left: $navbar-expanded-width;
    }

    .has-navbar-collapsed {
      padding-left: $navbar-collapsed-width;

      .navbar {
        width: $navbar-collapsed-width;
      }
    }
  }

  // Tooltips
  @media screen and (min-width: $navbar-breakpoint-min) {
    .navbar-tooltip {
      transition: opacity $navbar-animate ease-in-out;
    }

    .has-navbar-collapsed {
      .navbar-tooltip {
        left: -1000px; // hide tooltip so it does not trigger on hover
        opacity: 0; // needed for transition to expanded
        position: absolute;
      }

      a:hover > .navbar-tooltip,
      .open > a > .navbar-tooltip {
        border-radius: $border-radius-base;
        left: 100%;
        margin-left: $cushion-x-sm;
        opacity: 1;
        padding-left: $navbar-padding-x;
        padding-right: $navbar-padding-x;
        position: absolute;
        white-space: nowrap;
      }

      &.has-navbar-collapsing .navbar-tooltip {
        left: auto; // show tooltip text when collapsing (aka, fading out)
        position: static;
      }
    }
  }
}


// Mobile Toggle
// -------------
.navbar-toggle {
  border: 1px solid $navbar-border;
  border-radius: $border-radius-base;
  display: inline-block;
  margin-right: $navbar-padding-x;
  padding: ($navbar-toggle-padding-y - $navbar-toggle-bar-margin-y) $navbar-toggle-padding-x;
  vertical-align: middle;
}

.navbar-toggle-bar,
.navbar-toggle-bar:before,
.navbar-toggle-bar:after {
  content: '';
  display: block;
  margin-top: $navbar-toggle-bar-margin-y;
  margin-bottom: $navbar-toggle-bar-margin-y;
  width: 1.5em;
}

@media screen and (min-width: $navbar-breakpoint-min) {
  .navbar-toggle {
    display: none;
  }
}


// Themes
// ------
.navbar-inverse {
  @include navbar-theme(
    $bg: $navbar-inverse-bg,
    $bg-hover: $navbar-inverse-bg-hover,
    $bg-active: $navbar-inverse-bg-active,
    $bg-brand: $navbar-inverse-bg-brand,
    $border: $navbar-inverse-border,
    $border-brand: $navbar-inverse-border-brand,
    $text: $navbar-inverse-text,
    $link: $navbar-inverse-link,
    $link-hover: $navbar-inverse-link-hover,
    $link-active: $navbar-inverse-link-active
  );
}