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

@layer components {
  .title { @apply text-5xl font-bold mb-2; }
  .lead { @apply text-xl md:text-2xl font-light mb-2 tracking-tight; }
  .heading { @apply text-3xl font-semibold }
  .subheading { @apply text-xl font-semibold }
  .paragraph, p { @apply mb-4 }

  .link { @apply text-blue-600 hover:underline }

  .btn { @apply inline-flex items-center font-medium px-4 py-2 text-sm rounded-md cursor-pointer
    focus:outline-none focus:ring-2 focus:ring-offset-2
    text-gray-800 bg-white hover:bg-gray-200 focus:bg-gray-200 focus:ring-gray-800 border border-gray-300
  }
  .btn-primary { @apply text-white bg-blue-600 hover:bg-blue-700 focus:bg-blue-700 focus:ring-blue-700 }
  .btn-danger { @apply text-white bg-red-600 hover:bg-red-700 focus:bg-red-700 focus:ring-red-700 }
  .btn-sm { @apply px-2.5 py-1.5 text-xs rounded }

  .alert { @apply mb-4 rounded px-4 py-2 border bg-gray-50 text-gray-600 border-gray-100 }
  .alert-danger { @apply bg-red-50 text-red-600 border-red-100 }
  .alert-success { @apply bg-green-50 text-green-600 rounded border-green-100 }

  .form-field { @apply block mb-4 }
  .form-label { @apply mb-1 block text-sm font-medium text-gray-800 }
  .form-text-field { @apply block shadow-sm rounded border border-gray-200 outline-none p-2 mt-2 w-full }
  .form-file-field { @apply block w-full overflow-hidden cursor-pointer border text-gray-800 bg-white rounded-md shadow-sm focus:outline-none focus:ring-2 focus:border-transparent }
  .form-error-text { @apply mt-1 text-sm text-red-600 }
  .form-hint-text { @apply mt-1 text-sm text-gray-600 }
}

/* Not wrapped in a @layer component as we don't want it to be purged */

/* Reference: https://github.com/twbs/bootstrap/pull/31955/ */
/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
::file-selector-button {
  @apply text-gray-800 bg-white hover:bg-gray-200
    font-medium text-sm cursor-pointer
    border-0 border-r border-solid border-gray-300
    py-2.5 pl-8 pr-4;

  margin-inline-start: -1rem;
  margin-inline-end: 1rem;
}

::-webkit-file-upload-button {
  @apply text-gray-800 bg-white hover:bg-gray-200
    font-medium text-sm cursor-pointer
    border-0 border-r border-solid border-gray-300
    py-2.5 pl-8 pr-4;

  margin-inline-start: -1rem;
  margin-inline-end: 1rem;
}
/* Not wrapped in a @layer component as we don't want it to be purged */

/* Reference: https://github.com/twbs/bootstrap/pull/31955/ */
/* stylelint-disable-next-line selector-pseudo-element-no-unknown */
::file-selector-button {
  @apply text-gray-800 bg-white hover:bg-gray-200
    font-medium text-sm cursor-pointer
    border-0 border-r border-solid border-gray-300
    py-2.5 pl-8 pr-4;

  margin-inline-start: -1rem;
  margin-inline-end: 1rem;
}

::-webkit-file-upload-button {
  @apply text-gray-800 bg-white hover:bg-gray-200
    font-medium text-sm cursor-pointer
    border-0 border-r border-solid border-gray-300
    py-2.5 pl-8 pr-4;

  margin-inline-start: -1rem;
  margin-inline-end: 1rem;
}
/*
 * 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.
 *


 */

 @import "file_selector_button";