body{
    transition: transform .5s;
}
body.move-aside{
    transform: translateX(var(--toc-width));
    margin-left:0;
}
.nav-toc {
    /* --toc-width: 37.5rem; */
    direction: rtl;
    height: 100%;
    min-width: var(--toc-width);
    max-width: var(--toc-width);
    transform: translateX(calc(var(--toc-width)*-1));
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: var(--color-paper-background);
    overflow-x:hidden;
    transition: transform .5s;
    scrollbar-gutter: stable;
  }
  .nav-toc:is(.show){
      /* transform: translateX(0); */
  }
  .toc-header,
  .toc-body{
    direction: ltr;
    
  }
  /* -------- TOC Scrollbar ------------------------------------------------ */
  .nav-toc::-webkit-scrollbar {
    width: 15px;
}
.nav-toc::-webkit-scrollbar-track {
    background: var(--color6);
    
    border: 1px solid var(--color1);
  }
  .nav-toc::-webkit-scrollbar-thumb {
    background: var(--color2);
    border: 1px solid var(--color1);
  }
.nav-toc::-webkit-scrollbar-thumb:hover {
    background: var(--color1);
}
.nav-toc::-webkit-scrollbar-button{
    background-color: var(--color5);
    border: 1px solid var(--color1);
    color:  var(--color1);
}
.nav-toc::-webkit-scrollbar-button:single-button:vertical:increment{
    content: "v";
}

.nav-toc::-webkit-scrollbar-button:single-button:vertical:increment::after{
    content: "v";
}


/* ------------------------------------------------------------------------- */
.toc-header{
    background-color: var(--color-paper-background);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid  var(--color-gray2-light);
}
.toc-item-song a,
.toc-item-chapter{
    color: var(--color0);    
}
.toc-item-chapter{
    padding: .25em .5em;
    font-weight: 600;
    text-decoration: none;
    text-align: left;
}

.toc-item-song a{
    padding-left:0.5rem;
    margin-top: .125rem;
    margin-left: 1.5rem;
    text-decoration: none;
    font-size: 1rem;
}

.toc-item-chapter:hover{
    background-color: var(--color3);
    color: var(--color6);
}

.toc-body a {
    text-decoration: none;
}

.toc-song-link:hover{
    color: black;
    background-color: var(--color6);
    }

.toc-song-link.active{
    background-color: var(--color1);
    color:var(--color6);
}

  .nav-toc .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
.btn-toggle::before {
    content:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 8.4666665 8.4666669' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill:%23000000;fill-opacity:1;stroke:none;stroke-width:0.0199962;stroke-opacity:1' d='m 8.3206862,4.5342899 c -2.699004,2.86318 -6.151084,3.8722 -7.50421397,2.44536 -1.08953209,-1.1488961 -1.08772567,-4.3406869 0,-5.48768 1.38149297,-1.45673996 4.65019497,-0.37475 7.50421097,2.44532 0,0 0.145989,0.15299 0.145983,0.29852 -4e-6,0.14552 -0.14598,0.29848 -0.14598,0.29848 z'/%3E%3C/svg%3E");
    line-height: 0;
    transform: rotate(0deg);
    transition: transform .35s ease;
    margin-right: .5em;
    /* https://codepen.io/sosuke/pen/Pjoqqp */
    filter: var(--filter1);
}
.btn-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}
.close-toc{ 
    /* is this really in use ?! */
    color: currentColor;
    text-decoration: none;
}
.close-x{
    filter: var(--filter2);
}
#search-toc > input{
    background-color: var(--color-paper-background);
    color: var(--color0);
}