// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "~bourbon/app/assets/stylesheets/bourbon";
@import "../../common/variables";

/*
Navbars

Markup:
<nav class="pt-navbar {{.modifier}}">
  <div class="pt-navbar-group pt-align-left">
    <div class="pt-navbar-heading">Blueprint</div>
    <input class="pt-input" placeholder="Search files..." type="text" />
  </div>
  <div class="pt-navbar-group pt-align-right">
    <button class="pt-button pt-minimal pt-icon-home">Home</button>
    <button class="pt-button pt-minimal pt-icon-document">Files</button>
    <span class="pt-navbar-divider"></span>
    <button class="pt-button pt-minimal pt-icon-user"></button>
    <button class="pt-button pt-minimal pt-icon-notifications"></button>
    <button class="pt-button pt-minimal pt-icon-cog"></button>
  </div>
</nav>

.pt-dark - Dark theme

Styleguide pt-navbar
*/

$navbar-padding: $pt-grid-size * 1.5 !default;

$navbar-background-color: $white !default;
$dark-navbar-background-color: $dark-gray5 !default;

.pt-navbar {
  position: relative;
  z-index: $pt-z-index-content;
  box-shadow: $pt-elevation-shadow-1;
  background-color: $navbar-background-color;
  height: $pt-navbar-height;
  padding: 0 $navbar-padding;

  &.pt-dark,
  .pt-dark & {
    background-color: $dark-navbar-background-color;
  }

  // shadow for dark navbar in light theme apps
  &.pt-dark {
    box-shadow: inset $pt-dark-elevation-shadow-1;
  }

  // shadow for dark navbar in dark theme apps
  .pt-dark & {
    box-shadow: $pt-dark-elevation-shadow-1;
  }

  &.pt-fixed-top {
    @include position(fixed, 0 0 null);
  }

  .pt-logo {
    // logo must be centered in 50px square
    margin-right: $navbar-padding;
    width: $pt-navbar-height - $navbar-padding * 2;
  }
}

.pt-navbar-heading {
  margin-right: $navbar-padding;
  font-size: $pt-font-size-large;
}

.pt-navbar-group {
  display: flex;
  align-items: center;
  height: $pt-navbar-height;

  &.pt-align-left {
    float: left;
  }

  &.pt-align-right {
    float: right;
  }
}

.pt-navbar-divider {
  margin: 0 $pt-grid-size;
  border-left: 1px solid $pt-divider-black;
  height: $pt-navbar-height - $pt-grid-size * 3;

  .pt-dark & {
    border-left-color: $pt-dark-divider-white;
  }
}

/*
Fixed width

Markup:
<nav class="pt-navbar pt-dark">
  <div style="margin: 0 auto; width: 480px;"> <!-- ADD ME -->
    <div class="pt-navbar-group pt-align-left">
      <div class="pt-navbar-heading">Blueprint</div>
    </div>
    <div class="pt-navbar-group pt-align-right">
      <button class="pt-button pt-minimal pt-icon-home">Home</button>
      <button class="pt-button pt-minimal pt-icon-document">Files</button>
      <span class="pt-navbar-divider"></span>
      <button class="pt-button pt-minimal pt-icon-user"></button>
      <button class="pt-button pt-minimal pt-icon-notifications"></button>
      <button class="pt-button pt-minimal pt-icon-cog"></button>
    </div>
  </div>
</nav>

Styleguide pt-navbar.pt-container
*/