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


@layer components {
  .responsive-width {
    /* TODO: remove or add other widths as we implement wider versions */
    @apply mx-auto max-w-[425px];
  }

  input:disabled, select:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  .cca-input {
    @apply block w-full mt-2 mb-2 rounded-md hover:border-slate-700;
    @apply focus:border-blue-500;
  }

  .cca-buttony-select {
    @apply block rounded-md flex gap-3 items-center border;
    @apply hover:border-slate-500 cursor-pointer select-none;
    @apply focus-within:border-blue-500;
    @apply p-3 mb-3;
  }

  .cca-buttony-select:has(:checked) {
    @apply border-slate-700;
  }

  .cca-buttony-select:has(:disabled) {
    @apply border-slate-200 text-slate-400;
  }

  .cca-button {
    @apply text-center p-4 bg-blue-600 disabled:hover:bg-blue-600 hover:bg-blue-500 active:scale-[.99] text-white cursor-pointer disabled:cursor-default font-bold rounded-md select-none;
  }

  .cca-danger-link {
    @apply inline-block px-2 py-1 text-orange-800 border-orange-800 border rounded cursor-pointer bg-white text-sm hover:bg-orange-700 hover:text-white;
  }

  .cca-small-button {
    @apply inline-block px-2 py-1 text-blue-400 border-blue-400 border rounded cursor-pointer bg-white text-sm hover:bg-blue-400 hover:text-white;
  }

  .cca-dummy-button {
    @apply text-center p-4 border text-blue-400 border-blue-400 rounded-md;
  }

  .cca-pricing-table td {
    @apply py-2 border-dashed border-t;
  }

  .cca-pricing-table tr:first-child td {
    @apply border-t-0;
  }

  .cca-pricing-table-total td {
    @apply border-solid border-slate-400;
  }

  nav a, main p a, main td a, footer a {
    @apply text-blue-700 hover:underline;
  }

  main h1 {
    @apply text-cca-red text-xl md:text-2xl font-medium mb-3;
  }

  main h2 {
    @apply text-cca-red text-lg;
  }

  main h3 {
    @apply font-medium text-lg mb-3;
  }

  .tracked-out {
    @apply uppercase tracking-wide
  }

  main h4 {
    @apply text-cca-red font-bold mb-3 tracked-out;
  }

  main p {
    @apply pb-3
  }
}
/*
 * 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.
 *


 */


/* Set base size */

body {
  font-size: 14px;
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}