@import "../app/(website)/studio-jscodeshift/src/index.css";

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

:root {
  --scrollbar-primary: #fff;
  --scrollbar-secondary: #bcbdbd;
  --text-color-code-plain: #0b151e;
  --text-color-code-comments: #0b151e66;
  --header-height: 114px;
}
:root.dark {
  --text-color-code-plain: #fff;
  --scrollbar-primary: #0b151e;
  --scrollbar-secondary: #e5e7eb;
  --text-color-code-comments: #ffffff59;
}

/* Firefox */
.scrollbar-color * {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-secondary) var(--scrollbar-primary);
}

/* Chrome, Edge, and Safari */
.scrollbar-color *::-webkit-scrollbar {
  width: 15px;
}

.scrollbar-color *::-webkit-scrollbar-track {
  background: var(--scrollbar-primary);
  border-radius: 5px;
}

.scrollbar-color *::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-secondary);
  border-radius: 14px;
  border: 3px solid var(--scrollbar-primary);
}
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  .animation-pause {
    animation-play-state: paused;
  }
  .xl-heading {
    @apply text-xlHeadingMobile lg:text-xlHeading;
  }

  .l-heading {
    @apply font-bold text-lgHeadingMobile lg:text-lgHeading;
  }

  .m-heading {
    @apply font-bold text-mdHeadingMobile lg:text-mdHeading;
  }

  .s-heading {
    @apply font-bold text-smHeadingMobile lg:text-smHeading;
  }

  .xs-heading {
    @apply font-bold text-xsHeading;
  }

  .body-l-medium {
    @apply text-bodyLgMedium;
  }

  .body-l {
    @apply text-bodyMdRegular lg:text-bodyLgRegular;
  }

  .body-m-medium {
    @apply text-bodyMdMedium;
  }

  .body-m {
    @apply text-bodyMdRegular;
  }

  .body-s-medium {
    @apply text-bodySmMedium;
  }

  .body-s {
    @apply text-bodySmRegular;
  }

  .body-xs-medium {
    @apply text-bodyXsMedium;
  }

  .body-xs {
    @apply text-bodyXsRegular;
  }

  .tag:not(.codeblock .tag) {
    @apply text-tag uppercase;
  }

  .code {
    @apply text-codeMobile lg:text-code;
    font-family: "inconsolata", monospace;
  }
  .inline-code {
    @apply w-fit rounded-[4px] border-emphasis-dark bg-background-dark/10 box-decoration-clone  px-[4px] py-0 text-codeMobile leading-6 lg:text-code dark:border dark:bg-emphasis-dark/10;
    font-family: "inconsolata", monospace;
  }
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  transition:
    background-color 0.01s ease-out,
    color 0.01s ease-out;

  @apply bg-primary-dark text-primary-light dark:bg-primary-light dark:text-primary-dark;
}

body {
  overflow-x: hidden;
  word-spacing: 1px;
  @apply selection:bg-accent selection:text-primary-light;
}

ol,
ul {
  margin-left: 1rem;
}

ol {
  list-style-type: disc;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* SVG Animations */
#rect-top,
#rect-bottom {
  transition: transform 0.3s ease-out;
  transform-origin: center center;
}

.open #rect-top {
  transform: translateY(1px) translateX(-5px) rotate(45deg);
}

.open #rect-bottom {
  transform: translateY(-3.5px) translateX(1px) rotate(-45deg);
}

.gradient-planet {
  background: linear-gradient(180deg, #bbfc03 60%, rgba(187, 252, 3, 0) 100%);

  @media (min-width: 1024px) {
    background: linear-gradient(180deg, #bbfc03 0%, rgba(187, 252, 3, 0) 100%);
  }
}
.gradient-ellipse {
  background: linear-gradient(180deg, #bbfc03 60%, rgba(187, 252, 3, 0) 100%);

  @media (min-width: 1024px) {
    background: linear-gradient(
      180deg,
      #bbfc03 0%,
      rgba(187, 252, 3, 0.17) 100%
    );
  }
}

.codeblock pre {
  font-variant-numeric: slashed-zero;
  font-feature-settings:
    "ss02" on,
    "clig" off,
    "liga" off;
}

h2[class*="heading"] a,
h3[class*="heading"] a,
h4[class*="heading"] a,
h5[class*="heading"] a,
h6[class*="heading"] a {
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* Cutomize Clerk components */
.cl-userButtonPopoverActionButton,
.cl-userButtonPopoverActionButton:hover,
.cl-footerActionLink {
  color: inherit;
}

.prose
  :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):before,
.prose
  :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)):after {
  content: normal;
}

.introjs-tooltip {
  min-width: 500px !important;
}

.introjs-tooltiptext p {
  padding: 8px 0;
  text-align: justify;
}

.tabs {
  z-index: 15;
  background: rgba(206, 208, 210, 0.12);
  font-size: 14px;
}

.tabs input {
  width: 80px;
}

.tabs-list {
  display: flex;
  align-items: center;
  min-height: 33px;
  padding-bottom: 3px; /* Space for the scrollbar */
  overflow-x: auto;
  overflow-y: hidden;
}

/* Increase height when content overflows */
.tabs-list::after {
  content: "";
  display: block;
  height: 3px; /* Height of the scrollbar */
  min-width: 1px; /* Ensures it's always present */
}

.tabs-list::-webkit-scrollbar {
  height: 3px;
}

.tabs-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.tabs-list::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1);
}

.tab-item {
  display: flex;
  align-items: center;
  height: 30px;
}

.tab-item > * {
  padding: 10px 20px;
}

/* Adjust the height of .tabs when scrollbar is present */
.tabs:has(.tabs-list::-webkit-scrollbar-thumb) {
  height: 36px; /* Increased height to accommodate scrollbar */
}

/* For Firefox and other browsers */
@supports not selector(::-webkit-scrollbar) {
  .tabs {
    height: 36px; /* Set a fixed height that accommodates the scrollbar */
  }

  .tabs-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.1);
  }
}
.tab-trigger {
  cursor: pointer;
  background: none;
  min-width: 100px;
}

.tab-trigger:hover {
  font-weight: bold;
}

.tab-item.active {
  border-bottom: 2px solid black;
  font-weight: bold;
}

.dots-button {
  padding: 0 10px;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 24px;
  font-weight: bold;
  margin-left: 5px;
  width: 30px;
}

.add-tab-button {
  padding: 0 10px;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 24px;
  font-weight: lighter;
  margin-left: 10px;
}

.add-tab-button:hover {
  font-weight: bold;
}

.dropdown-menu-content {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dropdown-menu-item {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
}

.dropdown-menu-item:hover {
  background-color: #eee;
}

.tab-content {
  padding: 20px;
}

.og-title {
  text-align: left;
}

.tab-item.input-error {
  border-color: red;
}

/* HoverArrow.css */
@media (pointer: fine) {
  /* For devices with precise pointers (e.g., mouse) */
  .group:hover .opacity-0 {
    opacity: 1;
  }

  .group:hover .translate-x-offset {
    transform: translateX(3px);
  }
}

@media (pointer: coarse) {
  /* For devices with less precise pointers (e.g., touch) */
  .group:active .opacity-0 {
    opacity: 1;
  }

  .group:active .translate-x-offset {
    transform: translateX(3px);
  }
}

.scrollbar::-webkit-scrollbar {
  @apply w-1;
}
.scrollbar::-webkit-scrollbar,
.scrollbar::-webkit-scrollbar-thumb {
  @apply overflow-visible rounded;
}
.scrollbar::-webkit-scrollbar-thumb {
  @apply bg-slate-500/20;
}

.outline {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: transparent;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Hide default Google reCAPTCHA badge – we render our own compliant attribution */
.grecaptcha-badge {
  visibility: hidden !important;
  /* Keep space zero so layout isn't affected */
  width: 0 !important;
  height: 0 !important;
}
