@include screen {

.toc {

  @include core-16;
  padding: $gutter-half;

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

  &__close {
    display: none;
  }

  a:link, a:visited {
    text-decoration: none;
    color: $link-colour;
  }

  a:hover {
    text-decoration: underline;
  }

  &__list {

    a:link, a:visited {
      display: block;
      padding: 8px $gutter 8px $gutter-half;
      margin: 0 $gutter-half * -1;
      border-left: 5px solid transparent;

      @include media(tablet) {
        &.toc-link--in-view {
          color: $link-active-colour;
          border-left-color: $link-active-colour;
          background-color: $grey-4;
        }
      }
    }

    // Top level
    > ul > li > a:link {
      @include bold-19;
    }

    @include media(tablet) {
      // Level 3
      li li li {
        a:link, a:visited {
          padding-left: $gutter-half * 2;
        }
      }

      // Level 4
      li li li li {
        a:link, a:visited {
          padding-left: $gutter-half * 4;
        }
      }

      // Level 5
      li li li li li {
        a:link, a:visited {
          padding-left: $gutter-half * 5;
        }
      }

      // Level 6
      li li li li li li {
        a:link, a:visited {
          padding-left: $gutter-half * 6;
        }
      }
    }
  }
}

.toc-show {
  display: none;
}

@include media(tablet) {
  .toc {
    padding: 22px $gutter $gutter-half;
  }

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

@include media(mobile) {
  .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 {
        display: block;
        position: relative;
        z-index: 10;

        padding: $gutter-half $gutter-half 10px;

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

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

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

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

    .toc__list {
      margin-right: $gutter * 1.5;
    }

    .toc__close {
      display: block;
      position: sticky;
      right: 0;
      top: 0;

      float: right;
      width: 20px;
      height: 20px;

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

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

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

      body {
        height: 100%;
        overflow: hidden;
        pointer-events: none;
      }

      .toc-show {
        visibility: hidden;
      }

      .toc {
        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: $white;
        @supports(backdrop-filter: blur(2px)) {
          background: transparentize($white, 0.05);
          backdrop-filter: blur(2px);
        }
      }
    }
  }
}

}

@include print {

.toc {
  display: none;
}

}