global.css

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

@layer base {
  html {
    font-family: 'Archivo', ui-sans-serif, system-ui, -apple-system,
      BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
      'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
      'Segoe UI Symbol', 'Noto Color Emoji';
  }
  body {
    @apply scroll-smooth transition-colors duration-300;
    @apply selection:bg-primary-500/20 selection:text-primary-900;
    @apply dark:selection:bg-primary-500/20 dark:selection:text-primary-100;
  }
  a {
    @apply font-bold no-underline;
  }
  a:focus {
    @apply outline-none;
  }
  a:focus-visible {
    @apply focus-ring;
  }
  a.btn {
    @apply no-underline;
  }
  input,
  textarea {
    @apply caret-primary-500;
  }
}

@layer components {
  .footer {
    @apply mt-32 flex justify-center border-t border-slate-200 dark:border-slate-200/5;
  }

  /*
   * Vechai UI
   */

  .btn {
    @apply font-bold;
  }

  /**
   * Navigation Bar
   * Navigation Link in Navigation Bar
   */

  .navigation-bar {
    @apply sticky top-0 z-10 w-full flex-none select-none p-2 md:p-4;
    @apply border-b border-neutral-900/10;
    @apply bg-secondary-blur;
  }

  .navlink-active {
    @apply bg-primary-100 text-primary-500 dark:bg-neutral-900;
  }

  .navlink-hover {
    @apply leading-none hover:bg-primary-200 dark:hover:bg-primary-900;
  }

  /* Used with Headless UI */
  .navlink-hover-menu {
    @apply bg-primary-100 dark:bg-primary-900;
  }

  /**
   * Radix UI - Navigation Menu
   */

  .nav-menu-root > div {
    @apply flex;
  }

  .nav-menu-link {
    @apply navlink-hover rounded-base px-3 py-2 font-bold transition-colors;
  }

  /**
   * Radix UI - Scroll Area
   */

  .scroll-area-corner {
    @apply bg-primary-800/20;
  }

  .scroll-area-scrollbar {
    @apply flex touch-none select-none bg-primary-800/20 p-[2px] transition-all duration-200 ease-out hover:bg-primary-800/30;
  }

  .scroll-area-scrollbar[data-orientation='vertical'] {
    @apply w-3;
  }

  .scroll-area-scrollbar[data-orientation='horizontal'] {
    @apply h-3 flex-col;
  }

  .scroll-area-thumb {
    @apply relative flex-1 cursor-pointer rounded-base bg-primary-900;
  }

  .scroll-area-thumb::before {
    @apply absolute top-1/2 left-1/2 h-full min-h-[50px] w-full min-w-[50px] translate-x-1/2 translate-y-1/2;
    content: '';
  }
}

@layer utilities {
  .bg-primary {
    @apply bg-neutral-50 dark:bg-neutral-900;
  }

  .bg-secondary {
    @apply bg-neutral-100 dark:bg-neutral-800;
  }

  .bg-secondary-blur {
    @apply bg-neutral-50/90 backdrop-blur dark:border-neutral-50/[0.06] dark:bg-neutral-800/90;
  }

  .bg-panel {
    @apply bg-white dark:bg-neutral-800;
  }

  .border-panel {
    @apply border border-neutral-300 dark:border-neutral-700;
  }

  .flex-section {
    @apply flex w-full flex-wrap gap-2 py-1;
  }

  .focus-ring {
    @apply ring-offset-primary-500/50 focus:ring focus:ring-primary-500/50;
  }

  .text-inherit {
    font-size: inherit;
  }

  .text-shimmer {
    @apply animate-text-shimmer;
    @apply bg-clip-text text-transparent;
    @apply bg-[length:250%_100%];
  }

  .text-shimmer.bg-gradient-primary {
    @apply bg-gradient-to-br from-primary-200 via-primary-500 to-primary-800;
  }

  .text-shimmer.bg-gradient-glossy {
    @apply bg-[linear-gradient(110deg,#e2e8f0,45%,#1e293b,55%,#e2e8f0)];
  }

  .text-underline-left-right {
    @apply after:bg-primary-500;
    @apply relative after:absolute after:-bottom-1 after:left-0 after:h-[4px] after:w-full after:origin-bottom-right after:scale-x-0  after:transition-transform after:duration-300 after:ease-in-out hover:after:origin-bottom-left hover:after:scale-x-100;
  }

  .prose-config {
    @apply mb-10;
    @apply prose dark:prose-invert md:prose-lg lg:prose-lg;
    @apply prose-a:prose-a-styles;
    @apply prose-ul:prose-ul-styles;
  }

  .prose-a-styles {
    @apply text-underline-left-right font-bold no-underline;
    @apply text-primary-900 dark:text-primary-100;
  }

  .prose-ul-styles {
    @apply space-y-3 pl-5 marker:text-primary-500;
  }

  .demo {
    @apply my-20;
  }

  .container-active a {
    @apply text-underline-left-right;
  }
}