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

@layer base {
  :root {
    --thai-primary: #282646;
    --thai-accent: #d43e2e;
  }
}

@layer components {
  .bg-thai-primary {
    background-color: var(--thai-primary);
  }
  .bg-thai-accent {
    background-color: var(--thai-accent);
  }
  .hover\:bg-thai-accent:hover {
    background-color: var(--thai-accent);
  }
  .border-thai-accent {
    border-color: var(--thai-accent);
  }
  .text-thai-accent {
    color: var(--thai-accent);
  }
  .ring-thai-accent {
    --tw-ring-color: var(--thai-accent);
  }
  .from-thai-primary {
    --tw-gradient-from: var(--thai-primary);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }
  .to-thai-accent {
    --tw-gradient-to: var(--thai-accent);
  }
  
  /* Category Tree Styles */
  .category-tree {
    @apply pr-1;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #f3f4f6;
  }
  
  .category-tree::-webkit-scrollbar {
    @apply w-1.5;
  }
  
  .category-tree::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded;
  }
  
  .category-tree::-webkit-scrollbar-thumb {
    @apply bg-gray-300 rounded hover:bg-gray-400;
  }
  
  .category-item {
    @apply my-0.5 transition-all duration-100;
    word-break: break-word;
  }
  
  .category-item a {
    white-space: normal;
  }
  
  .category-item:hover {
    @apply bg-gray-100;
  }
  
  .category-item.bg-blue-50:hover {
    @apply bg-blue-100;
  }
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */