// Navbar menu
//
// Navbar menu
// is available.
//
// Markup: navbar.hbs
//
// Style guide: components.navbar

.navbar__wrapper {
  margin-top: -80px;

  @include respond-to(medium) {
    margin-top: 0;
    margin-bottom: 25px;
    background: color(nav-bg);
  }
}

// Menu icon
.menu-icon {
  position: absolute;
  right: 20px;
  top: -60px;
  font-size: 15px;
  font-weight: bold;
  color: color(text-bg);
  text-transform: uppercase;

  @include respond-to('medium') {
    position: relative;
    display: none;
  }

  i {
    font-size: 24px;
    margin-left: 10px;
    position: relative;
    bottom: -2px;
  }

  &.close {
    display: none;

    &.active {
      display: block;

      @include respond-to('medium') {
        display: none;
      }
    }
  }

  &.open {
    display: none;

    &.active {
      display: block;

      @include respond-to('medium') {
        display: none;
      }
    }
  }
}

// Sub menu icon
.sub-menu-icon {
  padding: 11px;
  position: absolute;
  right: 0;
  top: 0;
  background: color(navbar);
  color: color(navbar-bg);
  z-index: 1;
  text-indent: 0;
  line-height: 1;

  @include respond-to('medium') {
    display: none;
  }

  &.active i {
    @extend .fa;
    @extend .fa-minus;
  }
}

.navbar,
%navbar {
  width: 100%;
  position: relative;

  .menu {
    @extend .clearfix;
    background: color(navbar-bg);
    display: none;

    @include respond-to('medium') {
      position: relative;
      display: block;
    }

    &.active {
      display: block;
    }

    li {
      @extend %menu__item;
    }

    ul {
      @extend %sub-menu;
    }
  }
}

%menu__item {
  padding: 0;
  float: left;
  list-style: none;
  position: relative;
  width: 100%;
  border: 0;
  text-indent: 0;

  @include respond-to('medium') {
    width: auto;
  }

  &-is-active {
    background: color(navbar);
  }

  &-active-trail {
    color: color(navbar-active) !important;
  }

  > a {
    color: color(navbar);
    font-family: $font-body;
    padding: 11px 22px;
    text-decoration: none;
    text-transform: capitalize;
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 100%;
    font-weight: inherit;
    line-height: 1;

    @include respond-to('medium') {
      width: auto;
      padding: 19px 30px;
      display: block;
    }

    &:focus {
      border: 0;
      outline: none;
    }

    &.active,
    &:hover,
    &:focus {
      @extend %menu__item-is-active;
    }
  }

  &.sfHover,
  &:focus,
  &:hover {
    a {
      @include respond-to('medium') {
        background: color(navbar-bg-hover);
        color: color(navbar-active);
      }
    }

    ul {
      @include respond-to('medium') {
        left: 0;
        padding: 2px;
        margin: 0;
        background: color(navbar-bg-hover);
        top: 55px;
      }
    }
  }

  ul {
    @extend %sub-menu;
  }
}

%sub-menu {
  display: none !important;

  @include respond-to('medium') {
    display: block !important;
  }

  @include respond-to('medium') {
    background: color(navbar-bg-hover);
    left: -999em;
    position: absolute;
    min-width: 280px;
    z-index: 99;
    top: 56px;
  }

  &.active {
    display: block !important;
    margin: 0;
    position: relative;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0;

    a {
      padding-left: 30px;
    }
  }

  li {
    width: 100%;

    &:focus,
    &:hover,
    &.sfHover {
      ul {
        @include respond-to('medium') {
          display: block !important;
        }
      }
    }

    &:focus,
    &:hover {
      > a {
        @include respond-to('medium') {
          background: color(navbar);
          color: color(link-hover);
          text-decoration: underline;
        }
      }

      ul {
        @include respond-to('medium') {
          left: 280px;
          display: block;
          margin: 0 -4px;
          top: -2px;
        }
      }
    }

    a {
      width: 100% !important;
      padding-left: 30px;
      color: color(navbar-active);

      @include respond-to('medium') {
        padding: 11px 20px;
      }

      &:focus,
      &:hover {
        @include respond-to('medium') {
          background: color(navbar);
          color: color(link-hover);
          text-decoration: underline;
        }
      }
    }
  }

  ul {
    @include respond-to('medium') {
      display: none !important;
      position: absolute;
      top: -2px;
    }

    &.active a {
      padding-left: 40px;
    }
  }
}

// Drupal selectors.

.block-superfish {
  @extend %navbar;
}

.sf-main-menu > li.active-trail {
  @extend %menu__item-is-active;

    a {
      @extend %menu__item-active-trail;
    }
}
