//
// Top Bar Variables
//

// Background color for the top bar
$topbar-bg: #111 !default;

// Height and margin
$topbar-height: 45px !default;
$topbar-margin-bottom: emCalc(30px) !default;

// Control Input height for top bar
$topbar-input-height: 2.45em !default;

// Controlling the styles for the title in the top bar
$topbar-title-weight: bold !default;
$topbar-title-font-size: emCalc(17px) !default;

// Set the link colors and styles for top-level nav
$topbar-link-color: #fff !default;
$topbar-link-weight: bold !default;
$topbar-link-font-size: emCalc(13px) !default;
$topbar-link-hover-lightness: -30% !default; // Darken by 30%

// Style the top bar dropdown elements
$topbar-dropdown-bg: #333 !default;
$topbar-dropdown-link-color: #fff !default;
$topbar-dropdown-toggle-size: 5px !default;
$topbar-dropdown-toggle-color: #fff !default;
$topbar-dropdown-toggle-alpha: 0.5 !default;
$dropdown-label-color: #555 !default;

// Top menu icon styles
$topbar-menu-link-transform: uppercase !default;
$topbar-menu-link-font-size: emCalc(13px) !default;
$topbar-menu-link-weight: bold !default;
$topbar-menu-link-color: #fff !default;
$topbar-menu-icon-color: #fff !default;
$topbar-menu-link-color-toggled: #888 !default;
$topbar-menu-icon-color-toggled: #888 !default;

// Transitions and breakpoint styles
$topbar-transition-speed: 300ms !default;
$topbar-breakpoint: emCalc(940px) !default; // Change to 9999px for always mobile layout
$topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !default;


/* Wrapped around .top-bar to contain to grid width */
.contain-to-grid {
  width: 100%;
  background: $topbar-bg;
}

// Wrapped around .top-bar to make it fixed at the top
.fixed {
  width: 100%;
  #{$default-float}: 0;
  position: fixed;
  top: 0;
  z-index: 99;
}

.top-bar {
  overflow: hidden;
  height: $topbar-height;
  line-height: $topbar-height;
  position: relative;
  background: $topbar-bg;
  margin-bottom: $topbar-margin-bottom;

  // Topbar Global list Styles
  ul {
    margin-bottom: 0;
    list-style: none;
  }

  .row { max-width: none; }

  form,
  input { margin-bottom: 0; }

  input { height: $topbar-input-height; }

  .button { padding-top: .5em; padding-bottom: .5em; margin-bottom: 0; }

  // Title Area
  .title-area { position: relative; }

  .name {
    height: $topbar-height;
    margin: 0;
    font-size: $em-base;

    h1 {
      line-height: $topbar-height;
      font-size: $topbar-title-font-size;
      margin: 0;
      a {
        font-weight: $topbar-title-weight;
        color: $topbar-link-color;
        width: 50%;
        display: block;
        padding: 0 $topbar-height / 3;
      }
    }
  }

  // Menu toggle button on small devices
  .toggle-topbar {
    position: absolute;
    #{$opposite-direction}: 0;
    top: 0;

    a {
      color: $topbar-link-color;
      text-transform: $topbar-menu-link-transform;
      font-size: $topbar-menu-link-font-size;
      font-weight: $topbar-menu-link-weight;
      position: relative;
      display: block;
      padding: 0 $topbar-height / 3;
      height: $topbar-height;
      line-height: $topbar-height;
    }

    // Adding the class "menu-icon" will add the 3-line icon people love and adore.
    &.menu-icon {
      #{$opposite-direction}: $topbar-height / 3;
      top: 50%;
      margin-top: -16px;
      padding-#{$default-float}: 40px;

      a {
        text-indent: -48px;
        width: 34px;
        height: 34px;
        line-height: 33px;
        padding: 0;
        color: $topbar-menu-link-color;

        span {
          position: absolute;
          #{$opposite-direction}: 0;
          display: block;
          width: 16px;
          height: 0;
          // Shh, don't tell, but box-shadows create the menu icon :)
          -webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
                              0 16px 0 1px $topbar-menu-icon-color,
                              0 22px 0 1px $topbar-menu-icon-color;

          box-shadow:         0 10px 0 1px $topbar-menu-icon-color,
                              0 16px 0 1px $topbar-menu-icon-color,
                              0 22px 0 1px $topbar-menu-icon-color;
        }
      }
    }
  }

  // Change things up when the top-bar is expanded
  &.expanded {
    height: auto;
    background: transparent;

    .title-area { background: $topbar-bg; }

    .toggle-topbar {
      a { color: $topbar-menu-link-color-toggled;
        span {
          // Shh, don't tell, but box-shadows create the menu icon :)
          -webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
                              0 16px 0 1px $topbar-menu-icon-color-toggled,
                              0 22px 0 1px $topbar-menu-icon-color-toggled;

          box-shadow:         0 10px 0 1px $topbar-menu-icon-color-toggled,
                              0 16px 0 1px $topbar-menu-icon-color-toggled,
                              0 22px 0 1px $topbar-menu-icon-color-toggled;
        }
      }
    }
  }

}

