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

html body[data-scroll-locked] {
  --removed-body-scroll-bar-size: 0 !important;
  margin-right: 0 !important;
}
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 202 24% 9%;
    --para: 206 6% 44%;
    --para-dark: 216 11% 91%;
    --card-gray: 206 6% 52%;
    --background2: 0 0% 100%;
    --light-foreground: 0 0% 50%;
    --sort-text: 206 6% 56%;
    --link-text: 206 6% 52%;
    --primary: #ff414c;
    --primary-foreground: 0 0% 100%;
    --background-muted: #f4f4f5;
    --dark-text: #080808;
    --light-gray: #f4f5f7;
    --dark-gray-text: #71717a;
    /* secondary colors */
    --dark-gray-border: #d1d5db;
    --secondary: 0 100% 94%;
    --secondary-rose: 0 100% 94%;
    --secondary-lemon: 49 92% 85%;
    --secondary-lemon-dark: 60 43% 93%;
    --secondary-gray: 0 0% 95%;
    --secondary-lavender: 253 73% 90%;
    --secondary-mint: 101 38% 81%;
    --secondary-red: 7 60% 57%;
    --text-gray: 217 19% 27%;
    --border: 216 12% 84%;
    --badge-color: 220 14% 96%;
    --icon-text: 215 14% 34%;
    /* neutral colors  */
    --gray: 0, 0% 59% 1;
    --gray-100: 0 0% 94%;
    --gray-200: 0 0% 92%;
    --gray-300: 0 0% 82%;
    --gray-400: 0 0% 59%;
    --gray-500: 0 0% 47%;
    --gray-600: 0 0% 35%;
    --gray-700: 0 0% 24%;
    --dark-gray: 0 0% 23%;
    --default-border: 216, 11%, 91%;

    /* code */

    --theme-header-bg: #c1c8cd;
    --three-dots-bg: #d1d5db;

    --docsearch-primary-color: #ff414c !important;
    --docsearch-searchbox-focus-background: hsl(0 0% 100%) !important;
    --docsearch-modal-background: hsl(0 0% 100%) !important;
    --docsearch-searchbox-background: #f9fafb !important;
  }

  .dark {
    --background: 0, 0%, 11%;
    --foreground: 0, 0%, 93%;
    --background2: 0 0% 14%;
    --light-foreground: 15, 33%, 98%;
    --para: 0 0% 73%;
    --para-dark: 0 0% 50%;
    --primary: #ff414c;
    --light-gray: #3a3a3a;
    --primary-foreground: 0, 0%, 100%;
    --text-gray: 30 17% 98%;
    --border: 0 0% 50%;
    --sort-text: 30 17% 98%;
    --badge-color: 0 0% 24%;
    --icon-text: 0 0% 73%;
    --link-text: 0 0% 49%;
    --dark-gray-text: #5e5e5e;
    --dark-gray-border: #515151;
    --dark-text: #ffffff; /* code */
    --theme-header-bg: #3c3c3c;
    --three-dots-bg: #515151;
    --default-border: 0 0% 18%;
    --docsearch-searchbox-background: hsl(0, 0%, 14%) !important;
    --docsearch-searchbox-focus-background: hsl(0 0% 14%) !important;
    --docsearch-hit-shadow: 0 0 0 1px hsl(0 0% 14%) !important;
    --docsearch-modal-background: hsl(0 0% 14%) !important;
    --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 26%, 0.5),
      0 3px 8px 0 #555a64 !important;
    --docsearch-key-gradient: linear-gradient(
      -225deg,
      #252525,
      #202020
    ) !important;
    --docsearch-key-shadow: inset 0 -2px 0 0 #383838, inset 0 0 1px 1px #4d4d4d,
      0 1px 2px 1px rgba(30, 35, 90, 0.4) !important;
    --docsearch-footer-background: hsl(0 0% 11%) !important;
    --docsearch-footer-shadow: 0 -1px 0 0 #181818 0 -3px 6px 0
      rgba(69, 98, 155, 0.12) !important;
    --docsearch-hit-background: hsl(0 0% 11%) !important;
    --docsearch-hit-color: hsl(0, 0%, 93%) !important;
    --docsearch-text-color: hsl(0, 0%, 93%) !important;
  }
}

