fe/styles/chapter.module.scss

.chapter-page {
  @apply w-full lg:w-0 lg:max-w-3xl flex-1 py-5 px-10 border-x border-x-gray-200 bg-white;
  :global(.dark) & {
    @apply bg-gray-800 border-x-gray-700;
  }
}
.chapter-header {
  @apply flex px-5 items-center relative;
  @apply lg:sticky;
}
.chapter-main {
  @apply flex justify-center bg-gray-100;
  :global(.dark) & {
    @apply bg-gray-900;
  }
}
.novel {
  @apply w-full;
  header {
    @apply mb-5;
  }
  h1 {
    @apply text-2xl font-bold;
  }
  p {
    @apply my-3;
  }
}
.toolbar {
  @apply fixed bottom-0 left-0 w-full bg-gray-800 z-30 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-display {
  @apply fixed bottom-0 left-0 w-full bg-gray-900 z-40 pt-4 pb-5 px-5 hidden;
  @apply lg:relative lg:w-96;
  .toolbar-display-title {
    @apply text-base mb-2;
  }
  .toolbar-display-label {
    @apply text-sm mb-2 mt-5;
  }
  // :global(.btn-group){
  //   @apply w-full;
  // }
}