.novel-wrap {
  @apply bg-cover bg-center overflow-hidden relative;
  @apply before:absolute before:inset-0 before:bg-gradient-to-b before:from-white/80 before:to-white/50;
  &::before {
    backdrop-filter: blur(8px);
    :global(.dark) & {
      @apply bg-gradient-to-b from-black/50 to-black/80;
    }
  }
}
.novel-container {
  @apply relative px-4 mx-auto;
}
.novel-info {
  @apply flex pb-5;
  .novel-info-cover {
    @apply w-24 flex-shrink-0 mr-4 self-start md:w-32 lg:w-56 lg:mr-10;
  }
  .nove-info-body {
    @apply w-0 flex-1 flex flex-col justify-between;
    h1 {
      @apply w-full text-xl font-bold md:text-3xl lg:text-4xl text-black;
      :global(.dark) & {
        @apply text-white;
      }
      small {
        @apply text-xs inline-block align-middle px-2 py-0.5 text-white rounded ml-2  bg-blue-600;
      }
    }
    h2 {
      @apply text-sm flex items-center whitespace-nowrap flex-wrap py-2 lg:text-xl;
      a,
      strong {
        @apply flex items-center mr-2 font-bold lg:mr-4;
      }
      svg {
        @apply w-4 h-4 mr-1 md:w-5 md:h-5 lg:w-8 lg:h-8;
      }
    }
    .btns {
      @apply flex flex-wrap gap-5 z-30 fixed bottom-10 left-0 w-full px-5 lg:static lg:px-0;
    }
    .button {
      @apply text-white text-center relative px-4 py-3 rounded-md lg:text-lg select-none bg-gradient-to-r from-blue-600 to-blue-800 transition-all flex flex-col justify-center items-center;
      @apply hover:after:absolute hover:after:inset-0 hover:after:bg-white/5;
      &.button-reading {
        @apply w-0 flex-1 lg:w-auto lg:flex-none lg:max-w-md;
      }
      strong {
        @apply flex uppercase items-center justify-center text-center text-ellipsis overflow-hidden whitespace-nowrap;
        svg {
          @apply w-8 h-8 lg:mr-2;
        }
        span {
          @apply hidden lg:block;
        }
      }
      small {
        @apply block text-xs leading-3 opacity-70 w-full text-ellipsis overflow-hidden whitespace-nowrap;
      }
      :global(.dark) & {
        @apply from-blue-600 to-blue-900;
      }
    }
  }
}
.novel-text {
  @apply text-sm;
  p {
    @apply my-2;
  }
}
.chapter-list {
  @apply grid gap-y-4 lg:grid-cols-2 lg:gap-x-10 xl:grid-cols-3;
  // counter-reset: chapter attr(start);
  li {
    @apply border-b text-sm lg:text-base border-b-gray-100;
    // counter-increment: chapter;
    :global(.dark) & {
      @apply border-b-gray-700;
    }
    a {
      @apply flex w-full h-full py-2 hover:bg-gray-50;
      :global(.dark) & {
        @apply hover:bg-gray-800;
      }
      &:hover {
        strong {
          text-decoration: underline;
        }
      }
    }

    i {
      @apply w-10 mr-1 flex-shrink-0 not-italic text-gray-400;
    }

    strong {
      @apply block font-normal flex-1;
    }
    time {
      @apply text-gray-400 ml-2;
    }
  }
}
.novel-page {
  @apply overflow-visible;
}
.novel-tabs {
  @apply mb-5 sticky top-[57px] backdrop-blur bg-white/60 -mx-4 px-4 scroll-px-4 lg:top-[65px] lg:mx-0 lg:px-0 lg:scroll-px-0;
  :global(.dark) & {
    @apply bg-gray-900/75;
  }
  &.chapter-tabs {
    @apply top-[106px] lg:top-[114px];
  }
}