//
// Top Bar Variables
//
$include-html-top-bar-classes: $include-html-classes !default;

// 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;

// Style the top bar dropdown elements
$topbar-dropdown-bg:                   #222 !default;
$topbar-dropdown-link-color:           #fff !default;
$topbar-dropdown-link-bg:              lighten($topbar-bg, 5%) !default;
$topbar-dropdown-toggle-size:          5px !default;
$topbar-dropdown-toggle-color:         #fff !default;
$topbar-dropdown-toggle-alpha:         0.5 !default;

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

$topbar-dropdown-label-color:          #555 !default;
$topbar-dropdown-label-text-transform: uppercase !default;
$topbar-dropdown-label-font-weight:    bold !default;
$topbar-dropdown-label-font-size:      emCalc(10px) !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;

// Divider Styles
$topbar-divider-border-bottom:         solid 1px lighten($topbar-bg, 10%) !default;
$topbar-divider-border-top:            solid 1px darken($topbar-bg, 10%) !default;

// Sticky Class
$topbar-sticky-class:                  ".sticky" !default;

@if $include-html-top-bar-classes != false {

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

    .top-bar { margin-bottom: 0; }
  }

  // Wrapped around .top-bar to make it stick to 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;
      margin: 0;
    }

    .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 :)
            @if $experimental {
              -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 :)
            @if $experimental {
              -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: $topbar-divider-border-bottom;
      border-top: $topbar-divider-border-top;
      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: $topbar-link-bg-hover;
          color: $topbar-link-color-hover;
        }


        &.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: $topbar-link-bg-active;
        color: $topbar-link-color-active;
      }
    }

    // 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: 50%;
          #{$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%;
        height: auto;

        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: $topbar-dropdown-label-text-transform;
        color: $topbar-dropdown-label-color;
        font-weight: $topbar-dropdown-label-font-weight;
        font-size: $topbar-dropdown-label-font-size;
      }
    }
  }

  // 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;
    }

    .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-height / 3 + 20 !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);
            top: $topbar-height / 2;
          }
        }

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

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

        .dropdown li.has-dropdown {
          & > a {
            &:after {
              border: none;
              content: "\00bb";
              margin-top: -16px;
              #{$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: $topbar-dropdown-link-bg;
          }

          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}: $topbar-divider-border-bottom;
        border-#{$default-float}: $topbar-divider-border-top;
        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%; }
        }
      }

    }

  }

}