notes/_sass/navigation.scss

//
// Main nav, breadcrumb, etc...
//

.nav-list {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-list-child-list {
  padding-left: $sp-3;
  list-style: none;

  .nav-list-link {
    color: $nav-child-link-color;
  }

  .nav-list-item {
    position: relative;

    &::before {
      position: absolute;
      margin-top: 0.3em;
      margin-left: -0.8em;
      color: rgba($body-text-color, 0.3);
      content: "- ";
    }

    &.active {
      &::before {
        color: $body-text-color;
      }
    }
  }
}

.nav-list-item {
  @include fs-4;
  margin: 0;

  @include mq(md) {
    @include fs-3;
  }

  .nav-list-child-list {
    display: none;
  }

  &.active {
    .nav-list-child-list {
      display: block;
    }
  }
}

.nav-list-link {
  display: block;
  padding-top: $sp-1;
  padding-bottom: $sp-1;

  &.active {
    font-weight: 600;
    color: $body-heading-color;
    text-decoration: none;
  }
}

// Small screen nav

.site-nav {
  display: none;

  &.nav-open {
    display: block;
  }
  @include mq(md) {
    display: block;
  }
}

.aux-nav {
  align-self: center;

  .aux-nav-list {
    padding: 0;
    margin: 0;
    list-style: none;
    @include fs-2;
  }

  .aux-nav-list-item {
    display: inline-block;
    margin-right: $sp-2;
    @include fs-2;

    &:last-child {
      margin-right: 0;
    }
  }
}

// Breadcrumb nav

.breadcrumb-nav {
  @include mq(md) {
    margin-top: -$sp-4;
  }
}

.breadcrumb-nav-list {
  padding-left: 0;
  margin-bottom: $sp-3;
  list-style: none;
}

.breadcrumb-nav-list-item {
  display: table-cell;
  @include fs-2;

  &::before {
    display: none;
  }

  &::after {
    display: inline-block;
    margin-right: $sp-2;
    margin-left: $sp-2;
    color: $grey-dk-000;
    content: "/";
  }

  &:last-child {
    &::after {
      content: "";
    }
  }
}