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

@layer components {
  .form-input {
    @apply block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6;
  }

  .form-label {
    @apply block text-sm/6 font-medium text-gray-900;
  }

  .form-contianer {
    @apply grid grid-cols-1 gap-x-8 gap-y-10 border-b border-gray-900/10 pb-12 md:grid-cols-3;
  }

  .form-title {
    @apply text-base/7 font-semibold text-gray-900;
  }

  .form-description {
    @apply mt-1 text-sm/6 text-gray-600;
  }

  .cancel-button {
    @apply text-sm/6 font-semibold text-gray-900;
  }

  .submit-button {
    @apply rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
  }

  .turbo-progress-bar {
    @apply bg-gradient-to-r from-indigo-500 via-purple-400 to-pink-500;
  }

  .auto-textarea {
    @apply w-full px-2 pt-2 pb-2.5 text-gray-800 border-gray-200 rounded-md focus-visible:ring-0;
  }
  
  
  /** rails_designer_system **/
  .input,
  .textarea,
  .select {
    @apply w-full px-3 py-1;
    @apply text-sm text-gray-600;
    @apply bg-transparent;
    @apply border-gray-200 rounded-md;

    &:focus {
      @apply ring-2 ring-offset-0 ring-gray-50;
      @apply border-gray-400/70;
    }
  }

  .input--dark,
  .textarea--dark,
  .select--dark {
    @apply text-gray-200;
    @apply border-gray-600;

    &:focus {
      @apply ring-2 ring-offset-0 ring-gray-700;
      @apply border-gray-500/70;
    }
  }

  .checkbox {
    @apply border-gray-200 rounded;
    @apply accent-sky-500;

    &:checked {
      @apply bg-sky-500;
    }

    &:checked:hover {
      @apply bg-sky-500;
    }

    &:checked:focus {
      @apply ring-2 ring-offset-0 ring-gray-50;
      @apply bg-sky-500;
      @apply border-gray-400/70;
    }
  }

  .checkbox--dark {
    @apply border-gray-700;
    @apply accent-sky-600;

    &:focus {
      @apply ring-gray-700;
      @apply border-gray-500/70;
    }
  }
  
}