@import 'mixins';
@import 'variables';

$header-height: 60px;
$navbar-height: 50px;
$small-logo-height: 26px;
$small-logo-width: 170px;
$gravatar-size: 35px;

#nav {
  width: 100%;
  height: $navbar-height;
  background-color: $theme-dark;
  font-weight: 700;
  text-transform: uppercase;
  border-width: 0;
  margin: 0;
  z-index: 999;
  position: relative;

  #next-event {
    background: $theme-dark;
    color: $white;
    padding: 10px;
    border-bottom-right-radius: 10px;
    text-transform: none;
    font-size: 1em;
    overflow: hidden;
    opacity: 0.7;
    display: inline-block;
    vertical-align: top;
    font-weight: normal;
    position: absolute;
    top: $navbar-height;

    p {
      vertical-align: text-bottom;
      margin: 0;
    }

    @include css-transition(height 0.3s ease);
    @include css-transition(padding 0.3s ease);
  }

  #affix-nav-brand {
    padding: 12px 15px;
    height: $small-logo-height;

    img {
      @include css-transition(all 0.3s ease);
      @include css-transform(scale(0));
    }
  }

  &.affix {
    position: fixed;
    top: 0;

    #affix-nav-brand img {
      @include css-transform(scale(1));
    }

    #next-event {
      height: 0;
      padding: 0;
    }
  }

  .dropdown-menu {
    right: 0;
  }

  .navbar-nav>.dropdown>a .caret {
    border-top-color: #999;
    border-bottom-color: #999;
  }

  .navbar-nav>li>a {
    color: $white;
    background-color: $theme-dark;
    @include css-transition(background-color 0.3s ease);

    &:hover, &:active, &.active {
      background-color: $theme-darker;
    }

    .fa {
      width: 16px;
      height: 16px;
    }
  }
}

.navbar-collapse.in {
  /*3.0.2 bug workaround*/
  overflow-y: visible;
}

.navbar-toggle {
  outline: 0;
  @media (max-width: $screen-sm-min - 1px) {
    background-color: $theme-main;
  }
}

#navbar-toggle-mobile {
  border-color: #fff;
}

@media (min-width: $screen-sm-min - 1px) {
  .navbar-nav.nav-justified > li {
    float: none;
  }
}

// MASTHEAD

header#main_header {
  background: $theme-main;
  height: $header-height;
  color: $white;

  @media (max-width: $screen-sm-min - 1px) {
    margin-bottom:0px !important;
  }

  h1, h2, h3 a, a, a:hover {
    color: $white;
  }

  h3 {
    css-border-radius: 3px;
    background: $theme-main;
    font-family: 'Kreon', serif;
    font-size: 34px;
    padding: 12px 10px 6px;
  }

  .dropdown {
    height: $header-height;
    padding: 0 15px;

    &.open > a {
      color: $theme-darker;
    }
  }

  .dropdown-menu {
    css-border-radius: 0;
    background: $theme-main;
    border-width: 0;
    font-size: .9em;
    margin: 0;
    padding: 0;

    form.button_to > button{
      text-wrap: nowrap;
     width: 100%;
    display: flex;
    justify-content: flex-start;
    background-color: transparent;
    border: none;
    }
    form.button_to > button > li > i::before{
      margin-right: 10px;
    }

    li form.button_to>li {


      @include css-transition(background-color .3s ease);
      padding: 15px;

      &:hover {
        background: $link-hover-color;
      }
    }
  }

  #account-controls {
    font-size: 1.2em;
    height: $header-height;
    line-height: $header-height;

    #user-gravatar {
      @include css-shadow(0 0 1px 1px $white);
      display: inline-block;
      height: $gravatar-size;
      width: $gravatar-size;
    }

    $fa-custom-icon-size: 26px;

    .fa-custom-accounts {
      height: $fa-custom-icon-size;
      text-align: center;
      width: $fa-custom-icon-size;
    }

    .dropdown {
      display: inline-block;
    }
  }

  .navbar-inverse, .navbar-toggle:hover {
    margin-left:5px;
    margin-top:8px;
    background-color: $theme-main;
  }

  .navbar-toggle, .navbar-toggle:active {
    background-color: $theme-main;
  }

  #login-signup a {
    css-border-radius: 0;
    padding: 0 15px;
    text-align: center;

    &:hover, &:active {
      color: $theme-darker;
    }
  }
}


@media (max-width: $screen-sm-min) {
  #nav {
    height: auto;

    #next-event {
      display: block;
      position: static;
      text-align: center;
    }
  }
}

#google-search-wrapper {
  font-weight: normal;
  height: $header-height;
  text-transform: none;
  width: 350px;

  &.dropdown-menu {
    border: 0;
    padding: 0;
  }

  a.gs-title {
    color: $theme-lighter-dark;
  }

  input.gsc-input {
    @include box-sizing(content-box);
    color: $theme-dark;
    font-size: 14px;
    width: auto;
  }

  .gsc-control-cse-en,
  .gsc-control-cse {
    @include box-sizing(content-box);
    background-color: $theme-main;
    border: 0;
    font-family: 'Ubuntu', Arial, sans-serif;
    height: $header-height;
    padding: 0 15px;
    width: auto;

    div {
      @include box-sizing(content-box);
    }
  }

  .gsc-input-box {
    @include box-sizing(content-box);
    border-radius: 5px;
    height: 32px;
  }

  .gsc-search-button,
  .gsc-search-button-v2 {
    @include box-sizing(content-box);
    border-radius: 5px;
    height: 16px;
    padding-bottom: 8px;
    padding-top: 8px;
    width: 16px;
  }

  .gsib_a,
  .gsib_b {
    padding-top: 7px;
  }

  .gsc-control-wrapper-cse {
    height: $header-height;
  }

  // Google Search results
  .gsc-result {
    padding: 10px 15px 10px 0;
  }

  .gsc-results-wrapper-overlay,
  .gsc-results-wrapper-visible {
    @include box-sizing(content-box);
  }

  .gsc-results-wrapper-overlay {
    left: 23%;
    width: 50%;
  }

  .gsc-table-result {
    margin: 0 8px;
  }
}
