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

@layer base {

  html {
    @apply h-full bg-gray-100;
  }

  body {
    @apply h-full;
  }

  .button {
    @apply px-8 py-2 text-xs font-semibold tracking-wide text-gray-500 uppercase bg-transparent border border-transparent rounded hover:cursor-pointer hover:bg-gray-500 hover:border-gray-700 hover:text-gray-50;
  }

  .button-gray {
    @apply text-gray-500 bg-gray-100 border-gray-300 button hover:bg-gray-500 hover:border-gray-700 hover:text-gray-50;
  }

  .button-blue {
    @apply text-blue-500 border-blue-200 bg-blue-50 button hover:bg-blue-500 hover:border-blue-700 hover:text-blue-50;
  }

  .button-red {
    @apply text-red-500 border-red-200 bg-red-50 button hover:bg-red-500 hover:border-red-700 hover:text-red-50;
  }

  .button-green {
    @apply text-green-500 bg-green-100 border-green-400 button hover:bg-green-500 hover:border-green-600 hover:text-green-50;
  }

  .button-amber {
    @apply text-amber-500 border-amber-200 bg-amber-50 button hover:bg-amber-400 hover:border-amber-500 hover:text-amber-50;
  }

  .sidebar-nav-link {
    @apply flex items-center px-2 py-2 text-sm font-medium text-gray-300 rounded-md hover:bg-gray-700 hover:text-white;
  }

  .sidebar-nav-link--active {
    @apply text-white bg-gray-900 sidebar-nav-link hover:bg-gray-900;
  }

  .container-primary {
    @apply p-3 text-black border rounded-md md:p-5 bg-stone-100 border-stone-900;
  }

  .container-wrapper {
    @apply flex flex-col mt-10 mb-10 text-black rounded-md bg-stone-50;
  }

  .container-header {
    @apply flex flex-row items-center justify-between p-4 px-5 border-b rounded-t-md border-stone-300 bg-stone-200;
  }

  .container-title {
    @apply text-2xl font-medium text-stone-800;
  }

  .container-header-link {
    @apply inline-block px-6 py-2 text-xs font-medium border rounded-full cursor-pointer text-stone-500 border-stone-400 hover:bg-stone-300 hover:border-stone-400;
  }

  .container-list {
    @apply flex flex-col;
  }

  .container-body {
    @apply flex flex-col p-5;
  }

  .container-footer {
    @apply flex flex-row justify-between px-5 py-5 border-t rounded-b border-stone-300 bg-stone-200;
  }

  .container-footer-link {
    @apply inline-block px-6 py-2 text-xs font-medium border rounded-full cursor-pointer text-stone-500 border-stone-400 hover:bg-stone-300 hover:border-stone-400;
  }

  .investigation-card {
    @apply flex flex-row items-center justify-between px-2 py-1 bg-white border rounded-md border-stone-300 hover:cursor-pointer text-stone-600 hover:border-sky-300 hover:bg-sky-100;
  }

  .stage-card {
    @apply flex flex-row items-center justify-between px-5 py-3 mb-3 text-sm font-medium bg-white border rounded-md border-stone-300 hover:cursor-pointer text-stone-600 hover:border-sky-300 hover:bg-sky-100;
  }


.form-field-group {
  @apply sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5;
}

.form-field-wrapper {
  @apply mt-1 sm:mt-0 sm:col-span-2;
}



  .form-label {
    @apply block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2;
  }

  .form-text-field {
    @apply block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm;
  }

  .form-submit-button {
    @apply inline-block px-6 py-2 text-xs font-medium border rounded-full cursor-pointer text-stone-500 border-stone-400 hover:bg-stone-300 hover:border-stone-400;
  }

  .nav-link-button {
    @apply w-full px-4 py-2 text-xs border border-gray-800 rounded-full cursor-pointer hover:bg-blue-700 hover:border-blue-600;
  }

  /* =========== DEVISE =========== */

  .devise-form {
    @apply space-y-5;
  }
  .devise-form-title {
    @apply p-0 mt-2 text-xl font-semibold leading-3 text-center uppercase text-slate-700;
  }
  .devise-form-label {
    @apply block text-sm font-medium text-slate-700;
  }
  .devise-form-field {
    @apply block w-full px-3 py-2 border rounded-md shadow-sm appearance-none placeholder-slate-400 border-slate-300 focus:outline-none focus:ring-slate-500 focus:border-slate-500 sm:text-sm;
  }
  .devise-form-checkbox {
    @apply w-4 h-4 rounded border-slate-300 text-slate-600 focus:ring-slate-500;
  }
  .devise-form-checkbox-label {
    @apply block ml-2 text-sm font-medium text-slate-700 hover:text-slate-500 hover:cursor-pointer;
  }
  .devise-form-link {
    @apply block text-sm font-medium text-slate-700 hover:text-slate-500;
  }
  .devise-form-submit-button {
    @apply flex justify-center w-full px-4 py-2 text-sm font-medium text-white border border-transparent rounded-md shadow-sm bg-slate-600 hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-500;
  }
  .devise-form-shared-links {
    @apply mt-5 text-sm font-light;
  }
  .devise-form-shared-link {
    @apply hover:underline;
  }

  /* =========== TOGGLE BUTTON =========== */

  .toggle-button {
    @apply relative inline-flex flex-shrink-0 h-6 transition-colors duration-200 ease-in-out bg-gray-200 border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500;
  }

  .toggle-button--active {
    @apply bg-green-600 toggle-button ;
  }

  .toggle-button-switch {
    @apply inline-block w-5 h-5 transition duration-200 ease-in-out transform translate-x-0 bg-white rounded-full shadow pointer-events-none ring-0;
  }

  .toggle-button-switch--active {
    @apply translate-x-5 toggle-button-switch;
  }

}
/*
 * 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.
 *


 */