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

body {
    background-color: #FAFAFA;
}

.button {
   @apply inline-flex items-center justify-center gap-2 rounded-md px-3.5 py-3 text-sm font-semibold text-white transition-all bg-black outline-none cursor-pointer disabled:pointer-events-none hover:bg-black/90;
}

.button:disabled {
   @apply text-gray-400 bg-gray-200 cursor-not-allowed;
}

.button-xs {
   @apply px-2.5 py-2.5 text-xs;
}

button                  .show-when-disabled { display: none; }
button[disabled]        .show-when-disabled { display: initial;}

button                  .show-when-enabled { display: initial; }
button[disabled]        .show-when-enabled { display: none; }


/* Show loading spinner and hide generated reply container when form is busy */
/* body:has(form[aria-busy="true"]) .loading-spinner-container {
  display: block;
}

body:has(form[aria-busy="true"]) #generated_email_container {
  display: none;
} */

.flash-error {
  background-color: #fee2e2;
  color: #991b1b;
}

.flash-notice {
  background-color: #d8eddc;
  color: #00823e;
}

.navigation-item {
   @apply flex gap-2.5 items-center rounded-lg px-3 py-2 text-sm font-semibold hover:bg-gray-150 hover:text-gray-900 hover:cursor-pointer transition duration-300 ease-in-out;
}

.form-label {
   @apply block mb-2 text-sm font-medium text-gray-950;
}

.input-field {
   @apply w-full p-3 border border-gray-300 rounded-md focus:border-gray-400 focus:outline focus:outline-gray-400;
}

.form-label--secondary {
   @apply font-medium text-gray-500;
}

.textarea {
   @apply p-3 border border-gray-300 rounded-md resize-none focus:border-gray-400 focus:outline focus:outline-gray-400;
}

.select {
   @apply p-3 bg-white border border-gray-300 rounded-md focus:border-gray-400 focus:outline focus:outline-gray-400;
}

#generated-reply-wrapper > p {
   @apply mb-4;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 32px;
  background: #ffffff;
  border: 1px solid #e2e5eb;
  border-radius: 12px;
}

@media (max-width: 640px) {
  .card-sign-up {
    background: transparent;
    border: none;
    width: 100%;
  }

  .card {
    padding: 20px 18px;
  }
}

/* Table */
.editable-cell {
   @apply block w-full h-full px-2 py-2 align-top bg-transparent border-none resize-none focus:border-blue-600; 
}