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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.devise-form-input {
  @apply w-full mt-1 text-sm block appearance-none px-3 py-2 border border-primary-900 rounded-md shadow-sm placeholder-primary-400 focus:outline-none focus:ring-inset focus:ring-1 focus:ring-primary-900 ;
}

.bg-navbar {
  @apply bg-[#262626];
}

.navbar-option {
  @apply w-full text-white flex p-2 text-sm leading-6 font-semibold px-6 hover:bg-primary-700;
}

.navbar-option-selected {
  @apply w-full bg-primary-700 text-white flex p-2 text-sm leading-6 font-semibold px-6;
}

.form-label {
  @apply block text-gray-950 text-sm font-medium;
}

.form-text-area {
  @apply w-full mt-1 text-sm block shadow-sm placeholder-primary-400 rounded-md border-0 ring-1 ring-inset ring-primary-900 focus:ring-inset focus:ring-2 focus:ring-primary-900 resize-none;
}

.form-text-input {
  @apply w-full mt-1 text-sm block placeholder-primary-400 rounded-md border-0 ring-1 ring-inset ring-[#cbd5e1] focus:ring-inset focus:ring-2 focus:ring-primary-900;
}

.heading-1 {
  @apply text-2xl font-semibold text-primary-800;
}

.heading-2 {
  @apply text-xl leading-6 font-medium text-primary-900;
}

.outline-button {
  @apply inline-flex justify-center py-2 px-4 border shadow-sm text-sm font-medium rounded-md text-primary-900 border-primary-900 cursor-pointer  hover:bg-primary-900 hover:text-white focus:outline-none;
}

.pagy-nav-item {
  @apply min-w-[1.5em] md:min-w-[2em] inline-flex justify-center py-1 cursor-pointer text-sm text-primary-900 border-primary-900 border border-l-0 hover:bg-primary-900 hover:text-white shadow-sm shadow-inner items-center;
}

.pagy-nav-item-active {
  @apply min-w-[1.5em] md:min-w-[2em] inline-flex justify-center py-1 cursor-pointer bg-primary-900 text-white text-sm shadow-sm shadow-inner items-center;
}

.pagy-nav-item-empty {
  @apply min-w-[2em] inline-flex justify-center py-1 text-sm text-primary-900 shadow-sm shadow-inner select-none border-r border-primary-900;
}

.pagy-nav-next {
  @apply min-w-[3em] inline-flex justify-center py-1 px-4 cursor-pointer rounded-r-md border border-primary-900 hover:bg-primary-900 hover:text-white text-primary-900 text-sm shadow-sm shadow-inner border-l-0 items-center;
}

.pagy-nav-prev {
  @apply min-w-[3em] inline-flex justify-center py-1 px-4 cursor-pointer rounded-l-md border border-primary-900 hover:bg-primary-900 hover:text-white text-primary-900 text-sm shadow-sm shadow-inner items-center;
}

.primary-button {
  @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm text-white font-medium rounded-md  bg-primary-700 cursor-pointer hover:bg-primary-800 focus:outline-none;
}

.primary-button-disabled {
  @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-primary-700  cursor-not-allowed opacity-50 focus:outline-none;
}

.primary-button-xs {
  @apply inline-flex justify-center py-1 px-1 border border-transparent shadow-sm text-xs font-medium rounded-md text-white bg-primary-700 cursor-pointer hover:bg-primary-800 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed;
}

.secondary-link {
  @apply text-primary-600 cursor-pointer text-sm hover:text-primary-700;
}

.secondary-link-xs {
  @apply text-primary-600 cursor-pointer text-xs hover:text-primary-800;
}

.secondary-link-md {
  @apply text-primary-600 cursor-pointer text-base hover:text-primary-700;
}

.table-striped tr:nth-of-type(even) {
  @apply bg-tertiary-50;
}

.form-text-area-disabled {
  @apply w-full mt-1 text-sm block shadow-sm placeholder-primary-400 rounded-md border-0 ring-1 ring-inset ring-primary-900 focus:ring-inset focus:ring-2 focus:ring-primary-900 resize-none opacity-70 select-none cursor-not-allowed;
}
/*
 * 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.
 *


 */