@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;
    }

    a:hover {
      text-decoration: underline;
    }

    &__list {

      a:link, a:visited {
        display: block;
        padding: 8px 0;
      }

      > ul > li > a {
        @include bold-16;
      }

      // Second Level
      > ul > li > ul {
        margin-bottom: 20px;
      }

      // Third Level & Below
      li li li {
        margin-left: $gutter-half;
      }
    }
  }

  .toc-show {
    display: none;
  }

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

  @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__close {
        display: block;
        position: fixed;
        right: $gutter-half;
        top: $gutter-half;

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

        text-indent: -10000px;

        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;
        }

        .toc-show {
          visibility: hidden;
        }

        .toc {
          display: block;
          padding-right: $gutter * 2;
          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);
          }
        }
      }

      // Allow space header on mobile
      .technical-documentation {
        $offset: 20px + $gutter-half + 10px + 1px;

        h1, h2, h3, h4, h5, h6 {
          // Line height + padding + border of .toc-show

          padding-top: $gutter-half + $offset;
          margin-top: -$offset;
        }

        h1 {
          margin-top: ($gutter * 2) - $offset;
        }

        h1:first-child {
          margin-top: -$offset;
        }
      }
    }
  }
}

@include print {
  .toc {
    display: none;
  }
}
