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

@layer components {
  label {
    @apply select-none;
  }

  .form-label {
    @apply block text-base font-medium pl-1 text-gray-700;
  }

  .form-input {
    @apply mt-1 focus:ring-ab-green-500 focus:border-ab-green-500 block w-full shadow-sm sm:text-base border-gray-300 rounded-md;
  }

  .form-simple-button {
    @apply select-none bg-ab-green-200 text-ab-green-1000 py-2 px-4 border border-ab-green-300 rounded-md shadow-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 disabled:opacity-60 disabled:bg-white hover:bg-ab-green-100;
  }

  .form-primary-button {
    @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm font-medium rounded-md text-white bg-ab-green-1000 hover:bg-ab-green-900 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:bg-gray-500 focus:ring-ab-green-500;
  }

  .form-danger-button {
    @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm font-medium rounded-md text-white bg-ab-coral-1000 hover:bg-ab-coral-800 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:bg-gray-500 focus:ring-red-500;
  }

  .form-danger-button-bright {
    @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm font-medium rounded-md text-white bg-ab-coral-800 hover:bg-ab-coral-400 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:bg-gray-500 focus:ring-red-500;
  }

  .form-simple-danger-button {
    @apply select-none bg-white py-2 px-4 border border-ab-coral-500 rounded-md shadow-sm font-medium text-ab-coral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ab-coral-500 disabled:opacity-60 disabled:bg-white hover:bg-ab-coral-100;
  }

  .page-header {
    @apply text-xl sm:text-2xl font-bold leading-tight text-ab-green-1000 sm:ml-6 text-center sm:text-left;
  }

  .range-slider {
    @apply w-full h-2 rounded-lg appearance-none cursor-pointer;
    background: linear-gradient(to right, #678991 0%, #678991 var(--slider-progress, 0%), #e5e7eb var(--slider-progress, 0%), #e5e7eb 100%);
  }

  .range-slider::-webkit-slider-thumb {
    @apply appearance-none w-4 h-4 bg-ab-green-1000 rounded-full cursor-pointer -mt-1;
  }

  .range-slider::-moz-range-thumb {
    @apply w-4 h-4 bg-ab-green-1000 rounded-full cursor-pointer border-0;
  }

  .range-slider::-webkit-slider-runnable-track {
    @apply w-full h-2 rounded-lg;
    background: transparent;
  }

  .range-slider::-moz-range-track {
    @apply w-full h-2 rounded-lg;
    background: transparent;
  }

  .range-slider:focus {
    @apply outline-none;
  }

  .range-slider:focus::-webkit-slider-thumb {
    @apply ring-2 ring-ab-green-500 ring-offset-1;
  }

  .range-slider:focus::-moz-range-thumb {
    @apply ring-2 ring-ab-green-500 ring-offset-1;
  }
}