.list-navigator {
  $component-name: ".list-navigator";
  $list-navigator-padding-bottom: -2;

  margin-bottom: spacing(-1);
  padding-bottom: spacing($list-navigator-padding-bottom);
  border-bottom: $width-border solid color("border");

  display: grid;
  align-items: start;
  grid-column-gap: spacing(-1);
  grid-template-areas:
    "list-name"
    "header"
    "subtitle"
    "contextlink"
  ;

  &__list-name {
    grid-area: list-name;
    justify-self: start;
    @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
    color: color("foreground-theme");
    white-space: nowrap;

    @include icon-style {
      @include set-icon("previous");
      margin-right: spacing(-5);
      transform-origin: right center;
      transition: transform $animation-timing-link-icon-translate $easing-in-out;
      display: inline-block;
    }

    &:hover {
      color: color("foreground-theme-hover");

      &::before {
        transform: translateX(spacing(-5, $times: -1));
      }
    }

    &:active {
      color: color("foreground-theme");
    }

    &:focus-visible {
      outline: $outline-width solid color("utility-focus");
      outline-offset: $outline-offset;
    }
  }

  &__header {
    grid-area: header;
    @include set-font($typography-h1-fontsize, "single", $weight: "light");
    margin: 0; //removes default h1 margin

    #{$component-name}--bold & {
      font-weight: $font-weight-bold;
    }
  }

  &__subtitle {
    grid-area: subtitle;
    @include set-font(1, "single", $weight: "light");
    margin-top: spacing(-5);
    margin-bottom: 0;
  }

  &__context-link {
    grid-area: contextlink;
    margin-top: spacing(-5);
    justify-self: start;
  }

  &--top-level {
    margin-bottom: 0;
  }

  &--no-border {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: spacing($typography-margin-bottom-h1);

    & + h2 {
      margin-top: 0;
    }
  }

  &--with-toggle {
    grid-template-areas:
      "list-name toggle"
      "header header"
      "subtitle subtitle"
      "contextlink contextlink"
    ;
    grid-template-columns: 1fr auto;

    #{$component-name}__toggle {
      grid-area: toggle;
      display: flex;
      align-items: center;
      @include set-font(-1, "single");
      white-space: nowrap;

      @include icon-style {
        flex: 0 0 auto;
        order: 10; //move the icon the right
        margin-left: spacing(-4);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        $size: calc(#{line-height("single", $include-calc: false)} + #{$width-border * 2});
        width: $size;
        height: $size;
        border-radius: 50%;
        margin-top: $width-border * -1;
        margin-bottom: $width-border * -1;
        @include set-colors("interactive");
        box-shadow: $shadow-style-front color("shadow");
      }

      &:hover {
        color: color("foreground-hover");

        &::before {
          background-color: color("interactive-hover");
        }
      }

      &:active {
        &::before {
          box-shadow: $shadow-style-back color("shadow");
        }
      }

      &:focus-visible {
        outline: $outline-width solid color("utility-focus");
        outline-offset: $outline-offset;
      }

      &[aria-pressed="true"] {
        &::before {
          @include set-colors("theme");
          font-weight: $font-weight-icon-solid;
        }
      }
    }

    @include breakpoint("wide") {
      grid-template-areas:
        "list-name list-name"
        "header toggle"
        "subtitle subtitle"
        "contextlink contextlink"
      ;

      #{$component-name}__toggle {
        @include set-font(0, "single");

        &::before {
          @include set-font(1, "single");
          $size: line-height("single", $fontsize-relative: ("current": 1, "target": $typography-h1-fontsize));
          width: $size;
          height: $size;
          margin-left: spacing(-3);
        }
      }
    }
  }

  &--with-switch {
    grid-template-areas:
      "list-name"
      "header"
      "subtitle"
      "contextlink"
      "switch"
    ;

    @include breakpoint("medium") {
      grid-template-areas:
        "list-name list-name"
        "header header"
        "subtitle subtitle"
        "contextlink switch"
      ;
      grid-template-columns: 1fr auto;
    }

    @include breakpoint("wide") {
      grid-template-areas:
        "list-name switch"
        "header switch"
        "subtitle switch"
        "contextlink switch"
      ;
    }

    .switch {
      margin-top: spacing($list-navigator-padding-bottom);
      grid-area: switch;
      justify-self: start;

      @include breakpoint("medium") {
        align-self: end;
        grid-column: 1 / 3; //if there is no contextlink make it stretch two columns
      }

      @include breakpoint("wide") {
        grid-column: auto;
      }
    }

    .list-navigator__context-link {
      align-self: end;
      
      & + .switch {
        grid-column: auto;
      }
    }
  }
}