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

@layer components {
  .transparent-input {
    @apply bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent focus:outline-none focus:ring-0 focus:border-none outline-none ring-0 border-none autofill:shadow-[inset_0_0_0px_1000px_#4C1D95] autofill:[-webkit-text-fill-color:white];
  }

  .transparent-input:-webkit-autofill,
  .transparent-input:-webkit-autofill:hover,
  .transparent-input:-webkit-autofill:focus,
  .transparent-input:-webkit-autofill:active {
    @apply shadow-[inset_0_0_0px_1000px_transparent];
    -webkit-text-fill-color: currentcolor !important;
  }
}

@layer base {

  .text-editor-content ol,
  .text-editor-content ul,
  .text-editor-content menu {
    list-style: revert;
    margin: revert;
    padding: revert;
  }

  .text-editor-content h1 {
    font-size: 2em;
    font-weight: bold;
    margin: 0.67em 0;
    color: initial;
  }

  .text-editor-content h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.83em 0;
    color: initial;
  }

  .text-editor-content h3 {
    font-size: 1.17em;
    font-weight: bold;
    margin: 1em 0;
    color: initial;
  }

  .text-editor-content h4 {
    font-size: 1em;
    font-weight: bold;
    margin: 1.33em 0;
    color: initial;
  }

  .text-editor-content h5 {
    font-size: 0.83em;
    font-weight: bold;
    margin: 1.67em 0;
    color: initial;
  }

  .text-editor-content h6 {
    font-size: 0.67em;
    font-weight: bold;
    margin: 2.33em 0;
    color: initial;
  }

  .text-editor-content img {
    display: inline;
    max-width: none;
    height: auto;
  }
}