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

@layer components {
  .form-group {
    @apply mb-4;
  }
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  .form-input,
  .form-select {
    @apply block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500;
  }
  .btn {
    @apply inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors;
  }
  .btn-primary {
    @apply border border-transparent bg-blue-600 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }
  .btn-secondary {
    @apply border border-gray-300 bg-white text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }
}

label.required {
  &:after {
    content: " *";
    font-weight: bold;
    color: rgb(220 38 38/var(--tw-text-opacity, 1));
  }
}


.pagy {
  @apply flex space-x-1 font-semibold text-sm text-gray-500;

  a:not(.gap) {
    @apply block rounded-lg px-3 py-1 bg-gray-200;

    &:hover {
      @apply bg-gray-300;
    }

    &:not([href]) {
      /* disabled links */
      @apply text-gray-300 bg-gray-100 cursor-default;
    }

    &.current {
      @apply text-white bg-gray-400;
    }
  }

  label {
    @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5;

    input {
      @apply bg-gray-100 border-none rounded-md;
    }
  }
}