@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --radius: 0.5rem;
  }

  .hide-scrollbar::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    border-radius: 0px;
  }

  .hide-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .hide-scrollbar::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 0px;
  }

  .hide-scrollbar::-webkit-scrollbar-thumb:hover {
    background: transparent;
  }
}

@layer components {
  .form-btn {
    @apply bg-primary text-dark-100 hover:bg-primary inline-flex min-h-14 w-full items-center justify-center rounded-md px-6 py-2 font-bold text-base !important;
  }

  .form-input {
    @apply w-full min-h-14 border-none text-base font-bold placeholder:font-normal text-white placeholder:text-light-100 focus-visible:ring-0 focus-visible:shadow-none bg-dark-300 !important;
  }

  /* Book Card */
  .book-title {
    @apply mt-2 line-clamp-1 text-base font-semibold text-white xs:text-xl;
  }

  .book-genre {
    @apply mt-1 line-clamp-1 text-sm italic text-light-100 xs:text-base;
  }

  .book-loaned {
    @apply flex flex-row items-center gap-1 max-xs:justify-center;
  }

  .book-btn {
    @apply bg-dark-600 mt-3 min-h-14 w-full font-bebas-neue text-base text-primary;
  }

  /* Borrowed Book */
  .borrowed-book {
    @apply gradient-vertical p-5 rounded-2xl xs:w-min w-full relative;
  }

  .borrowed-book_cover {
    @apply py-4 lg:px-16 px-10 flex justify-center items-center w-full rounded-lg;
  }

  /* Book Cover */
  .book-cover_extra_small {
    @apply w-[28.95px] h-10;
  }

  .book-cover_small {
    @apply w-[55px] h-[76px];
  }

  .book-cover_medium {
    @apply w-[144px] h-[199px];
  }

  .book-cover_regular {
    @apply xs:w-[174px] w-[114px] xs:h-[239px] h-[169px];
  }

  .book-cover_wide {
    @apply xs:w-[296px] w-[256px] xs:h-[404px] h-[354px];
  }

  /* Book List */
  .book-list {
    @apply mt-10 flex flex-wrap gap-5 max-xs:justify-between xs:gap-10;
  }

  /* Book Overview */
  .book-overview {
    @apply flex flex-col-reverse items-center gap-12 sm:gap-32 xl:flex-row xl:gap-8;
  }

  .book-overview h1 {
    @apply text-5xl font-semibold text-white md:text-7xl;
  }

  .book-info {
    @apply mt-7 flex flex-row flex-wrap gap-4 text-xl text-light-100;
  }

  .book-copies {
    @apply flex flex-row flex-wrap gap-4 mt-1;
  }

  .book-copies p {
    @apply text-xl text-light-100;
  }

  .book-copies p span {
    @apply ml-2 font-semibold text-primary;
  }

  .book-description {
    @apply mt-2 text-justify text-xl text-light-100;
  }

  .book-overview_btn {
    @apply mt-4 min-h-14 w-fit bg-primary text-dark-100 hover:bg-primary/90 max-md:w-full !important;
  }

  /* File Upload */
  .upload-btn {
    @apply flex min-h-14 w-full items-center justify-center gap-1.5 rounded-md;
  }

  .upload-filename {
    @apply mt-1 text-center text-xs;
  }

  .progress {
    @apply rounded-full bg-green-800 p-0.5 text-center font-bebas-neue text-[8px] font-bold leading-none text-light-100;
  }

  /* Search */
  .search {
    @apply relative mt-10 flex min-h-14 w-full items-center rounded-xl bg-dark-300 px-4;
  }

  .search-input {
    @apply w-full border-none font-bold placeholder:font-normal text-white placeholder:text-light-100 focus-visible:ring-0 focus-visible:shadow-none !important;
  }

  /* Book Receipt */
  .book-receipt_admin-btn {
    @apply bg-light-300 rounded-md text-primary-admin font-semibold hover:bg-light-300/80 !important;
  }

  /* Book Ticket */
  #book-ticket {
    @apply relative mt-10 hidden w-[544px] overflow-hidden bg-dark-300 py-8;
  }

  #book-ticket #book-details div {
    @apply space-y-1 rounded-md border border-light-100/10 p-3;
  }

  #book-ticket #book-details div p:first-child {
    @apply text-xs text-light-700;
  }

  #book-ticket #book-details div p:last-child {
    @apply text-sm font-bold text-white;
  }

  #book-ticket #book-divider div:first-child {
    @apply absolute -left-3.5 top-1/2 size-7 -translate-y-1/2 rounded-full bg-black;
  }

  #book-ticket #book-divider div:last-child {
    @apply absolute -right-3.5 top-1/2 size-7 -translate-y-1/2 rounded-full bg-black;
  }

  .book-ticket-circles {
    @apply absolute inset-x-0 -bottom-6 flex flex-row gap-1.5;
  }

  /* Not Found */
  #not-found {
    @apply flex justify-center items-center flex-col text-center w-full;
  }

  #not-found h4 {
    @apply text-white mt-6 font-semibold text-2xl;
  }

  #not-found p {
    @apply text-light-100 w-[360px] mt-1;
  }

  .not-found-btn {
    @apply bg-primary font-bebas-neue min-w-[360px] mt-6 text-dark-100 text-xl hover:bg-primary/90 min-h-12 !important;
  }

  /* Pagination */
  #pagination {
    @apply flex flex-row justify-end gap-3;
  }

  .pagination-btn_light {
    @apply bg-light-300 text-dark-300 hover:bg-light-300/70 !important;
  }

  .pagination-btn_dark {
    @apply bg-dark-300 hover:bg-dark-100 !important;
  }

  #pagination p {
    @apply text-sm inline-flex items-center font-semibold px-4 py-1.5 rounded-md text-center;
  }

  /* Sort */
  .select-trigger {
    @apply w-40 h-10 px-4 bg-dark-300 text-light-100 border-dark-100 !important;
  }

  .select-content {
    @apply bg-dark-300 text-light-100 border-dark-100 !important;
  }

  .select-item {
    @apply focus:bg-dark-600 focus:text-light-100 !important;
  }
}

