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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer components {
  .card {
    @apply flex relative rounded-lg bg-white p-2 text-sm max-w-[235px];
    box-shadow:
      0 0 0 1px rgb(0 0 0 / 0.02),
      0 0.2em 1.6em -0.8em rgb(0 0 0 / 0.2),
      0 0.4em 2.4em -1.2em rgb(0 0 0 / 0.3),
      0 0.4em 0.8em -1.2em rgb(0 0 0 / 0.4),
      0 0.8em 1.2em -1.6em rgb(0 0 0 / 0.5),
      0 1.2em 1.6em -2.0em rgb(0 0 0 / 0.6);
  }

  .money-label {
    @apply font-serif font-semibold text-sm;
  }

  .money-value {
    @apply font-mono tracking-tight text-sm;
  }

  .money-positive {
    @apply text-green-600;
  }

  .money-negative {
    @apply text-red-500;
  }

  .bg-money-positive {
    @apply bg-green-600;
  }

  .bg-money-negative {
    @apply bg-red-500;
  }

  .divider {
    @apply border-t border-gray-300 my-2;
  }

  .section-heading-button {
    @apply text-sm text-purple-600 border border-purple-600 rounded-full px-3 py-1 hover:bg-purple-50;
  }

  .card-button {
    @apply text-xs text-white bg-tertiary border border-tertiary rounded-full px-2 py-1;
  }

  .form-radio-button {
    @apply text-center text-sm text-purple-600 border border-purple-600 rounded px-3 py-1 hover:bg-purple-50
           peer-checked:bg-purple-700 peer-checked:text-white;
  }
}
/*
 * 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.
 *


 */

.debug {
  turbo-frame {
    border: 1px dashed red;
    display: block;

    &::before {
      content: "Frame #" attr(id) " src=" attr(src) " loading=" attr(loading);
      font-size: 0.75rem;
      position: relative;
      padding: 0.25rem;
      border: 1px dashed red;
      background: white;
    }
  }
}