/* Import Tailwind layers */
@import "tailwindcss"; 
@tailwind utilities;

/* Custom recipe app styles */
@layer components{
  .app-container {
    @apply p-4 flex;
  }

  .content-title{
    @apply text-3xl font-black mb-8 text-blue-400;
  }

  .main-view {
    @apply w-2/3 pl-4;
  }

  .recipe-image {
    @apply my-4 w-64;
  }

  .section-heading {
    @apply text-xl font-bold mb-2;
  }

  .subsection-heading {
    @apply font-semibold mb-2 mt-4;
  }

  .label {
    @apply text-gray-600
  }

  /* buttons */
  .primary-button {
    @apply bg-blue-300 px-4 py-2 shadow-md rounded-lg hover:bg-blue-400 text-gray-600 whitespace-nowrap
  }

  .default-button{
    @apply bg-gray-300 px-4 py-2 shadow-md rounded-lg hover:bg-gray-400 whitespace-nowrap text-gray-600
  }

  .dark-button{
    @apply bg-gray-600  hover:bg-gray-800 text-white shadow-md rounded px-4 py-2 whitespace-nowrap
  }

  /* input fields like input and textarea */
  .input-field {
    @apply p-2 w-full border rounded-md placeholder-gray-400 border-gray-600 hover:border-blue-600 transition-colors text-gray-600 focus:outline-none focus:border-blue-800;
  }

  /* groups */
  .button-group{
    @apply flex gap-4 mt-4;
  }

  .horizontal-input-group{
    @apply flex gap-2 mb-2 items-center;
  }

  /* lists */
  .default-list {
    @apply list-disc pl-6 mb-6;
  }

  .ingredient-group-card {
    @apply py-4 border-b border-gray-400;
  }
  
}