/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Standardized Form Styles */
.perspex-form-input {
  @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm;
}

.perspex-form-input-search {
  @apply block w-full rounded-lg border-gray-300 p-2 text-gray-900 placeholder:text-gray-500 focus:border-gray-900 focus:ring-gray-900 sm:text-sm;
}

.perspex-form-input-filter {
  @apply block w-full rounded-lg border-gray-300 p-2 text-gray-900 sm:text-sm;
}

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

.perspex-form-checkbox {
  @apply h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600;
}

.perspex-form-radio {
  @apply h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600;
}

/* Transition for suggester type filter */
.suggester-type-filter {
  transition: opacity 0.15s ease-in-out;
}