@import 'marketing_assets/sass-helpers';

$nav-open-transition: transform 0.4s linear;
$nav-close-transition: transform 0.2s linear;
$nav-opacity: 0.95;

/*============================================================================
  Main element margins
==============================================================================*/
main {
  background: $color-white;
}

/*============================================================================
  Nav wrapper and parent nav elements
==============================================================================*/
.marketing-nav-wrapper {
  width: 100%;
  margin: 0 auto;

  &.js-is-active .icon-caret-down {
    display: none;
  }
}

.marketing-nav {
  width: 100%;
  position: relative;
  clear: both;
  height: $nav-height;
}

/*============================================================================
  Primary navigation
==============================================================================*/
.marketing-nav__primary {
  background-color: $color-primary-nav-background;

  .page--has-transparent-nav--primary & {
    margin-top: -$nav-height;
    transform: translateY($nav-height);
    z-index: 10;
    background: transparent;
  }
}

/*============================================================================
  Main nav links
==============================================================================*/
.marketing-nav__items {
  float: left;

  > li {
    display: inline-block;
    line-height: $nav-height - 1; // Full height causes overflow
  }

  .popover {
    top: $nav-height - 15; // Better vertical spacing for popover menu

    // Explicitly set for secondary nav if it differs from default base class (primary nav) behavior
    @if ($nav-secondary-height != $nav-height) {
      .marketing-nav__secondary & {
        top: $nav-secondary-height - 15;
      }
    }
  }
}

.marketing-nav__user {
  position: absolute;
  top: 0;
  right: $gutter;

  .marketing-nav__item {
    padding-right: $gutter-half;
  }

  li:last-child .marketing-nav__item {
    padding-right: 0;
  }
}

.marketing-nav__item {
  @include font-brandon-medium;
  display: inline-block;
  padding-left: $gutter-half;
  color: $color-primary-nav-text;
  font-size: em(16);

  &:hover,
  &:focus,
  &.active {
    color: $color-white;
  }

  &.popover__arrow {
    padding-right: $gutter-half;
  }

  .marketing-nav__secondary & {
    color: $color-black;
    opacity: $nav-secondary-item-opacity;

    @include shopify-breakpoint($tablet-up) {
      color: $color-secondary-nav-text;
    }

    &:hover,
    &:focus,
    &.active {
      opacity: 1;
    }

    li:first-child & {
      padding-left: 0;
    }
  }
}

/*============================================================================
  Nav CTA button
==============================================================================*/
.marketing-nav__button {
  @extend .marketing-button;
  @extend .marketing-button--small;
  line-height: normal;

  @include shopify-breakpoint($tablet-down) {
    padding-left: em(14);
    padding-right: em(14);
    font-size: em(16);
  }

  @include shopify-breakpoint($mobile) {
    margin-right: -20px;
  }
}

/*============================================================================
  Secondary navigation
==============================================================================*/
.marketing-nav__secondary {
  border-bottom: 1px solid rgba($color-black, 0.15);
  background: $color-secondary-nav-background;

  @include shopify-breakpoint($tablet-up) {
    // Need to remove left padding on first link
    li:first-child > a {
      padding-left: 0;
    }

    .marketing-nav__items {
      // scss-lint:disable ImportantRule
      // javascript sets display:none on when toggled on mobile
      display: block !important;
      // scss-lint:enable ImportantRule
    }
  }

  @include shopify-breakpoint($mobile) {
    .icon-caret-down {
      background: transparent asset-svg-url(caret-down, $color-nav-icon) no-repeat right center;
      position: absolute;
      top: 50%;
      right: $gutter-half;
      transform: translateY(-50%);
    }

    .marketing-nav__items {
      position: absolute;
      background: $color-white;
      width: 100%;
      left: 0;
      box-shadow: 0 2px 4px rgba($color-black, 0.1);
      display: none;
      z-index: 10;
    }

    .marketing-nav__item {
      display: block;
      border-bottom: $border-grey;
      padding: 0 $gutter-half;
    }

    li {
      display: block;
      padding: 0 $gutter-half;

      &:last-child .marketing-nav__item {
        border-bottom: 0;
      }
    }
  }

  // By default, secondary nav inherits base class (primary nav) behavior.
  // Explicitly set height on secondary nav if it differs from primary.
  @if ($nav-secondary-height != $nav-height) {
    height: $nav-secondary-height;

    .marketing-nav__items > li {
      line-height: $nav-secondary-height - 1;
    }
  }
}

.marketing-nav__secondary__button {
  display: none;
  width: 100%;
  text-align: left;
  line-height: $nav-secondary-height;
  padding-left: $gutter;
  margin-bottom: 0;
  font-weight: $font-weight-semibold;

  @include shopify-breakpoint($mobile) {
    display: block;
  }
}

.marketing-nav__secondary__action {
  color: rgba($color-secondary-nav-text, $nav-secondary-item-opacity);
}

.marketing-nav__secondary__close {
  display: none;
  position: absolute;
  right: $gutter-half;
  line-height: $nav-secondary-height;
  pointer-events: none;
  top: -$nav-secondary-height + 1;

  @include shopify-breakpoint($tablet-up) {
    display: none;
  }

  .js-is-active & {
    display: block;
  }
}

/*============================================================================
  Nav icons
==============================================================================*/

.marketing-nav__logo {
  float: left;
  margin-right: $gutter-half;
}

.marketing-nav__logo--full-color {
  vertical-align: top;
  margin-top: 10px;
  width: $shopify-logo-width;
  height: $shopify-logo-height;
  background: asset-svg-url(shopify-full-color-white) no-repeat;

  .marketing-nav__primary & {
    @include shopify-breakpoint($tablet-down) {
      position: absolute;
      top: 0;
      left: 50%;
      margin-top: 12px;
      margin-left: -($shopify-logo-width / 2); // center icon by offset half its width
      margin-right: 0;
      background-position: center top;
    }

    @include shopify-breakpoint($mobile) {
      // bag only on mobile
      background-image: asset-svg-url(shopify-full-color-bag);
      margin-left: -(30px / 2);
      width: 30px;
      height: 30px;
    }
  }
}

.marketing-nav__hamburger {
  display: none;
  margin-top: 15px;
  width: 24px;
  height: 22px;
  background-image: asset-svg-url(hamburger);

  @include shopify-breakpoint($tablet-down) {
    display: inline-block;
  }
}

/*============================================================================
  Skip Link
==============================================================================*/
.skip-to-main.focusable:focus {
  @include font-brandon-regular;
  position: absolute;
  color: $color-white;
  height: $nav-height;
  line-height: $nav-height;
  padding: 0 em(10);
  background: $color-slate;
  z-index: $z-nav-main + 11; // in front of the logo
}