//
// Secondary Navigation
//
// The secondary site navigation that is...
//
// .su-secondary-nav--accordion         - An accordion button light theme option.
// .su-secondary-nav--accordion-dark    - An accordion button dark theme option.
// .su-secondary-nav--buttons           - Button toggles instead of accordion links.
// .su-secondary-nav--buttons-dark      - Button toggles instead of accordion link, light edition.
//
// Markup: templates/components/secondary-nav/secondary-nav.twig
//
// Style guide: Composite.Secondary Navigation
//

// Default styles for secondary nav core elements.
.su-secondary-nav {
  @include font-smoothing;
  background-color: color(bg, $su-secondary-nav-colors);

  .su-nav-toggle {
    &::before {
      border-radius: 16px;
      height: 33px;
      width: 33px;
      top: calc(50% - 16px);
      right: calc(50% - 16px);
    }
  }

  // Expand everything when there is no javascript.
  &.no-js {
    .su-secondary-nav__menu {
      display: block;
    }
  }
}

// Global styles for nested menu items.
// ---------------------------------------------------------------------------
.su-secondary-nav__menu {
  @include margin(0 null);
  display: flex;
  flex-direction: column;
  width: 100%;
  list-style: none;
  background-color: color(bg, $su-secondary-nav-colors);
}

// Global styles for list items.
// ---------------------------------------------------------------------------
.su-secondary-nav__item {
  @include margin(null null 0);
}

// Global styles for secondary nav links.
// ---------------------------------------------------------------------------
.su-secondary-nav__link {
  @include fancy-hover(
    color(border--hover, $su-secondary-nav-colors),
    color(border--active, $su-secondary-nav-colors),
    'left'
  );
  @include padding(1.6rem 4.8rem 1.6rem 2.4rem);
  display: block;
  color: color(link, $su-secondary-nav-colors);
  font-weight: $su-font-semi-bold;
  font-size: 2rem;
  border-top: color(divider, $su-secondary-nav-colors) solid 1px;
  outline: 0;

  &:focus,
  &:hover {
    color: color(link, $su-secondary-nav-colors);
    text-decoration: underline;
  }
}

// First level items
// ---------------------------------------------------------------------------
// .su-secondary-nav__menu-lv1 {
// // Nothing to see here.
// }

// Secondary Level Items
// ---------------------------------------------------------------------------
.su-secondary-nav__menu-lv2 {
  .su-secondary-nav__item {
    &:last-child {
      a {
        &:last-child {
          @include padding(null null 1.4rem null);
        }
      }
      @include padding(0.1rem null 0 null);
    }
  }

  .su-secondary-nav__link {
    @include padding(0.8rem 4.8rem 0.8rem 2.4rem);
    border: 0;
    font-size: 1.8rem;
  }

  .su-nav-toggle {
    max-height: 43px;
    height: 43px;
  }
}

// Third level items.
// ---------------------------------------------------------------------------
.su-secondary-nav__menu-lv3 {
  .su-secondary-nav__link {
    font-size: 1.6rem;
    border: 0;
  }

  .su-nav-toggle {
    max-height: 38px;
    height: 38px;
  }
}

// Currently active item.
// ---------------------------------------------------------------------------
.su-secondary-nav__item--current {
  > .su-secondary-nav__link {

    &::before {
      visibility: visible;
      height: 100%;
      width: 6px;
      transform: scaleY(1);
      background-color: color(border--active, $su-secondary-nav-colors);
    }

    &:hover,
    &:focus {
      &::before {
        left: 6px;
        transition: left 0.1s ease-out;
        background-color: color(border--active, $su-secondary-nav-colors);
      }
    }
  }
}