// Right and Left Navigation that stacked by default
.top-bar-section {
  #{$default-float}: 0;
  position: relative;
  width: auto;
  @include single-transition($default-float, $topbar-transition-speed);

  ul {
    width: 100%;
    height: auto;
    display: block;
    background: $topbar-dropdown-bg;
    font-size: $em-base;
    margin: 0;
  }

  .divider,
  [role="separator"] {
    border-bottom: solid 1px lighten($topbar-dropdown-bg, 10%);
    border-top: solid 1px darken($topbar-dropdown-bg, 10%);
    clear: both;
    height: 1px;
    width: 100%;
  }

  ul li {
    & > a {
      display: block;
      width: 100%;
      color: $topbar-link-color;
      padding: 12px 0 12px 0;
      padding-#{$default-float}: $topbar-height / 3;
      font-size: $topbar-link-font-size;
      font-weight: $topbar-link-weight;
      background: $topbar-dropdown-bg;

      &:hover { background: darken($topbar-dropdown-bg, 3%); }


      &.button {
        background: $primary-color;
        font-size: $topbar-link-font-size;
        &:hover {
          background: darken($primary-color, 10%);
        }
      }
      &.button.secondary {
        background: $secondary-color;
        &:hover {
          background: darken($secondary-color, 10%);
        }
      }
      &.button.success {
        background: $success-color;
        &:hover {
          background: darken($success-color, 10%);
        }
      }
      &.button.alert {
        background: $alert-color;
        &:hover {
          background: darken($alert-color, 10%);
        }
      }

    }

    // Apply the active link color when it has that class
    &.active > a { background: darken($topbar-dropdown-bg, 3%); }
  }

  // Add some extra padding for list items contains buttons
  .has-form { padding: $topbar-height / 3; }

  // Styling for list items that have a dropdown within them.
  .has-dropdown {
    position: relative;

    & > a {
      &:after {
        @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
        margin-#{$opposite-direction}: $topbar-height / 3;
        margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
        position: absolute;
        top: 22px;
        #{$opposite-direction}: 0;
      }
    }

    &.moved { position: static;
      & > .dropdown {
        visibility: visible;
      }
    }
  }

  // Styling elements inside of dropdowns
  .dropdown {
    position: absolute;
    #{$default-float}: 100%;
    top: 0;
    visibility: hidden;
    z-index: 99;

    li { width: 100%;
      a {
        font-weight: normal;
        padding: 8px $topbar-height / 3;
      }

      &.title h5 { margin-bottom: 0;
        a {
          color: $topbar-link-color;
          line-height: $topbar-height / 2;
          display: block;
        }
      }
    }

    label {
      padding: 8px $topbar-height / 3 2px;
      margin-bottom: 0;
      text-transform: uppercase;
      color: $dropdown-label-color;
      font-weight: bold;
      font-size: emCalc(10px);
    }
  }
}

// Element that controls breakpoint, no need to change this ever
.top-bar-js-breakpoint {
  width: $topbar-breakpoint !important;
  visibility: hidden;
}
.js-generated { display: block; }


// Top Bar styles intended for screen sizes above the breakpoint.
@media #{$topbar-media-query} {
  .top-bar { background: $topbar-bg; @include clearfix; overflow: visible;
    .toggle-topbar { display: none; }

    .title-area { float: $default-float; }
    .name h1 a { width: auto; }

    input,
    .button {
      line-height: 2em;
      font-size: emCalc(14px);
      height: 2em;
      padding: 0 10px;
      position: relative;
      top: 8px;
    }

    &.expanded { background: $topbar-bg; }
  }

  .contain-to-grid .top-bar { max-width: $row-width; margin: 0 auto; margin-bottom: $topbar-margin-bottom; }

  .top-bar-section {
    @include single-transition(none,0,0);
    #{$default-float}: 0 !important;

    ul {
      width: auto;
      height: auto !important;
      display: inline;

      li {
        float: $default-float;
        .js-generated { display: none; }
      }
    }

    li {
      a:not(.button) {
        padding: 0 $topbar-height / 3;
        line-height: $topbar-height;
        background: $topbar-bg;
        &:hover { background: adjust-color($topbar-dropdown-bg, $lightness: $topbar-link-hover-lightness); }
      }
    }

    .has-dropdown {
      & > a {
        padding-#{$opposite-direction}: $topbar-dropdown-toggle-size * 7 !important;

        &:after {
          @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
          margin-top: -($topbar-dropdown-toggle-size / 2);
        }
      }

      &.moved { position: relative;
        & > .dropdown { visibility: hidden; }
      }

      &:hover,
      &:active {
        & > .dropdown {
          visibility: visible;
        }
      }

      .dropdown li.has-dropdown {
        & > a {
          &:after {
            border: none;
            content: "\00bb";
            margin-top: -15px;
            #{$opposite-direction}: 5px;
          }
        }
      }

    }

    .dropdown {
      #{$default-float}: 0;
      top: auto;
      background: transparent;
      min-width: 100%;

      li {
        a {
          color: $topbar-dropdown-link-color;
          line-height: 1;
          white-space: nowrap;
          padding: 7px $topbar-height / 3;
          background: lighten($topbar-bg, 5%);
        }

        label {
          white-space: nowrap;
          background: lighten($topbar-bg, 5%);
        }

        // Second Level Dropdowns
        .dropdown {
          #{$default-float}: 100%;
          top: 0;
        }
      }
    }

    & > ul > .divider,
    & > ul > [role="separator"] {
      border-bottom: none;
      border-top: none;
      border-#{$opposite-direction}: solid 1px lighten($topbar-bg, 10%);
      border-#{$default-float}: solid 1px darken($topbar-bg, 10%);
      clear: none;
      height: $topbar-height;
      width: 0px;
    }

    .has-form {
      background: $topbar-bg;
      padding: 0 $topbar-height / 3;
      height: $topbar-height;
    }

    // Position overrides for ul.right
    ul.right {
      li .dropdown {
        left: auto;
        right: 0;

        li .dropdown { right: 100%; }
      }
    }

  }

}