@layer utilities {
  .gradient-vertical {
    background: linear-gradient(180deg, #12141d 0%, #12151f 100%);
  }

  .gradient-gray {
    background: linear-gradient(270deg, #37363a 0%, #353637 100%);
  }

  .gradient-blue {
    background: linear-gradient(180deg, #232839 0%, #12141d 100%);
  }

  /* Auth */
  .auth-container {
    @apply relative flex flex-col-reverse text-light-100 sm:flex-row;
  }

  .auth-form {
    @apply my-auto flex h-full min-h-screen flex-1 items-center bg-pattern bg-cover bg-top bg-dark-100 px-5 py-10;
  }

  .auth-box {
    @apply gradient-vertical mx-auto flex max-w-xl flex-col gap-6 rounded-lg p-10;
  }

  .auth-illustration {
    @apply sticky h-40 w-full sm:top-0 sm:h-screen sm:flex-1;
  }

  /* Root */
  .root-container {
    @apply flex min-h-screen flex-1 flex-col bg-pattern bg-cover bg-top bg-dark-100 px-5 xs:px-10 md:px-16;
  }

  /* Book Details */
  .book-details {
    @apply lg:mt-36 mt-16 mb-20 flex flex-col gap-16 lg:flex-row;
  }

  .book-details h3 {
    @apply text-xl font-semibold text-primary;
  }

  /* Library */
  .library {
    @apply mx-auto flex max-w-xl w-full flex-col text-center;
  }

  .library-subtitle {
    @apply text-lg font-semibold uppercase text-light-100;
  }

  .library-title {
    @apply mt-2 text-3xl font-semibold text-white xs:text-5xl;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}