@layer components {
/* COLORS */
  body {
    @apply text-black dark:text-white dark:bg-gray-800 dark:bg-none
  }

  .ha-added,
  .ha-added *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
    @apply bg-slate-300 dark:bg-slate-600
  }

  .ha-note,
  .ha-note *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
    @apply text-slate-700 dark:text-slate-500
  }

  .ha-ful,
  .ha-ful *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
    @apply border-black dark:border-white
  }

  .ha-tul,
  .ha-tul *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
    @apply border-black dark:border-white
  }

  .ha-diagdel::before {
    @apply border-black dark:border-white
  }

  .ha-lineline {
    @apply border-black dark:border-white
  }

  .active {
    @apply !text-hamannHighlight dark:!text-black
  }

  .active:hover {
    @apply !text-hamannHighlight dark:!text-gray-800
  }

/* STYLES */
  * {
    @apply transition-colors duration-100
  }

  .strikethrough {
    @apply line-through
  }

  body {
    @apply text-base desktop:text-lg w-full h-full;
  }

  .active {
    @apply  pointer-events-none
  }

  .hide {
    @apply !hidden
  }

  .ha-zhbreak {
    @apply hidden sm:inline
  }

  .ha-up {
    @apply -top-3 relative
  }

  .ha-bzg {
    @apply !font-serif !text-xs !font-semibold
  }

  .ha-text {
    @apply inline
  }

  .ha-title {
    @apply inline italic
  }

  .ha-insertedlemma {
    @apply inline
  }

  .ha-serif {
    @apply font-serif
  }

  .ha-aq,
  .ha-aq *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
    @apply font-sans
  }

  .ha-ul,
  .ha-ul *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
    @apply underline
  }

  .ha-del,
  .ha-del *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-diagdel, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
    @apply inline line-through
  }

  .ha-hand,
  .ha-hand *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
    @apply font-classy text-[0.9rem]
  }

  .ha-added,
  .ha-added *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
    @apply px-0.5 rounded-sm
  }

  .ha-note,
  .ha-note *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
    @apply italic
  }

  .ha-emph *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
    @apply italic
  }

  .ha-sup,
  .ha-sup *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
    @apply relative -top-[0.3em] text-[80%]
  }

  /* TODO: Something dooesnt work here */
  .ha-super,
  .ha-super *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
    @apply numeric-normal relative text-xs leading-none align-baseline -top-[0.3em]
  }

  .ha-sub,
  .ha-sub *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
    @apply relative text-xs leading-none align-baseline -bottom-[0.25em]
  }

  .ha-ful,
  .ha-ful *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
    @apply inline border-b pb-[2px]
  }

  .ha-dul,
  .ha-dul *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
    @apply underline decoration-double
  }

  .ha-tul,
  .ha-tul *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
    @apply underline border-b-[3px] border-double
  }

  .up {
    @apply relative -top-[0.5em]
  }

  .ha-alignright {
    @apply float-right
  }

  .ha-aligncenter {
    @apply absolute left-[45%] whitespace-nowrap -translate-x-1/2
  }

  .ha-lineline {
    @apply border-t w-1/3 mx-40 mt-[0.6rem] absolute
  }

  .ha-sal {
    @apply inline-block ml-6
  }

  .ha-letlink {
    @apply caps-allpetite
  }

  /* Classes for indents */
  .ha-indent-1 {
    @apply pl-2 sm:pl-4
  }

  .ha-indent-2 {
    @apply pl-4 sm:pl-8
  }

  .ha-indent-3 {
    @apply pl-6 sm:pl-12
  }

  .ha-indent-4 {
    @apply pl-8 sm:pl-16
  }

  .ha-indent-5 {
    @apply pl-10 sm:pl-20
  }

  .ha-indent-6 {
    @apply pl-20 sm:pl-44
  }

  .ha-indent-7 {
    @apply pl-32 sm:pl-64
  }

  .ha-collapsed-box,
  .ha-collapsed-box * {
    @apply z-0 overflow-hidden min-w-0 min-h-0 overflow-ellipsis cursor-default
  }

  .ha-expanded-box {
    @apply pb-1 z-[1000] !h-auto !max-h-screen
  }
}

  .ha-insertion::before {
    content: "\2E02";
  }

  .ha-insertion::after {
    content: "\2E03";
  }

  .ha-nr::before {
    content: " \200E\25E6";
  }
  
  .ha-nr::after {
    content: " \200E\25E6";
  }
  
  .ha-added::before {
    content: "";
  }
  
  .ha-added::after {
    content: "";
  }
  
  .ha-note::before {
    content: "";
  }
  
  .ha-note::after {
    content: "";
  }
  
  .ha-bzg::after {
    content: "]";
  }

  * {
    scroll-behavior: smooth;
    text-decoration-skip-ink: all;
  }
  
  html {
    overflow-y: scroll;
  }

  body {
    background-image: url("../img/subtlenet2.png");
    background-repeat: repeat;
  }  

  .ha-diagdel {
    text-decoration: none !important;
    text-decoration-line: none !important;
    position: relative;
    display: inline-block !important;
  }
  
  .ha-diagdel::before,
  .ha-diagdel::after {
    content: "";
    width: 100%;
    height: 0%;
    position: absolute;
    right: 0;
    bottom: 1.4ex;
  }
  
  .ha-diagdel::before {
    border-width: 1px;
    border-style: solid;
    -webkit-transform: skewY(-36deg);
    transform: skewY(-36deg);
  }
  
  .ha-del .ha-del,
  .ha-del .ha-del *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
    -moz-text-decoration-style: double;
    -webkit-text-decoration-style: double !important;
    text-decoration-thickness: 1px;
    text-decoration-style: double;
  }
  
  .ha-del .ha-del .ha-ul,
  .ha-ul .ha-del .ha-del,
  .ha-del .ha-ul .ha-del {
    text-decoration: line-through underline;
    -moz-text-decoration-style: double;
    -webkit-text-decoration-style: double !important;
    text-decoration-thickness: 1px;
    text-decoration-style: double;
  }
  
  .ha-del .ha-ul,
  .ha-ul .ha-del {
    text-decoration: line-through underline;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
    -webkit-text-decoration-skip-ink: auto;
  }