$nav-variables: (
  mobile-spacing: calc(var(--p-space-2) + var(--p-space-05)),
  desktop-spacing: calc(var(--p-space-1) + var(--p-space-05)),
  mobile-height: 40px,
  desktop-height: 32px,
  icon-size: 20px,
  item-line-height: 40px,
);
@function nav($variable) {
  @return map-get($nav-variables, $variable);
}

$nav-animation-variables: (
  items-to-stagger: 12,
  stagger-interval: 50,
);
@function nav-animation($variable) {
  @return map-get($nav-animation-variables, $variable);
}

@mixin nav-item-attributes {
  @include unstyled-button;
  font-size: var(--p-font-size-5);
  font-weight: var(--p-font-weight-semibold);
  line-height: var(--p-line-height-6);
  display: flex;
  flex-grow: 1;
  align-items: flex-start;
  max-width: 100%;
  padding: 0 var(--p-space-1) 0 var(--p-space-3);
  margin: 0 var(--p-space-2);
  border-radius: var(--p-border-radius-1);
  color: var(--p-text);
  text-decoration: none;
  text-align: left;

  &:hover {
    background: var(--p-background-hovered);
    color: var(--p-text);
    text-decoration: none;
  }

  @include focus-ring;

  &.keyFocused {
    @include focus-ring($style: 'focused');
    background: var(--p-background-hovered);
    color: var(--p-text);
    text-decoration: none;
  }

  &:active,
  &:active:hover {
    color: var(--p-text);
    background-color: var(--p-background-pressed);
    @include no-focus-ring;
  }

  @include breakpoint-after($nav-min-window-corrected) {
    font-size: var(--p-font-size-5);
    font-weight: var(--p-font-weight-medium);
    line-height: var(--p-line-height-5);
    padding-left: var(--p-space-3);
  }

  &::-moz-focus-inner {
    border: 0;
  }

  svg,
  img {
    display: block;
    height: var(--p-space-5);
    width: var(--p-space-5);
  }

  .Icon-resized {
    svg,
    img {
      margin: var(--p-space-05);
      height: var(--p-space-4);
      width: var(--p-space-4);
    }
  }
}

@mixin nav-item-icon-attributes {
  // hardcoding this variable for now because we need to rip out all instances
  // of filter() eventually but can't for this one right now. The value is the
  // equivalent value for filter('icon').
  --pc-navigation-filter-icon: brightness(0) saturate(100%) invert(36%)
    sepia(13%) saturate(137%) hue-rotate(169deg) brightness(95%) contrast(87%);
  --pc-navigation-filter-icon-action-primary: brightness(0) saturate(100%)
    invert(20%) sepia(59%) saturate(5557%) hue-rotate(162deg) brightness(95%)
    contrast(101%);
  --pc-navigation-filter-icon-on-interactive: brightness(0) saturate(100%)
    invert(100%);

  @include recolor-icon(
    $fill-color: var(--p-icon),
    $filter-color: var(--pc-navigation-filter-icon)
  );
  flex-shrink: 0;
  align-self: flex-start;
  width: nav(icon-size);
  height: nav(icon-size);
  margin-top: calc(var(--p-space-2) + var(--p-space-05));
  margin-right: var(--p-space-3);
  margin-bottom: calc(var(--p-space-2) + var(--p-space-05));
  @include breakpoint-after($nav-min-window-corrected) {
    margin-top: var(--p-space-1);
    margin-right: var(--p-space-2);
    margin-bottom: var(--p-space-1);
  }

  .Item:hover &,
  .Item.keyFocused & {
    @include recolor-icon(
      $fill-color: var(--p-icon),
      $filter-color: var(--pc-navigation-filter-icon)
    );
  }

  .Item-selected &,
  .Item-selected:hover &,
  .subNavigationActive &,
  .subNavigationActive:hover &,
  .Item-child-active &,
  .Item-child-active:hover &,
  .Item-selected.keyFocused & {
    @include recolor-icon(
      $fill-color: var(--p-action-primary),
      $filter-color: var(--pc-navigation-filter-icon-action-primary)
    );
  }

  // The regular nav items are wrapped in polaris icon components which add
  // the styles we're missing which causes the channel items to shift down
  svg {
    display: block;
  }
}

@mixin nav-list-item-attributes {
  position: relative;
  display: flex;
  flex-wrap: wrap;

  .RollupSection &,
  .SecondaryNavigation & {
    opacity: 1;
  }
  @for $i from 1 through nav-animation(items-to-stagger) {
    &:nth-child(#{$i}) {
      animation-delay: #{($i - 1) * nav-animation(stagger-interval)}ms;
    }
  }
}

@mixin nav-item-text-attributes {
  flex: 1 1 auto;
  margin-top: calc(var(--p-space-2) + var(--p-space-05));
  margin-bottom: calc(var(--p-space-2) + var(--p-space-05));
  line-height: var(--p-line-height-2);
  font-size: var(--p-font-size-3);

  @include breakpoint-after($nav-min-window-corrected) {
    margin-top: var(--p-space-1);
    margin-bottom: var(--p-space-1);
  }

  @include breakpoint-before($nav-min-window-corrected) {
    font-size: var(--p-font-size-4);
    line-height: var(--p-line-height-2);
  }
}

@mixin usermenu-section-attributes {
  position: relative;
  margin-top: var(--p-space-4);

  &::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--p-space-2));
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--p-surface-neutral);
  }
}