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

/*

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

*/

@layer utilities {
  .bg-container {
    @apply bg-white text-gray-900;
    @apply dark:bg-gray-900 dark:text-white;
  }

  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white rounded font-bold;
  }

  .btn-primary-icon {
    @apply btn-primary !p-2 h-8 flex gap-2 items-center;
  }
}

body {
  @apply bg-container;
}

body * {
  @apply border-gray-200 dark:border-gray-700;
  @apply divide-gray-200 dark:divide-gray-700;
}

a.link {
  @apply text-blue-500 font-bold;
}

button.link {
  @apply text-blue-500 font-bold;
}

h1,
h2,
h3 {
  @apply font-bold;
}

h1 {
  @apply text-xl;
}

h2 {
  @apply text-lg;
}

h3 {
  @apply text-base;
}

.form-wrapper {
  @apply p-4 rounded border flex flex-col gap-4 justify-start w-full;

  & .row {
    @apply grid gap-1;
  }

  & .inline-row {
    @apply flex gap-2 items-center;
  }

  label {
    @apply text-gray-500 block text-sm;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"] {
    @apply border block rounded px-2 py-0.5 w-full;
    @apply dark:!bg-gray-950 dark:text-white dark:[color-scheme:dark];
  }

  input[type="submit"] {
    @apply max-w-36 px-2 py-1 bg-blue-500 text-white rounded font-bold cursor-pointer;
  }

  select {
    @apply border block rounded px-2 py-0.5 w-full;
    @apply dark:!bg-gray-950 dark:text-white dark:[color-scheme:dark];
  }

  textarea {
    @apply border block rounded px-2 py-0.5 w-full;
    @apply dark:!bg-gray-950 dark:text-white dark:[color-scheme:dark];
  }
}

html.dark {
  /* Fix saved password colored form fields in Chrome */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #000000;
  }
}

.flash {
  @apply px-4 py-2 rounded border;
}

.flash.notice {
  @apply bg-blue-100 text-blue-600 border-blue-300 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800;
}

.flash.alert {
  @apply bg-red-100 text-red-600 border-red-300 dark:bg-red-950 dark:text-red-300 dark:border-red-800;
}

.tag {
  @apply rounded border;
}

.tag-sm {
  @apply tag px-1 text-xs;
}