.chapter-page {
  @apply w-full flex-1 py-5 px-5 bg-white;
  @apply lg:w-0 lg:max-w-3xl lg:px-10 lg:border-x lg:border-x-gray-200;
  :global(.dark) & {
    @apply bg-gray-800 border-x-gray-700;
  }
}
.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-[1em] leading-[1.5];
  }
}
.toolbar {
  color-scheme: dark;

  @apply fixed bottom-0 left-0 w-full bg-gray-900 z-30 text-gray-400 shadow-lg shadow-white; // hidden;
  @apply lg:bg-gray-800 lg:right-0 lg:w-auto lg:left-auto lg:h-full lg:flex lg:items-center lg:justify-center lg:shadow-none;
  .toolbar-items {
    @apply flex lg:flex-col lg:w-full;
  }
  .toolbar-item {
    @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 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-24 px-5 shadow-xl shadow-white/10;
  @apply lg:w-96 lg:max-h-[calc(100vh-65px)] lg:sticky lg:top-[65px] lg:pb-4 lg:px-0;
  .toolbar-display-title {
    @apply flex text-base mb-2 items-center justify-between;
    .btn-close {
      @apply w-6 h-6;
      .icon-close {
        @apply w-6 h-6;
      }
    }
  }
  .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 flex-1 flex-shrink-0;
    @apply lg:max-h-full lg:px-5;
    .toolbar-scrollbar {
      @apply -mr-5 pr-5;
    }
    ol {
      // @apply flex-1 h-0 overflow-y-auto;
      // @apply -mr-5 pr-5;
      li {
        a {
          @apply flex w-full h-full py-1;
          &:hover {
            strong {
              text-decoration: underline;
            }
          }
        }
        i {
          @apply w-11 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 text-gray-100;
        }
        small {
          @apply text-slate-400 ml-2;
        }
        &.current {
          a strong {
            @apply text-blue-300 font-extrabold;
          }
        }
      }
    }
  }
}

.slider {
  @apply h-1 w-full inline-block relative cursor-pointer touch-none text-blue-300;

  &:hover {
    @apply opacity-100;
  }

  &.disabled {
    @apply pointer-events-none cursor-default opacity-50 text-gray-600;
  }

  & .rail {
    @apply block absolute w-full h-1 rounded bg-current opacity-40;
  }

  & .track {
    @apply block absolute h-1 rounded bg-current;
  }

  & .thumb {
    @apply absolute w-5 h-5 -ml-2.5 -mt-2.5 top-1/2 box-border rounded-full outline-0 border-0 border-current bg-white;

    &:hover,
    &.focusVisible {
      box-shadow: 0 0 0 0.25rem rgba(147, 196, 253, 0.15);
      // @apply shadow-blue-300 shadow-md;
    }

    &.active {
      box-shadow: 0 0 0 0.25rem rgba(147, 196, 253, 0.3);
      // @apply shadow-blue-300 shadow-md;
    }
  }

  & .mark {
    @apply absolute w-0.5 h-0.5 rounded bg-current top-1/2 opacity-70 -translate-x-1/2 -translate-y-1/2;
  }

  & .markActive {
    @apply bg-blue-900;
  }

  & .valueLabel {
    @apply text-sm block relative -top-6 text-center -translate-x-1/2;
  }

  & .markLabel {
    @apply text-xs absolute top-3 -translate-x-1/2;
  }
}