@layer components {
  .darkline {
    @apply h-[2px]  w-full max-w-24 bg-foreground;
  }

  .container {
    @apply mx-auto max-w-[1280px] self-center  px-[16px] md:px-[20px] lg:px-[40px] 2xl:max-w-[1440px] 2xl:px-[20px] 3xl:max-w-[1600px] 3xl:px-[30px];
  }
  .container-nav {
    @apply mx-auto max-w-[1800px] px-[16px] md:px-[20px];
  }

  .container-home {
    @apply mx-auto max-w-[1391px] px-5  xl:px-10;
  }

  .container-nav-2 {
    @apply px-[16px] md:px-[40px];
  }

  .container-nav-3 {
    @apply mx-auto max-w-[1510px];
  }

  .container-reader {
    @apply mx-auto max-w-[1150px] px-5;
  }
  .container-small {
    @apply mx-auto max-w-[1440px] px-5  xl:px-[40px];
  }
  .border,
  .border-r,
  .border-l,
  .border-t,
  .border-b,
  .border-x,
  .border-y {
    @apply border-[hsl(216,11%,91%)] dark:border-[hsl(0,0%,18%)];
  }

  .sidebar-scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .sidebar-scroll::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
    border-radius: 10px;

    @apply dark:bg-[hsl(0,0%,24%)];
  }

  .sidebar-scroll::-webkit-scrollbar-track {
    background-color: #fbf8f7;
    @apply dark:bg-background;
  }
}

@layer base {
  body {
    @apply overflow-x-hidden bg-background    text-foreground subpixel-antialiased;
  }
  p {
    @apply text-para;
  }
  h1 {
    @apply !font-medium;
  }
  h2 {
    @apply text-foreground dark:text-foreground;
  }
  h3 {
    @apply text-foreground dark:text-foreground;
  }
}

.button--bestia .button__bg {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;

  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
}

.button--bestia:hover .button__bg {
  transform: scale3d(1.2, 1.2, 1);
}

.button--bestia .button__bg::before,
.button--bestia .button__bg::after {
  content: "";
  position: absolute;
  background: #000;
}
.dark .button--bestia .button__bg::before,
.dark .button--bestia .button__bg::after {
  background: white;
}

.button--bestia .button__bg::before {
  width: 110%;
  height: 0;
  padding-bottom: 110%;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
}

.button--bestia:hover .button__bg::before {
  transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
  transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
}

.button--bestia .button__bg::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s;
}

.button--bestia:hover .button__bg::after {
  opacity: 1;
  transition-duration: 0.01s;
  transition-delay: 0.3s;
}

.button--bestia span {
  display: block;
  position: relative;
  color: white;
}

.dark .button--bestia:hover span {
  color: black;
}

/* doc-search */

.DocSearch-Button {
  border: 1px solid hsl(var(--default-border)) !important;
  border-radius: 4px !important;
  height: 38px !important;
  width: 100%;
  padding-inline: 0.8rem !important;
  margin: 0 !important;
}

.DocSearch-Search-Icon {
  color: hsl(var(--para)) !important;
  width: 16px;
  height: 16px;
}

.DocSearch-Button-Container:after {
  color: hsl(var(--para)) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  margin-left: 0.8rem;
  content: "Search docs..." !important;
}

.DocSearch-Button-Container span {
  display: none;
}

.hide-arrow::-webkit-outer-spin-button,
.hide-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hide-arrow {
  -moz-appearance: textfield;
}

.prose-blog li > p {
  margin-bottom: 10px !important;
}
.prose-blog li > ul {
  margin-block: 10px !important;
}

.swiper-linear .swiper-wrapper {
  transition-timing-function: linear !important;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Custom Swiper Pagination Styles */
.swiper-pagination-bullet {
  background: #d1d5db !important;
  opacity: 0.5 !important;
}

.swiper-pagination-bullet-active {
  background: #ff414c !important;
  opacity: 1 !important;
}

.glow {
  position: absolute;
  left: 50%;
  top: -20%;
  z-index: 1;
  transform: translateX(-50%);
  width: 400px;
  height: 100px;
  background-color: white;
  filter: blur(100px);
  border-radius: 50%;
}
