@include govuk-media-query($media-type: screen) {
.toc {
  @include govuk-font($size: 16);
  padding: govuk-spacing(3);

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  &__close {
    display: none;
  }

  &__list {
    li {
      a {
        @include govuk-link-decoration;
        @include govuk-link-style-no-visited-state;
        @include govuk-link-style-no-underline;
      }

      a:link, a:visited {
        display: block;
        position: relative;
        padding: 8px govuk-spacing(6) 8px govuk-spacing(2);
        margin: 0 -1 * govuk-spacing(3);
        border-left: 5px solid transparent;

        @include govuk-media-query(tablet) {
          &.toc-link--in-view  {
            color: $govuk-link-hover-colour;
            border-left-color: $govuk-link-hover-colour;
            background-color: govuk-colour("light-grey");
          }
        }
      }

      a:hover {
        @include govuk-link-hover-decoration;
      }

      a:focus {
        text-decoration: none;

        span {
          @include govuk-focused-text;
        }
      }
    }

    // Top level
    > ul > li > a:link {
      @include govuk-font($size: 19, $weight: bold);
    }

    @include govuk-media-query(tablet) {
      // Level 3
      li li li {
        a:link, a:visited {
          padding-left: govuk-spacing(6);
        }
      }

      // Level 4
      li li li li {
        a:link, a:visited {
          padding-left: govuk-spacing(7);
        }
      }

      // Level 5
      li li li li li {
        a:link, a:visited {
          padding-left: govuk-spacing(8);
        }
      }

      // Level 6
      li li li li li li {
        a:link, a:visited {
          padding-left: govuk-spacing(9);
        }
      }
    }
  }
}

.toc-show {
  display: none;
}

@include govuk-media-query(tablet) {
  .toc {
    padding: govuk-spacing(5) govuk-spacing(6);
  }

  // Prevent the fixedsticky spacer from appearing if the browser is resized
  // from mobile to desktop.
  .fixedsticky-on + .fixedsticky-dummy {
    display: none !important;
  }
}

@include govuk-media-query($until: tablet) {
  .js {
    .toc {
      display: none;

      // Hide third level nav and below on mobile
      li li li {
        display: none;
      }
    }

    .toc-show {
      display: block;
      position: sticky;
      top: 0;
      box-sizing: border-box;
      width: 100%;
      z-index: 10;

      &__label {
        @include govuk-font($size: 16);
        display: block;
        position: relative;
        z-index: 10;
        width: 100%;
        padding: govuk-spacing(3) govuk-spacing(3) 10px;

        background: govuk-colour("light-grey");
        @supports(backdrop-filter: blur(2px)) {
          background: transparentize(govuk-colour("light-grey"), 0.05);
          backdrop-filter: blur(2px);
        }
        border: 0;
        border-bottom: 1px solid govuk-colour("mid-grey");
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
        color:  $govuk-text-colour;
        text-decoration: none;
        text-align: left;

        &:focus {
          @include govuk-focused-text;
        }
      }

      &__icon {
        width: 20px;
        height: 20px;
        float: right;

        background-image: url('/images/govuk-icn-numbered-list.png');
        background-repeat: no-repeat;
        background-position: left center;

        @include govuk-device-pixel-ratio {
          background-image: url('/images/govuk-icn-numbered-list@2x.png');
          background-size: 20px 20px;
        }
      }
    }

    .toc__list {
      margin-right: govuk-spacing(7);
      &.search-results-open {
        display: none;
      }
    }

    .toc__close {
      display: block;
      position: sticky;
      right: 0;
      top: 0;
      border: 0;
      float: right;
      width: 20px;
      height: 20px;
      cursor: pointer;

      background-image: url('/images/govuk-icn-close.png');
      background-repeat: no-repeat;
      background-position: left center;

      @include govuk-device-pixel-ratio {
        background-image: url('/images/govuk-icn-close@2x.png');
        background-size: 20px 20px;
      }

      &:focus {
        background-color: $govuk-focus-colour;
        outline: $govuk-focus-width solid transparent;
        box-shadow: inset 0 0 0 1px $govuk-focus-colour;
      }

      &:focus:not(:active):not(:hover) {
        border-color: $govuk-focus-colour;
        color: $govuk-focus-text-colour;
        background-color: $govuk-focus-colour;
        box-shadow: 0 2px 0 $govuk-focus-text-colour;
      }
    }

    /* Applied to <html> */
    &.toc-open {
      overflow: hidden;

      body {
        height: 100%;
        overflow: hidden;
        pointer-events: none;
        // set visibility hidden on the body when TOC is open
        // this is a hack to prevent tabbing to out-of-view elements when the TOC is active
        // it's preferable to keyboard trapping... probably.
        visibility: hidden;
      }

      .toc-show {
        visibility: hidden;
      }

      .toc {
        visibility: visible;
        display: block;
        pointer-events: auto;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10;

        overflow: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;

        background: govuk-colour("white");
        @supports(backdrop-filter: blur(2px)) {
          background: transparentize(govuk-colour("white"), 0.05);
          backdrop-filter: blur(2px);
        }
      }
    }
  }
}

}

@include govuk-media-query($media-type: print) {

.toc {
  display: none;
}

}