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

@layer components {
  h1 {
    @apply text-3xl font-bold text-blue-200;
  }

  h2 {
    @apply text-2xl font-bold text-blue-400;
  }

  h3 {
    @apply text-xl font-bold text-blue-600;
  }

  .btn-primary {
    @apply py-2 px-4 bg-blue-700 text-white;
    @apply hover:bg-blue-500 active:bg-blue-900;
  }

  .danger {
    @apply bg-red-500 text-white p-4 border-l-4 border-red-700;
  }

  .alert {
    @apply bg-yellow-400 text-white p-4 border-l-4 border-yellow-600;
  }

  .menu-link {
    @apply text-gray-600 hover:text-blue-600 hover:bg-gray-700 flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold;
  }

  .menu-link-selected {
    @apply bg-gray-400 text-blue-800 flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold;
  }

  .logo-text {
    @apply text-2xl font-bold text-gray-500 ml-2;
  }

  nav.pagination span {
    @apply px-3 py-1 bg-gray-200 text-gray-700;
  }

  .top-corner {
    @apply absolute top-0 right-0 m-4;
  }

  ul.bulleted-list {
    @apply list-disc list-inside ml-4 mt-2;
  }

  ul.bulleted-list li {
    @apply list-disc list-inside ml-8;
  }

  /*kaminari classes*/
  .page.current {
    @apply relative z-10 inline-flex items-center bg-indigo-600 px-4 py-2 text-sm font-semibold text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
  }

  .page.kaminari-page {
    @apply relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0;
  }

  .page.next {
    @apply relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0;
  }

  .page.previous {
    @apply relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0
  }
}
/*
 * 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.
 *


 */