/**

* Stylesheet for Table Of Contents in Banners displayed by WikidataPageBanner extension.
* All style rules have been applied with a prefix of wrapping .banner-toc, so cloning the original
* toc and styling the clone will have no side-effects
*/

//@import "mediawiki.mixins"; // hide topbanner-toc by default .wpb-topbanner-toc {

  display: none;

}

// style rules to apply only if screen wide enough for a horizontal toc @media screen and ( min-width: 768px ) {

  .wpb-topbanner-toc {
      display: block;
      position: absolute;
      background: rgba(0, 0, 0, .5) none repeat scroll 0% 0%;
      bottom: 0;
      left: 0;
      z-index: 3;
      width: 100%;
  }

  .wpb-banner-toc {
      display: table;
      color: white;
      background: none;
      border: medium none;
      line-height: 1.6em;
      padding: .2em 2em;
      margin: 0;
      width: auto;

      // Suppress numbering of items in TOC
      .tocnumber {
          display: none;
      }

      >div>ul {
          list-style: none;
          margin: 0;
          background: rgba(0, 0, 0, .6) none repeat scroll 0% 0%;
          z-index: 4;
      }

      a, a:visited, a:active {
          display: block;
          color: white;
          font-size: .8em;
          font-weight: bold;
      }

      a:hover {
          color: #BDDDFD;
      }

      // these are actual toc items
      li {
          position: relative;
          padding: 0 .4em;
          margin: 0;
          >ul {
              list-style: none;
              margin: 0;
              background: rgba(0, 0, 0, .6) none repeat scroll 0% 0%;
              z-index: 4;
          }
      }

      // On hovering over a list item, show the list items which are immediate child of this item
      li:hover {
          &>ul>li {
              display: block;
          }
          // make hovered element prominent
          background: rgba(0, 0, 0, .8) none repeat scroll 0% 0%;
      }

      // Prevent display of subheadings in horizontal ToC
      .toclevel-2,
      .toclevel-3,
      .toclevel-4,
      .toclevel-5,
      .toclevel-6 {
          display: none;
          white-space: nowrap;
          .transition( all .5s );
      }

      .toclevel-1 {
          float: left;
          // position immediate child list of level-1 items as vertical drop-downs
          &>ul {
              position: absolute;
              top: 100%;
              left: 0;
          }
      }

      .toclevel-2 {
          // make immediate children of lists of items beyond level-2 open as side lists
          ul {
              position: absolute;
              left: 100%;
              top: 0;
          }
      }

      // Hide TOC title
      #toctitle {
          display: none;
      }
  }

  // hide original toc by default
  .toc, #toc {
      display: none;
  }

}