$item-font-size: rem(16px);
$item-font-size-small: rem(14px);
$item-line-height-small: rem(32px);
$text-line-height: rem(20px);
$nav-variables: (
  mobile-spacing: rem(10px),
  desktop-spacing: rem(6px),
  mobile-height: rem(40px),
  desktop-height: rem(32px),
  icon-size: rem(20px),
  item-line-height: rem(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: $item-font-size;
  font-weight: 400;
  line-height: nav(item-line-height);
  display: flex;
  flex-grow: 1;
  align-items: center;
  max-width: 100%;
  padding: 0 spacing();
  color: color('ink');
  text-decoration: none;
  text-align: left;
  &:hover {
    color: color('black');
  }
  &:hover,
  &:focus {
    text-decoration: none;
    .Icon {
      @include recolor-icon(color('ink', 'lighter'), color('white'));
    }
  }
  &:focus {
    color: color('indigo');
    .Icon {
      @include recolor-icon(color('indigo'), color('white'));
    }
  }
  @include breakpoint-after(nav-min-window-corrected()) {
    font-size: $item-font-size-small;
    font-weight: 500;
    line-height: $item-line-height-small;
  }
  &::-moz-focus-inner {
    border: 0;
  }
}

@mixin nav-item-icon-attributes {
  @include recolor-icon(color('ink', 'lightest'), color('white'));
  flex-shrink: 0;
  align-self: flex-start;
  width: nav(icon-size);
  height: nav(icon-size);
  margin-top: nav(mobile-spacing);
  margin-right: spacing(loose);
  margin-bottom: nav(mobile-spacing);
  @include breakpoint-after(nav-min-window-corrected()) {
    margin-top: nav(desktop-spacing);
    margin-right: spacing();
    margin-bottom: nav(desktop-spacing);
  }
  .Item-selected &,
  .Item-selected:hover &,
  .subNavigationActive &,
  .subNavigationActive:hover &,
  .subNavigationActive:focus & {
    @include recolor-icon(color('indigo'), color('white'));
  } // 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-listitem-attributes {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  .RollupSection &,
  .SecondaryNavigation & {
    opacity: 0;
    animation: fade-in duration(slowest) 1 forwards;
  }
  @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: nav(mobile-spacing);
  margin-bottom: nav(mobile-spacing);
  line-height: $text-line-height;
  @include breakpoint-after(nav-min-window-corrected()) {
    margin-top: nav(desktop-spacing);
    margin-bottom: nav(desktop-spacing);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@mixin usermenu-section-attributes {
  position: relative;
  margin-top: spacing();
  &::before {
    content: '';
    position: absolute;
    top: spacing(tight) * -1;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    background-color: color('sky');
  }
}