fe/components/library/LibrayList/index.module.scss

.list {
  @apply grid grid-cols-1 gap-4 my-5 lg:grid-cols-2;
  .item {
    @apply flex flex-1 rounded-[8px] border-[0.5px] border-black border-opacity-[0.1] bg-white p-3 shadow-lg lg:p-4 relative;
    :global(.dark) & {
      //   @apply bg-[#131415];
      @apply bg-zinc-900;
    }
    .cover {
      @apply w-20 mr-2.5 lg:w-28 lg:mr-5;
    }
    .body {
      @apply w-0 flex-1 flex flex-col pr-8;
    }
    .title {
      @apply h-0 overflow-hidden flex-1 line-clamp-2 text-base font-extrabold lg:text-lg;
    }
    .progressTitle {
      @apply text-xs opacity-80 lg:text-base;
    }
    .progressbar {
      @apply w-full h-1 bg-neutral-200 mt-1 rounded-full;
      :global(.dark) & {
        @apply bg-neutral-700;
      }
      div {
        @apply h-full bg-blue-500 rounded-full;
      }
    }
    .btns {
      @apply mt-2.5 lg:mt-4;
    }
    .btn {
      @apply inline-block text-xs border border-blue-700 px-3 py-2 rounded hover:bg-blue-700/10 lg:text-base;
    }
    .close {
      @apply absolute right-0 top-0 p-2;
      svg {
        @apply fill-current w-6 h-6 opacity-70;
      }
      &:hover {
        svg {
          @apply fill-blue-700;
        }
      }
    }
  }
}