button.svelte-qjj0op {
    font-size: var(--vats-text-ms);
    color: var(--vats-text);
    background: transparent;
    cursor: pointer;
    border: 0;
  }

  :root {
    --sidebar-book-shadow: drop-shadow(1px 3px 4px var(--vats-text3));
    --sidebar-book-currentshadow: drop-shadow(1px 3px 4px hsl(from var(--vats-coloredtext) h s l / 20%));
    --sidebar-book-hovershadow: drop-shadow(0 0px 4px var(--vats-coloredtext));
  }

  [data-theme='dark'] {
    --sidebar-book-shadow: drop-shadow(1px 1px 3px hsl(from var(--vats-text2) h s l / 30%));
    --sidebar-book-currentshadow: drop-shadow(2px 2px 5px hsl(from var(--vats-text2) h s l / 30%));
    --sidebar-book-hovershadow: drop-shadow(0 0px 8px var(--vats-text));
  }

  .side-bar.svelte-qjj0op {
    flex: none;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--vats-sidebar-background);
    width: auto;
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid var(--vats-topbar-bordercolor);
    padding: 1.5rem 0 0;

    & > div:where(.svelte-qjj0op) {
      width: calc(100% - 0.25rem);
      height: 100%;
      overflow: hidden;
      grid-template-columns: auto 1fr;
      display: grid;
    }
  }

  ul.svelte-qjj0op {
    list-style: none;
  }

  /*noinspection CssNonIntegerLengthInPixels*/
  .sidebar-icons.svelte-qjj0op {
    width: fit-content;
    height: fit-content;
    overflow: auto;
    text-align: center;
    border-right: 0.5px solid var(--vats-topbar-bordercolor);
    padding: 0;

    li:where(.svelte-qjj0op) {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1rem 2rem 2rem 1rem;
      gap: 0;
      text-transform: uppercase;
      -webkit-filter: var(--sidebar-book-shadow);
      filter: var(--sidebar-book-shadow);

      .icon:where(.svelte-qjj0op) {
        display: block;
        max-height: var(--vats-bookicon-size);
        max-width: var(--vats-bookicon-size);
        width: var(--vats-bookicon-size);
      }

      .icon:where(.svelte-qjj0op):hover {
        -webkit-filter: var(--sidebar-book-hovershadow);
        filter: var(--sidebar-book-hovershadow);
      }

      &.current {
        border-right: 1px solid var(--vats-coloredtext);

        .icon:where(.svelte-qjj0op) {
          -webkit-filter: var(--sidebar-book-currentshadow);
          filter: var(--sidebar-book-currentshadow);
        }
      }
    }
  }

  .sidebar-toc.svelte-qjj0op {
    overflow-y: auto;
    padding-left: 2rem;
    padding-top: 0.5rem;
    font: 400 var(--vats-text-m) var(--vats-font);
    color: var(--vats-text2);

    .title:where(.svelte-qjj0op) {
      color: var(--vats-coloredtext);
      font-size: var(--vats-text-l);
      font-weight: 500;
    }

    & > ul:where(.svelte-qjj0op) {
      line-height: 100%;
      padding-top: 0.5rem;

      & > li:where(.svelte-qjj0op) {
        & > span:where(.svelte-qjj0op) {
          padding-top: 2rem;
          text-transform: uppercase;
          font-size: var(--vats-text-ms);
          color: var(--vats-text2);
          font-weight: 500;
        }

        & > ul:where(.svelte-qjj0op) {
          padding-top: 0.5rem;
        }

        & > ul:where(.svelte-qjj0op) > li:where(.svelte-qjj0op) {
          font-size: var(--vats-text-ms);
          padding-left: 1rem;
        }
      }

      hr:where(.svelte-qjj0op) {
        width: 50%;
        margin: 1.5rem 0 1.5rem 0;
      }
    }

    button:where(.svelte-qjj0op) {
      width: 100%;
      color: inherit;
      text-underline-offset: 0.35rem;

      & > span:where(.svelte-qjj0op) {
        display: block;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
      }

      &:hover {
        text-decoration: underline;
        text-decoration-thickness: 0.1rem;
      }

      &.current {
        font-weight: 500;
        color: var(--vats-coloredtext);

        &:hover {
          text-decoration: none;
        }
      }
    }
  }