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

@layer base {
  html,
  body {
    @apply text-prisma-900 p-0 m-0;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  * {
    box-sizing: border-box;
  }
}

@layer components {
  .form {
    @apply w-full max-w-screen-xs mx-auto flex flex-col sm:grid sm:grid-cols-form sm:items-center gap-4;
  }

  .form-group {
    @apply sm:contents;
  }

  .form-label {
    @apply font-bold flex-1 sm:text-right;
  }

  .form-input {
    @apply bg-prisma-50 w-full rounded py-2 px-3 text-sm;
  }

  .default-button {
    @apply py-2 px-4 bg-prisma-900 text-white font-bold rounded text-sm text-center hover:bg-prisma-800 active:bg-prisma-700 border border-prisma-800;
  }

  .outline-button {
    @apply py-2 px-4 bg-white text-prisma-900 font-bold rounded text-sm text-center hover:bg-gray-100 active:bg-gray-200 border border-gray-100;
  }

  .form-alert-msg {
    @apply col-span-2 bg-red-200 p-4 text-center rounded font-bold text-red-900;
  }

  .form-success-msg {
    @apply col-span-2 bg-green-200 p-4 text-center rounded font-bold text-green-900;
  }
}