/*
  -This injects Tailwind's base styles and any base styles registered by plugins.
  -The base layer is for things like reset rules or default styles applied to plain HTML elements.
*/
@tailwind base;

/*
  -This injects Tailwind's component classes and any component classes registered by plugins.
  -The components layer is for class-based styles that you want to be able to override with utilities.
*/
 @tailwind components;
 
/*
  -This injects Tailwind's utility classes and any utility classes registered by plugins.
  -The utilities layer is for small, single-purpose classes that should always take precedence over any other styles.
*/
 @tailwind utilities;


/*
  Use the @layer directive to tell Tailwind which “bucket” a set of custom styles belong to. Valid layers are base, components, and utilities.
*/
@layer base {
  p {
    @apply text-lg;
  }

  h1 {
    @apply text-5xl;
  }

  a {
    @apply text-sky-500;
  }
}


@layer components {
  .btn-sm {
    @apply inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
  }

  .btn-md {
    @apply inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
  }

  .btn-lg {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
  }

  .btn-xl {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
  }

  .btn-2xl {
    @apply inline-flex items-center px-6 py-3 border border-gray-300 shadow-sm text-base font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
  }
}
/*
 * 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.
 *


 */

html {
  font-size: 10px;
}