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

@layer components {
  .container {
    @apply w-full max-w-7xl mx-auto px-4 md:px-6 py-6 md:py-8 lg:py-12;
  }
  .container.-lg {
    @apply w-full max-w-7xl mx-auto px-4 md:px-6 py-12 md:py-24 lg:py-32;
  }

  .link {
    @apply text-gray-700 hover:text-gray-800 underline hover:no-underline;
  }

  /* Form validation error styles */
  .field_with_errors > input,
  .field_with_errors > textarea,
  .field_with_errors > select {
    @apply border-rose-400;
  }

  /* API Documentation prose styles */
  .prose code {
    @apply bg-gray-100 rounded px-1 py-0.5 text-sm font-mono;
  }
  .prose pre {
    @apply bg-gray-900 text-gray-100 rounded-lg p-4 overflow-x-auto;
  }
  .prose pre code {
    @apply bg-transparent text-gray-100 p-0;
  }
}

/* Print styles for shipping labels */
@media print {
  /* Remove page margins */
  @page {
    margin: 2cm;
    size: auto;
  }
}
/*
 * 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.
 *


 */