@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

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

@layer components {
  input[type="checkbox"]:checked ~ label span svg {
    @apply inline-flex;
  }

  .sticky .header-logo {
    @apply py-5 lg:py-2;
  }

  .sticky .menu-scroll.active {
    @apply opacity-70;
  }

  input#togglePlan:checked ~ .dot {
    @apply translate-x-full;
  }

  input#checkboxLabel:checked ~ .box span {
    @apply opacity-100;
  }
}

/*
    https://github.com/tailwindlabs/tailwindcss/discussions/2394
    https://github.com/tailwindlabs/tailwindcss/pull/5732
*/
@layer utilities {
  /* Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

.theme-body-color {
  @apply text-body-color dark:text-body-color-dark;
}

.theme-text {
  @apply text-base theme-body-color;
}

/* Blog Details Style */
.blog-details {
  @apply theme-body-color;
}

.blog-details {
  @apply theme-text 
}

.blog-details p {
  @apply mb-8 theme-text leading-relaxed;
}
.blog-details p strong {
  @apply text-primary dark:text-white;
}
.blog-details h3 strong,
.blog-details h3 {
  @apply text-xl mb-10 !font-semibold leading-tight text-black dark:text-white sm:text-2xl sm:leading-tight lg:text-xl lg:leading-tight xl:text-2xl xl:leading-tight;
}
.blog-details h4 strong,
.blog-details h4 {
  @apply text-xl !font-semibold leading-tight text-black dark:text-white sm:text-2xl sm:leading-tight lg:text-xl lg:leading-tight xl:text-2xl xl:leading-tight;
}
.blog-details h5 strong,
.blog-details h5 {
  @apply text-lg mb-3 !font-semibold leading-tight text-black dark:text-white sm:text-xl;
}
.blog-details h1 {
  @apply mb-4 text-3xl !font-bold !leading-tight text-black dark:text-white sm:text-4xl md:text-[45px] lg:text-4xl xl:text-[45px];
}
.blog-details h2 strong,
.blog-details h2 {
  @apply mb-4 text-[26px] !font-bold !leading-tight text-black dark:text-white sm:text-3xl md:text-4xl;
}
.blog-details ul,
.blog-details ol {
  @apply mb-10 list-inside list-disc theme-body-color;
}
.blog-details li,
.blog-details li {
  @apply mb-2 theme-text;
}
.blog-details blockquote {
  @apply relative z-10 mb-10 overflow-hidden rounded-sm bg-gray-light p-8 dark:bg-gray-dark md:py-9 lg:px-10 xl:px-32 text-center text-base font-medium italic text-black;
}

.blog-details blockquote::after {
  content: "";
  @apply absolute w-20 h-20 right-0 bottom-0 bg-[url(/images/blog/quote-shape-2.svg)] bg-no-repeat bg-contain bg-right-bottom;
}
.blog-details blockquote::before {
  content: "";
  @apply absolute left-0 top-0 w-[140px] h-[106px] bg-[url(/images/blog/quote-shape-1.svg)] dark:bg-[url(/images/blog/quote-shape-1-dark.svg)] bg-no-repeat bg-contain bg-left-top;
}

pre {
  @apply relative bg-stroke-dark px-4 py-2 rounded-lg mb-2;
}

.prism-copy-button {
  @apply absolute top-2 right-2 h-[26px] rounded bg-white px-4 text-primary shadow-one;
}

.url {
  @apply text-primary hover:text-black dark:hover:text-white
}