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

/*

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

*/

/* Pagy styles 👇 */
.pagy.nav {
  @apply flex items-center justify-center border-t border-gray-200 px-4 sm:px-0;
}

/* .pagy .gap {
  @apply inline-flex items-center border-t-2 border-transparent p-4 text-sm font-medium text-gray-500;
} */

.pagy a {
  @apply inline-flex items-center border-t-2 border-transparent p-4 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700
}

.pagy a.current {
  @apply -mt-px inline-flex items-center border-t-2 border-indigo-500 p-4 text-sm font-medium text-indigo-600;
}

.pagy a[aria-label="Previous"] {
  font-size: 0;
  @apply -mt-px mr-auto;
}

.pagy a[aria-label="Previous"]::after {
  content: '‹ Prev';
  @apply text-sm;
}

.pagy a[aria-label="Next"] {
  font-size: 0;
  @apply -mt-px ml-auto;
}

.pagy a[aria-label="Next"]::before {
  content: 'Next ›';
  @apply text-sm;
}

.pagy a[aria-label="Previous"][aria-disabled="true"],
.pagy a[aria-label="Next"][aria-disabled="true"] {
  @apply invisible;
}
/* Pagy styles 👆 */
/*
 * 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.
 *


 */

form[aria-busy="true"] [type="submit"] [data-disable-with] {
  display: flex !important;
}