@import "common";
@import "foundation/components/grid";
@import "../compass/css3/background-size";
@import "../compass/css3/border-radius";
@import "../compass/css3/box-shadow";

// Global Header
// Header wrapping element and row
.globalheader {
  background-color: white;
  height: rem-calc(100);
  padding: rem-calc(0 55);

  .inner_wrap {
    @include grid-row();
    max-width: $max-width;
  }
}

@media #{$mobile-only} {
  .globalheader {
    position: relative;
  }
}

.left-off-canvas-toggle {
  color: adjust-lightness($concrete, 10%);
  display: block;
  height: rem-calc(100);
  left: 0;
  line-height: rem-calc(100);
  @include single-transition(color, $speed: 100ms);
  position: absolute;
  text-align: center;
  top: 0;
  width: rem-calc(55);
  z-index: 1;

  &:before { display: block; margin-top: rem-calc(43); }

  &:visited { color: adjust-lightness($concrete, 10%); }
  &:hover { color: adjust-lightness($concrete, 20%); }
}

// Global chef elements
.logo_and_nav_toggle {
  @include grid-column(2, $collapse: true);
}

@media #{$mobile-only} {
  .logo_and_nav_toggle {
    @include grid-column(4, $collapse: true);
  }
}

@media #{$small-only} {
  .logo_and_nav_toggle {
    @include grid-column(4, $collapse: true);
  }
}

.off-canvas-list li a:hover {
  background-color: #222;
}

.logochef {
  background: url(image-path($appheader_logo_svg)) no-repeat;
  @include background-size(rem-calc(140) rem-calc(36));
  float: left;
  height: rem-calc(36);
  margin: rem-calc(32 0 0 0);
  width: rem-calc(140);

  .no-svg & {
    background: url(image-path($appheader_logo_png)) no-repeat;
  }

  a {
    display: block;
    height: rem-calc(36);
    width: rem-calc(140);

    span { display: none; }
  }
}

// App-specific elements
.appnav {
  @include grid-column(10, $collapse: true);

  ul {
    margin: 0;

    li {
      float: left;
      list-style: none;
      margin-right: rem-calc(30);

      &:first-child {
        margin-left: rem-calc(0);
      }

      &:last-child {
        margin-right: rem-calc(0);
      }

      a {
        color: darken($concrete, 5%);
        display: block;
        float: left;
        font: rem-calc(14) $accent_font;
        line-height: rem-calc(102);
        @include single-transition(color, $speed: 100ms);
        text-decoration: none;
        text-transform: uppercase;

        &:hover, &:active {
          color: lighten($concrete, 10%);
        }
      }
    }
  }
}

@media #{$mobile-only} {
  .appnav {
    @include grid-column(8, $collapse: true);
  }
}

@media #{$small-only} {
  .appnav {
    @include grid-column(8, $collapse: true);
  }
}

.usermenu {
  color: darken($concrete, 5%);
  cursor: pointer;
  float: right;
  font: rem-calc(14) $accent_font;
  height: rem-calc(100);
  line-height: rem-calc(102);
  margin-left: rem-calc(20);
  position: relative;
  @include single-transition(color, $speed: 100ms);

  &:hover {
    .userdropdown { display: block; }
  }

  .gravatar {
    @include border-radius(rem-calc(40));
    float: left;
    height: rem-calc(40);
    margin: rem-calc(30 10 0 0);
    width: rem-calc(40);
  }

  i {
    font-size: rem-calc(16);
    margin-left: rem-calc(5);
  }

  a {
    i.fa {
      font-size: 0.75rem;
      margin-left: rem-calc(5);
    }
  }
}

@media #{$mobile-only} {
  .usermenu {
    margin: rem-calc(0 -30 0 0);
  }
}

@media #{$small-only} {
  .usermenu {
    margin: rem-calc(0 -30 0 0);
  }
}

.appnav .userdropdown {
  background-color: white;
  @include border-bottom-radius(rem-calc(5));
  @include box-shadow(rgba(0,0,0,.2) 0 rem-calc(5) rem-calc(10));
  display: none;
  margin: 0;
  padding: 0;
  position: absolute;
  right: rem-calc(-20);
  top: rem-calc(100);
  width: rem-calc(220);
  z-index: 101;

  &:after {
    bottom: 100%;
    border: solid transparent;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: rem-calc(10);
    content: " ";
    height: 0;
    position: absolute;
    pointer-events: none;
    right: 0;
    width: 0;
  }

  li {
    border-bottom: 1px solid #ecedef;
    float: none;
    list-style: none;
    margin: 0;

    &:last-child { border: none; }

    a {
      color: $concrete;
      display: block;
      float: none;
      font-size: rem-calc(12);
      line-height: rem-calc(16);
      padding: rem-calc(10);
      text-decoration: none;

      &:hover, &:active {
        color: lighten($concrete, 10%);
      }

      &:before {
        font-family: "fontawesome";
        margin-right: rem-calc(7);
      }
    }
  }
}

@media #{$mobile-only} {
  .userdropdown {
    width: rem-calc(250);

    li a {
      font-size: rem-calc(18);
      padding: rem-calc(20);
    }
  }
}
