// vf-navigation

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

@import 'vf-navigation.variables.scss';

.vf-navigation__link {
  @include inline-link(
    $vf-link--color: neutral(700),
    $vf-link--visited-color: neutral(700),
    $vf-link--hover-color: neutral(900)
  );

  &:focus,
  &:hover {
    text-decoration: underline;
  }
}

.vf-navigation__item {
  [aria-current='page'],
  [aria-selected='true'] {
    color: interactive-color();
    text-shadow: 1px 0 0 currentColor; // faux bold so there won't be any layout shift
  }
}
.vf-navigation--main {
  .vf-navigation__link {
    @include set-type(text-body--2, $custom-margin-bottom: 0);
  }
}

.vf-navigation--global {
  // This is needed as part of the global header.
  // It tells the navigation to go to the end of the available space.
  @media (min-width: $vf-breakpoint--lg) {
    margin-left: auto;
  }
}

// On this page variant
.vf-navigation--on-this-page.vf-u-fullbleed {
  // conflict with vf-u-fullbleed
  position: sticky;
}

.vf-navigation--on-this-page.vf-u-fullbleed {
  margin-bottom: map-get($vf-spacing-map, vf-spacing--400);
  overflow-x: auto;
  overflow-y: hidden;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1986;

  .vf-navigation__link {
    &:focus,
    &:hover {
      text-decoration: none;
      text-shadow: 1px 0 0 currentColor; // faux bold so there won't be any layout shift

      text-decoration: underline;
      text-decoration-thickness: 4px;
      text-underline-offset: .5em;
      text-underline-position: under;
      text-decoration-color: neutral(900);
    }
  }

  .vf-navigation__link[aria-selected='true'] {
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: .5em;
    text-underline-position: under;
    text-decoration-color: interactive-color();
  }
  > .vf-list {
    flex-wrap: nowrap;
    // margin-right: 0 !important;
  }
  [class*="__item"] {
    flex-shrink: 0;
  }
}

@media only screen and (min-width: $vf-breakpoint--md) {
  .vf-navigation--on-this-page.vf-u-fullbleed {
    margin-bottom: map-get($vf-spacing-map, vf-spacing--800); // fullbleed eats about 1em of bottom margin
    overflow: unset; // allow shadow to bleed out
    &::before {
      box-shadow: 0 0 2px 1px rgba(0, 0, 0, .2);
    }
  }
}
//  make it work right on mobile
@media only screen and (max-width: $vf-breakpoint--md) {
  .vf-navigation--on-this-page.vf-u-fullbleed {
    @include padding(map-get($vf-spacing-map, vf-spacing--200),map-get($vf-spacing-map, vf-spacing--800),map-get($vf-spacing-map, vf-spacing--200),map-get($vf-spacing-map, vf-spacing--500));
    margin-left: -1em; // inverse of vf-body padding
    width: calc(100% - 1em);
  }
  // .vf-navigation--on-this-page.vf-u-fullbleed::before {
    // box-shadow: none;
    // display: none;
  // }
}