@import "./tables.css";
@import "./buttons.css";
@import "./forms.css";
@import "./inputs.css";

@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  .primary-button {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-500 transition duration-150 ease-in-out;
  }

  .primary-button:hover {
    @apply bg-blue-600 cursor-pointer;
  }

  .secondary-button {
    @apply inline-flex items-center px-2 py-1 border border-gray-500 text-xs leading-4 rounded text-gray-700 bg-white tracking-wider font-semibold uppercase;
  }

  .secondary-button:hover {
    @apply font-bold text-gray-900;
  }

  .secondary-button:focus {
    @apply outline-none;
  }

  .signin-button {
    @apply inline-flex items-center w-full px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-blue-500 transition duration-150 ease-in-out;
  }

  .signin-button:hover {
    @apply bg-blue-600 cursor-pointer;
  }

  .destroy-button {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-gray-500 bg-red-200 transition duration-150 ease-in-out;
  }

  .destroy-button:hover {
    @apply bg-red-300 cursor-pointer font-bold;  
  }
}
@layer base {
  .form-field {
    @apply my-2;
  }

  .form-field label {
    @apply font-semibold text-sm tracking-wider;
  }

  .form-field input {
    @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300;
  }

  .form-field input:focus {
    @apply ring-2 ring-inset ring-blue-500;
  }
}
@layer base {
  .skinny-input {
    @apply ml-1 px-1.5 py-1 font-normal tracking-wide border border-gray-300 text-gray-900 text-sm rounded-lg w-32;
  }

  .skinny-input:focus {
    @apply border-sky-400 font-semibold;
  }

  .skinny-select {
    @apply skinny-input;
  }

  .skinny-select:focus {
    @apply border-sky-400;
  }
}
@layer base {
  .table-borders {
    @apply align-middle inline-block min-w-full shadow overflow-hidden border-b border-gray-200;
  }

  .table-cell-header {
    @apply px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider;
  }

  .table-row {
    @apply hover:bg-gray-50;
  }

  .table-cell {
    @apply px-6 py-4 border-b border-gray-200 text-sm leading-5 font-medium text-gray-900;
  }
}
/*
 * 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.
 *


 */