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

@layer components {
  .button {
    @apply block font-semibold hover:brightness-110 text-center py-2.5 rounded-full shadow-sm text-sm text-white w-full;
  }
  .card {
    @apply bg-gray-100 overflow-hidden px-4 py-6 rounded-lg;
  }
  .admin-button {
    @apply py-2 px-4 border border-transparent rounded-lg
    text-sm font-medium text-white bg-blue-600 
    hover:bg-blue-700 focus:outline-none 
    focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
    transition-colors duration-200;
  } 
}

.pagy {
  @apply flex space-x-1 font-semibold text-sm text-blue-800;
  a:not(.gap) {
    @apply block rounded-full w-7 h-7 bg-white border border-blue-800 text-center content-center;
    &:hover {
      @apply bg-neutral-200;
    }
    &:not([href]) { /* disabled links */
      @apply text-blue-800 bg-white cursor-default;
    }
    &.current {
      @apply text-white bg-blue-800;
    }
  }
  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-full px-3 py-0.5;
    input {
      @apply bg-gray-100 border-none rounded-full;
    }
  }
}