.chapter-page {
  @apply font-sans w-full flex-1 py-5 px-5 border-x border-x-gray-200 bg-white;
  @apply lg:w-0 lg:max-w-3xl lg:px-10;
  :global(.dark) & {
    @apply bg-gray-800 border-x-gray-700;
  }
  &.serif {
    @apply font-serif;
  }
}
.chapter-header {
  @apply flex px-5 items-center relative;
  @apply lg:sticky;
  &.open {
    @apply sticky;
  }
}
.chapter-main {
  @apply flex justify-center bg-gray-100 lg:pr-12 lg:min-h-[calc(100vh-65px)];
  :global(.dark) & {
    @apply bg-gray-900;
  }
}
.novel {
  @apply w-full;
  header {
    @apply mb-5;
  }
  h1 {
    @apply text-3xl font-bold;
  }
  h2 {
    @apply text-2xl font-bold;
  }
  p {
    @apply my-3;
  }
}
.toolbar {
  color-scheme: dark;

  @apply fixed bottom-0 left-0 w-full bg-gray-800 z-20 text-gray-400; // hidden;
  @apply lg:right-0 lg:w-auto lg:left-auto lg:h-full lg:flex lg:items-center lg:justify-center;
  .toolbar-items {
    @apply flex lg:flex-col lg:w-full;
  }
  .toolbar-item {
    // position: relative;
    // display: flex;
    // height: 100%;
    // flex-basis: 100%;
    // cursor: pointer;
    // flex-direction: column;
    // align-items: center;
    // justify-content: center;
    // gap: 0.25rem;
    // border-color: currentColor;

    @apply flex-1 flex items-center justify-center py-5 lg:border-t lg:border-t-gray-900 lg:p-4 lg:hover:bg-gray-700 lg:last:border-b lg:last:border-b-gray-900;
    svg {
      @apply w-5 h-5 lg:w-4 lg:h-4;
    }
    &.toolbar-item-current {
      @apply lg:bg-blue-700 lg:text-white;
    }
  }
}
.toolbar-display {
  color-scheme: dark;

  @apply fixed bottom-0 left-0 w-full bg-gray-900 text-gray-100 z-30 pt-4 pb-16 px-5;
  @apply lg:w-96 lg:max-h-[calc(100vh-65px)] lg:sticky lg:top-[65ox] lg:pb-4 lg:px-0;
  .toolbar-display-title {
    @apply text-base mb-2;
  }
  .toolbar-display-label {
    @apply text-sm mb-2 mt-5;
  }
  // :global(.btn-group){
  //   @apply w-full;
  // }
  .toolbar-inner {
    @apply max-h-[70vh] flex flex-col overflow-hidden flex-1 flex-shrink-0;
    @apply lg:max-h-full lg:px-5;
    ol {
      // @apply flex-1 h-0 overflow-y-auto;
      // @apply lg:-mr-5 lg:pr-5;
      li {
        a {
          @apply flex w-full h-full py-1;
          &:hover {
            strong {
              text-decoration: underline;
            }
          }
        }
        i {
          @apply w-9 mr-1 flex-shrink-0 not-italic text-slate-400;
        }
        strong {
          @apply block font-normal flex-1 whitespace-nowrap w-0 overflow-hidden text-ellipsis;
        }
        small {
          @apply text-slate-400 ml-2;
        }
      }
    }
  }
}