.nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__list-item {
  display: block;

  &--x {
    display: inline-block;
    vertical-align: middle;
  }

  &--x.nav__list-item--x-space {
    & + & {
      margin-left: 1em;
    }
  }
}

// Only go into horizontal nav at specific breakpoints
@mixin nav--list-item--x($breakpoint, $modifier) {
  @media (min-width: $breakpoint) {
    .nav__list-item--x-#{$modifier} {
      display: inline-block;
    }

    .nav__list-item--x-#{$modifier}.nav__list-item--x-space {
      & + & {
        margin-left: 1em;
      }
    }
  }
}

@include nav--list-item--x($breakpoint-small, small);
@include nav--list-item--x($breakpoint-medium, medium);
@include nav--list-item--x($breakpoint-large, large);
@include nav--list-item--x($breakpoint-xlarge, xlarge);
@include nav--list-item--x($breakpoint-full, full);
// make nav link look like a button only up to certain breakpoint
@mixin nav--btn--max-($breakpoint, $modifier) {
  @media (max-width: $breakpoint) {
    .nav__btn--max-#{$modifier} {
      display: block;
      border: 1px solid $colour-grey-light;
      padding: 5px;
      margin-bottom: 10px;

      &:hover {
        border-color: $colour-orange;
      }
    }
  }
}

// can add more breakpoints as needed
@include nav--btn--max-($breakpoint-large, large);

// -------- nav variants -----------
// align right
.nav--right {
  text-align: right;
}

//footer navs
.nav--legal {
  margin-bottom: 2em;
}

//showroom navigation
//in shame.scss... 😔

//chrome nav
.nav--chrome {
  background-color: #fff;
  border: 1px solid $colour-grey-light;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
}

.nav__group-heading {
  text-transform: uppercase;
  color: $colour-blue;
  font-weight: $font-weight-semibold;
  font-size: 0.75em;
  padding: 0.5em 1.6rem;
}

.nav__link--chrome {
  display: block;
  text-align: left;
  padding: 0.8rem 1.6rem;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;

  &,
  &:hover,
  &:active,
  &:visited {
    color: $color-font-default;
    text-decoration: none;
  }

  .nav__list-item:first-of-type & {
    border-top: 0;
  }

  .nav__list-item:last-of-type & {
    border-bottom: 0;
  }

  &:hover,
  &:active,
  &.is-selected {
    background-color: $colour-grey-xlight;
    border-color: $colour-grey-light;

    &.nav__link--lined {
      border-top-color: transparent;
    }
  }

  &.is-disabled {
    cursor: default;
    font-style: italic;
    color: $colour-grey-mid;
    border: 0;
    background-color: transparent;
  }
}

.nav__link--lined {
  border-bottom: 1px solid $colour-grey-light;
}

.nav__list--chrome-scroll {
  max-height: 272px;
  overflow-y: scroll;
}

$nav-chrome-pointer-size: 8px;

.nav--chrome-pointer {
  margin-top: $nav-chrome-pointer-size * 2;

  &::before {
    content: "";
    width: 0;
    height: 0;
    border: $nav-chrome-pointer-size solid transparent;
    border-bottom-color: $colour-blue;
    position: absolute;
    left: 50%;
    margin-left: -$nav-chrome-pointer-size;
    top: 0;
  }

  .on-right-edge &::before {
    left: auto;
    right: $nav-chrome-pointer-size * 2;
  }
}

.nav__link--chrome-pointer {
  text-align: center;
  font-size: 0.8em;
  font-weight: $font-weight-semibold;
  padding: 0.2em 1.6rem;
}