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

.turbo-progress-bar {
  visibility: hidden;
}

@layer components {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-light mb-2 text-gray-800;
  }

  h1 {
    @apply text-5xl;
  }

  h2 {
    @apply text-4xl;
  }

  h3 {
    @apply text-3xl;
  }

  h4 {
    @apply text-2xl;
  }

  h5 {
    @apply text-xl;
  }

  h6 {
    @apply text-lg;
  }

  .btn {
    @apply rounded-lg py-3 px-6 text-white inline-block font-medium cursor-pointer text-center;
  }

  .btn-lg {
    @apply text-lg;
  }

  .btn-default {
    @apply bg-gray-200 text-gray-900;
  }

  .message {
    @apply m-3;
  }

  .message-container {
    @apply p-3 px-4 bg-white rounded-2xl inline-block text-left shadow;
    max-width: 80%;
  }

  .message-container p {
    @apply mb-2;
  }

  .message-container p:last-child {
    @apply mb-0;
  }

  .message--user {
    @apply text-right;
  }

  .message--user .message-container {
    @apply bg-brand text-white;
  }

  .message--assistant {
    @apply text-left;
  }

  .message-timestamp {
    @apply py-1 text-xs opacity-50;
  }

  .field {
    @apply mb-3;
  }

  [disabled] {
    @apply opacity-50;
  }

  label {
    @apply font-bold block uppercase;
  }

  .notice {
    @apply bg-green-100 text-green-900 px-4 py-3 rounded mb-3;
  }

  .alert {
    @apply bg-red-100 text-red-900 px-4 py-3 rounded mb-3;
  }

  .hp-field {
    @apply !hidden;
  }

  #onboarding-screen label {
    @apply mb-2 text-2xl text-center;
  }

  .table td {
    @apply px-3 py-2;
  }

  /* Devise */
  .devise input[type="submit"] {
    @apply w-full;
  }

  #error_explanation h2 {
    @apply text-lg;
  }

  /* Terms and Privacy */
  .terms p,
  .privacy p {
    @apply mb-6;
  }

  ul {
    @apply list-disc ml-4 mb-6;
  }

  [multiple],
  [type="date"],
  [type="datetime-local"],
  [type="email"],
  [type="month"],
  [type="number"],
  [type="password"],
  [type="search"],
  [type="tel"],
  [type="text"],
  [type="time"],
  [type="url"],
  [type="week"],
  input:where(:not([type])),
  select,
  textarea {
    @apply block w-full rounded border-gray-300 shadow-inner focus:ring-primary-700 focus:border-primary-700;
  }

  input[type="submit"] {
    @apply btn;
  }

  .bg-gradient-primary {
    background: linear-gradient(135deg, #0097b2, #7ed957);
  }

  .text-gradient-primary {
    @apply bg-gradient-primary;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .btn-gradient-primary {
    @apply bg-gradient-primary text-white;
  }

  .btn-primary {
    @apply bg-primary-700 text-white;
  }

  .page-heading {
    @apply text-center text-3xl mt-8 mb-6;
  }

  /* White label */
  .btn-brand {
    @apply bg-brand text-white;
  }

  .customer {
    [multiple],
    [type="date"],
    [type="datetime-local"],
    [type="email"],
    [type="month"],
    [type="number"],
    [type="password"],
    [type="search"],
    [type="tel"],
    [type="text"],
    [type="time"],
    [type="url"],
    [type="week"],
    input:where(:not([type])),
    select,
    textarea {
      @apply focus:ring-brand focus:border-brand;
    }
  }
}
/*
 * 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.
 *


 */