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

@layer components {
  .btn {
    @apply text-center rounded-xl;
  }

  .btn-primary {
    @apply py-2 px-4 bg-primary-500 text-white border-primary-500 border;
  }

  .btn-secondary {
    @apply py-2 px-4 bg-white text-primary-500 border-primary-500 border;
  }

  .input {
    @apply w-full rounded-sm;
  }

  .field_with_errors .input, .field_with_errors input {
    @apply border-secondary-700;
  }

  select, input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], input[type="url"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="week"], input[type="time"] {
    @apply w-full rounded-lg border border-gray-100 bg-gray-100
      focus:ring-primary-500 focus:border-primary-500;
  }

  input[type="checkbox"], input[type="radio"] {
    @apply rounded-sm text-primary-500
      focus:ring-primary-500 focus:border-primary-500;
  }

  input[readonly] {
    @apply bg-white border-gray-100 focus:ring-gray-100 focus:border-gray-100 cursor-not-allowed;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */