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

@layer components {

/********* base ************/

  h1 { @apply text-4xl mt-2 mb-5; }
  h2 { @apply text-2xl mt-2 mb-3; }
  h3 { @apply text-lg mt-2 mb-2; }

  h2.bb { @apply border-b-4 border-b-slate-700; }
  h2.mt { @apply mt-8; }
   
  a { @apply text-sky-800 cursor-pointer; }
  a.u { @apply underline; }
  p { @apply mb-3; }

  .t-lgt { @apply text-gray-500; }
  
  a.button, button { @apply px-3 py-1 inline-block border-2 border-gray-100 text-black rounded-md hover:bg-gray-100; }
  a.button.blue_full, button.blue_full { @apply bg-blue-500 text-white; }
  .button { @apply inline-block py-1 px-3 cursor-pointer text-blue-700 bg-slate-100 rounded border-2 border-slate-100 hover:border-blue-500; } 
  /* todo consolidate buttons... */
  .button_mini { @apply bg-white/50 py-[4px] px-2 rounded cursor-pointer; }
  
  ul { @apply list-disc list-inside; }
  li { @apply m-0 mb-1 ml-1 p-0; }
  hr { @apply border-gray-400 mb-8; }

  .todo { @apply bg-fuchsia-200 p-3 my-2 inline-block; }

  .block_border { @apply border-l-4 border-[rgb(78_109_160_/_80%)] pl-4; }


/********* notice ************/

  #notice { @apply inline-block bg-green-100 p-3 mb-2; }
  #alert { @apply inline-block bg-red-100 p-3 mb-2; }

  .help { @apply text-green-700; }
  
  /* 
  .help_block { @apply inline-block p-2 my-2 border-2 border-green-300 rounded-md text-green-700; }
  .help_block p:last-child { @apply mb-0; } 
  */

  .tag_mini { @apply  text-sm; }
  .tag_mini.red { @apply text-red-700; }
  .tag_mini.blue { @apply text-blue-700; }
  .tag_mini.gray { @apply text-gray-500; }

  /* 
  .tag { @apply inline-block p-[2px] px-2 bg-gray-100 text-gray-700 rounded-md text-sm; }
  .tag.red { @apply bg-red-100 text-red-700; } 
  */

/********* menu ************/

    .menu { @apply flex flex-row flex-wrap justify-center items-baseline gap-2; }
    .menu a, .menu button { @apply px-3 py-[6px] border-2 border-gray-100 text-black rounded-md hover:bg-gray-100; }
    .menu a.blue, .menu button.blue { @apply bg-blue-50 border-blue-300; }

    /* 
    .menu .last { @apply ml-auto; }
    .menu a.blue, .menu button.blue { @apply bg-blue-50 border-blue-300; }
    .menu a.logo { @apply hover:bg-green-600 hover:text-white; }
    .menu a.logo.active { @apply bg-green-600 text-white; }
    .menu a.active { @apply bg-green-100; }
    */

    .price { @apply bg-blue-50 px-4 py-2 border-4 border-blue-200 rounded-md inline-block; }

/********* form ************/

    .form { @apply pt-2; }
    .form_errors { @apply bg-red-100 p-3 mb-2 inline-block; }
    form > div { @apply mb-1; }
    label { @apply mb-1; }
    
    form.button_to { @apply inline-block; }
    form:not(.button_to) { @apply mb-5; }

    input[type='text'], input[type='email'], input[type='date'], input[type='password'], select, textarea { @apply p-2 mb-1 bg-stone-100 border-2 border-stone-100 text-blue-700 rounded-sm min-w-72; }
    input.error, textarea.error { @apply bg-red-100; }
    input:disabled, select:disabled, textarea:disabled { @apply text-gray-500; }

    .form_actions input, .form_actions a, .form_actions button { @apply mt-1 py-2 px-4 cursor-pointer text-blue-700 border-2 border-slate-100 rounded-sm; }
    .mini_actions input, .mini_actions a, .mini_actions button { @apply mt-1 py-1 px-4 cursor-pointer text-blue-700 bg-slate-100 rounded-sm; }
    
    .dropzone-area { @apply border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-blue-400 hover:bg-blue-50 transition-colors; }
    .dropzone-active { @apply border-blue-400 bg-blue-50; }
    .dropzone-thumbnail { @apply h-32 w-32 object-cover rounded; }
    .dropzone-submit-btn { @apply !mt-4 bg-blue-500 !text-white hover:bg-blue-600; }

/********* title ************/

  .title { @apply px-3 mt-10 pb-2 flex border-b-2 border-slate-200 items-end; }
  .title a { @apply text-base; }
  .title .nav { @apply ml-auto flex items-center text-xl; }

/********* table ************/

  .tbl { @apply overflow-x-auto min-w-full; }
  .tbl tbody { @apply divide-y divide-gray-200; }
  .tbl td, .tbl th { @apply p-2 px-4; }
  .tbl th { @apply font-normal text-left text-gray-500; }
  .tbl tbody tr:hover { @apply bg-gray-50; }

  .user_image       { @apply w-20 h-20 rounded-full; }
  .user_image_small { @apply w-10 h-10 rounded-full max-w-12; }
  .user_image_small.empty, .user_image.empty { @apply bg-gray-200 text-gray-500 text-sm flex items-center justify-center; }
  .user_image.empty { @apply text-4xl; }

/********* user ************/

  .user_card { @apply flex items-center; }
  .user_card h2 span { @apply text-gray-500 text-lg; }
  .user_card h2 { @apply mb-1; }

/********* icons ************/
  /* https://heroicons.com/solid */

  .icon { @apply w-6 h-6 inline-block mr-1 bg-no-repeat bg-contain; }
  .icon_small { @apply w-4 h-4; }
  
  /* 
  .icon_medium { @apply w-5 h-5; }
  .icon_filter { @apply m-0 mb-[1px]; }
  .icon_passive { @apply text-slate-400; }
  a.icon { @apply !border-b-0; } 
  */

}