@import "tailwindcss";
@import "./animate.css";
@plugin 'tailwindcss-multi';
@plugin '@tailwindcss/typography';

@custom-variant dark (&:is(.dark *));

@theme {
  --text-xs-line-height: 17px;
  --text-sm: 14px;
  --text-sm-line-height: 30px;
  --text-base-line-height: 34px;
  
  --breakpoint-xl: 1320px;
  --breakpoint-base: 1000px;
  --breakpoint-lg: 900px;
  --breakpoint-md: 750px;
  --breakpoint-smd: 500px;
  --breakpoint-sm: 350px;

  --color-primary: var(--background-color);
  --color-secondary: var(--foreground);
  --color-blue: var(--blue);
  --color-grass: var(--grass);
  --color-danger: var(--danger);
  --color-gray-1: var(--gray-1);
  --color-gray-2: var(--gray-2);
  --color-gray-3: var(--gray-3);
  --color-gray-4: var(--gray-4);
  --color-overlay: var(--overlay);

  --spacing-1: 5px;
  --spacing-2: 10px;
  --spacing-3: 15px;
  --spacing-4: 20px;
  --spacing-5: 40px;
  --spacing-6: 50px;
  --spacing-7: 60px;
  --spacing-4_4: 25px;
  --spacing-4_5: 30px;
  --spacing-4_7: 35px;

  --animate-slide-down-and-fade: slideDownAndFade 300ms
    cubic-bezier(0.16, 1, 0.3, 1);
  --animate-slide-up-and-fade: slideUpAndFade 400ms
    cubic-bezier(0.16, 1, 0.3, 1);

  @keyframes slideDownAndFade {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes slideUpAndFade {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--gray-2, currentColor);
  }
}


@utility sections-container {
  @apply flex flex-col gap-30 [&_.user-nav-tabs:nth-child(2)]:-my-14;
}


@utility section-container {
  @apply flex w-full flex-col gap-2 text-sm;
}

@utility section-title {
  @apply relative flex items-center justify-between font-medium text-base;
  &.link {
    @apply hover:bg-gray-3 -mx-2 rounded-md p-2 transition-colors;
  }
}

@utility section-subtitle {
  @apply text-sm font-normal text-gray-4;
}

@utility link {
  &.section-title {
    @apply hover:bg-gray-3 -mx-2 rounded-md p-2 transition-colors;
  }
}

@utility section-content {
  @apply flex flex-col  break-words;
}

@utility no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}
@utility marquee {
  mask-image: linear-gradient(90deg, transparent,var(--background-color) 3%, var(--foreground) 97%, transparent);
}
@utility custom-underline {
  @apply underline underline-offset-4 decoration-gray-2 decoration-[2px];
}

@utility no-user-select {
  -user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}


@utility scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
  
  &::-webkit-scrollbar {
      display: 'none'
  }
}


@layer base {
  :root {
    --background-color: #f9f9f9;
    --foreground: #000;
    --gray-1: #838383;
    --gray-2: #e0e0e0;
    --gray-3: #f0f0f0;
    --gray-4: #646464;
    --blue: rgb(33, 146, 255);
    --grass: #46a758;
    --overlay: rgba(var(--foreground), 0.2);
    --danger: #b71c1c;
  }

  .dark {
    --background-color: #0d0d0d;
    --foreground: #fff;
    --gray-1: #555555;
    --gray-2: #202020;
    --gray-3: #121212;
    --gray-4:  #9e9e9e;
    --overlay: rgba(var(--background-color), 0.2);
    --danger: #FF4C4C;
  }
}


@layer base {
  html {
    @apply scrollbar-hide scroll-smooth;
  }
  body {
    @apply bg-primary text-secondary;
  }

  ::selection {
    @apply bg-gray-2 text-gray-4;
  }

  [id] {
    scroll-margin-top: 100px;
  }

  hr {
    @apply border-gray-2 w-full;
  }
}


