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

@layer components {
  textarea.input {
    @apply textarea textarea-bordered input-md;
    height: auto;
  }
  .checkbox {
    @apply bg-transparent;
  }

  table.rounded-md thead th:first-child {
    @apply rounded-tl-md;
  }
  table.rounded-md thead th:last-child {
    @apply rounded-tr-md;
  }

  .btn {
    /* The button would "pop" on load, so we remove the fancier animation */
    @apply animate-none;
  }

  .table-td {
    @apply px-6 py-4 whitespace-nowrap text-sm;
  }

  .mermaid > svg {
    @apply max-w-full mx-auto;
  }
}

img[alt]:after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  font-weight: 300;
  line-height: 2;
  text-align: center;
  content: attr(alt);
}
/* [data-theme="darkff"] .bg-base {
    background-color: black;
  }
  [data-theme="light"] .bg-base {
    background-color: rgb(255, 255, 255);
  } */
