@layer components {
/* COLORS */
  .ha-letterheader {
    @apply bg-slate-50 dark:bg-slate-900 dark:text-slate-50 border-slate-300 dark:border-slate-50 border-b-2 dark:shadow-xl
  }

  .ha-letterheader .ha-lettertabs a {
    @apply text-slate-700 hover:text-slate-900 dark:text-white dark:hover:text-gray-200
  }

  .ha-letterheader .ha-lettertabs a.active {
    @apply border-b-[3px] border-slate-300 dark:border-slate-50 text-hamannHighlight dark:!text-gray-200 dark:font-bold
  }

  .ha-letterheader .ha-lettermetalinks {
    @apply border-b-2 border-slate-300
  }

  .ha-letterheader .ha-lettermetalinks a {
    @apply text-slate-700 hover:text-slate-900 dark:text-white dark:hover:text-gray-200
  }

  .ha-letterbody {
    @apply bg-slate-50 dark:bg-slate-900 dark:shadow-xl
  }

  .ha-text {
    @apply bg-slate-50 dark:bg-slate-900 border-slate-200  
  }

  .ha-appcontainer.ha-appcontainer-0 .ha-text {
    @apply sm:border-l-2 sm:dark:border-none
  }

  .ha-marginals {
    @apply bg-slate-50 dark:bg-slate-900
  }

  .ha-defaulttab {
    @apply bg-slate-50 dark:bg-slate-900
  }

  .ha-defaulttab .ha-edits .ha-editentries table tr:nth-child(even) {
    @apply bg-slate-100 dark:bg-slate-900
  }

  .ha-linecount.ha-firstline {
    @apply rounded-lg sm:border sm:bg-slate-50 sm:shadow-inner sm:border-slate-600 text-slate-800 dark:text-white sm:dark:bg-slate-800 sm:dark:shadow-md sm:dark:border-slate-400
  }

  .ha-linecount .ha-zhpage,
  .ha-linecount .ha-zhline {
    @apply sm:bg-slate-50 sm:dark:bg-slate-900
  }

  .ha-text .ha-marginal::before {
    @apply bg-hamannSlate-500 dark:bg-slate-500
  } 

  .ha-text .ha-marginalbox {
    @apply bg-slate-50 dark:bg-slate-900
  }

  .ha-text .ha-marginalbox.ha-expanded-box .ha-marginallist {
    @apply shadow-md dark:shadow-lg pb-1 bg-slate-100 dark:bg-slate-600
  }

  .ha-text .ha-btn-collapsed-box {
    @apply text-slate-700 hover:text-slate-900 dark:text-white dark:hover:text-gray-200
  }

/* STYLES */
  .ha-letterheader {
    @apply rounded-t-sm pt-8 md:pt-12 px-6 md:px-16
  }

  .ha-letterheader .ha-letterheadernav {
    @apply mt-9 flex grow
  }

  .ha-letterheader .ha-lettertabs {
    @apply flex grow
  }

  .ha-letterheader .ha-lettertabs a {
    @apply inline-block px-1 mr-1 md:mr-3 cursor-pointer
  }

  .ha-letterheader .ha-lettertabs .ha-marginalsbtn {
    @apply md:hidden;
  }

  .ha-letterheader .ha-lettertabs a.active {
    @apply pointer-events-none 
  }

  .ha-letterheader .ha-lettertabs a:first {
    @apply pl-0
  }

  .ha-letterheader .ha-lettermetalinks {
    @apply self-end 
  }

  .ha-letterheader .ha-lettermetalinks a {
    @apply self-end caps-petite
  }

  .ha-letterheader .ha-lettermetalinks .ha-hkb {
    @apply inline-block caps-allpetite
  }

  .ha-tab {
    @apply max-w-[52rem]
  }

  .ha-tab .ha-appcontainer {
    @apply ml-6 md:ml-16 font-serif numeric-mediaeval py-3
  }

  .ha-appcontainer.ha-appcontainer-0 {
    @apply py-0
  }

  .ha-appcontainer h3 {
    @apply font-bold
  }

  .ha-appcontainer a {
    @apply underline decoration-dotted decoration-slate-800 hover:decoration-solid hover:decoration-slate-900
  }

  .ha-textcontainer {
    @apply flex -ml-6 md:-ml-16 
  }

  .ha-text {
    @apply pt-2 pb-3 max-w-[38rem] desktop:max-w-[52rem] sm:shrink-0 ml-4 sm:ml-12 px-4 relative flow-root font-serif leading-[1.48]  numeric-mediaeval
  }

  .ha-text div {
    @apply inline
  }

  .ha-linecount.ha-firstline {
    @apply hidden sm:inline-block rounded px-1.5 sm:py-0.5 sm:pb-1 sm:leading-none caps-allpetite normal-nums whitespace-nowrap
  }

  .ha-linecount {
    @apply sm:absolute sm:right-full sm:mr-2 sm:text-right text-xs sm:mt-[.35rem] font-sans select-none whitespace-nowrap
  }

  .ha-linecount .ha-zhline {
    @apply hidden sm:inline
  }

  .ha-linecount .ha-zhpage {
    @apply inline-block sm:inline;
  }

  .ha-linecount .ha-zhpage,
  .ha-linecount .ha-zhline {
    @apply px-1 sm:pb-1 caps-allpetite normal-nums
  }

  .ha-linecount .ha-hiddenlinecount {
    @apply !hidden
  }

  .ha-text .ha-marginal::before {
    @apply absolute top-[0.2rem] bottom-[0.1rem] left-[0.1rem] w-0.5 content-['']
  } 

  .ha-text .ha-marginalbox {
    @apply hidden overflow-hidden select-none hover:select-auto hyphenate pl-1 md:inline-block absolute left-full ml-6 desktop:ml-10 mt-1 w-[16rem] desktop:w-[28rem] text-sm leading-tight rounded-sm font-sans 
  }

  .ha-text .ha-marginalbox .ha-marginallist {
    @apply text-sm leading-tight flex flex-wrap gap-x-6 pr-1
  }

  .ha-text .ha-marginalbox .ha-marginallist .ha-marginal {
    @apply pl-2 inline relative
  }

  .ha-text .ha-marginalbox .ha-marginallist .ha-marginal a {
    @apply !underline decoration-dotted hover:decoration-solid 
  }

  .ha-text .ha-marginalbox .ha-marginallist .ha-marginal,
  .ha-text .ha-marginalbox .ha-marginallist .ha-marginal * {
    @apply min-h-0 min-w-0 overflow-ellipsis overflow-hidden
  }

  .ha-text .ha-btn-collapsed-box {
    @apply absolute left-full ml-4 desktop:ml-[1.7rem] hidden md:inline-block cursor-pointer leading-none mt-[0.2rem]
  }

  .ha-minwidth .ha-btn-collapsed-box {
    @apply !-ml-2
  }

  .ha-defaulttab .ha-hands {
    @apply ml-6 md:ml-16
  }

  .ha-defaulttab .ha-hands .ha-handstitle {
    @apply font-bold
  }

  .ha-defaulttab .ha-hands .ha-handentries .ha-handfrom,
  .ha-defaulttab .ha-hands .ha-handentries .ha-handto {
    @apply inline text-sm font-semibold whitespace-nowrap
  }

  .ha-defaulttab .ha-hands .ha-handentries .ha-handperson {
    @apply inline pl-4 whitespace-nowrap
  }

  .ha-defaulttab .ha-edits .ha-editstitle {
    @apply font-bold
  }

  .ha-defaulttab .ha-edits .ha-editentries .ha-editfromto {
    @apply whitespace-nowrap
  }

  .ha-defaulttab .ha-edits .ha-editentries .ha-editfrom,
  .ha-defaulttab .ha-edits .ha-editentries .ha-editto {
    @apply inline text-sm font-semibold whitespace-nowrap
  }

  .ha-defaulttab .ha-edits .ha-editentries .ha-editreference {
    @apply whitespace-nowrap
  }

  .ha-defaulttab .ha-edits .ha-editentries .ha-editreference div {
    @apply inline
  }

  .ha-defaulttab .ha-edits {
    @apply max-w-4xl ml-6 md:ml-16
  }

  .ha-defaulttab .ha-edits .ha-editentries {
    @apply md:-mr-36
  }

  .ha-defaulttab .ha-edits .ha-editstitle {
    @apply font-bold
  }

  .ha-defaulttab .ha-edits .ha-editsinfo {
    @apply pb-4 hyphenate
  }

  .ha-defaulttab .ha-edits .ha-editentries tr td {
    @apply align-text-top
  }

  .ha-defaulttab .ha-edits .ha-editentries .ha-editreas div {
    @apply inline font-sans
  }

  .ha-defaulttab .ha-edits .ha-editentries .ha-editfromto {
    @apply pr-1 pl-1
  }

  .ha-defaulttab .ha-edits .ha-editentries .ha-editreference {
    @apply border-r-2 pl-1 pr-3 text-sm
  }

  .ha-defaulttab .ha-edits .ha-editentries .ha-editreference br {
    @apply hidden
  }

  .ha-defaulttab .ha-edits .ha-editentries .ha-editreas {
    @apply pl-3 w-full
  }

  .ha-defaulttab .ha-edits .ha-editentries .ha-editreas .ha-zh * {
    @apply !font-serif
  }

  .ha-minwidth .ha-text {
    @apply min-w-[44rem] desktop:min-w-[52rem]
  }

  .ha-minwidth .ha-text .ha-alignright {
    @apply float-right mr-[20%]
  }

  .ha-minwidth .ha-aligncenter {
    @apply absolute left-1/3 whitespace-nowrap -translate-x-1/2
  } 

  .ha-minwidth .ha-marginalbox {
    @apply !ml-1
  }
}

.ha-lettertext .ha-marginalbox:before {
    content: "";
  }
  
  .ha-lettertext .ha-marginalbox .ha-marginal::after {
    content: "";
  }
  
  .ha-lettertext .ha-marginalbox .ha-marginal:last-of-type::after {
    content: "";
  }

  
.ha-tradzhtext .ha-marginalbox.ha-collapsed-box .ha-marginallist .ha-marginal,
.ha-lettertext .ha-marginalbox.ha-collapsed-box .ha-marginallist .ha-marginal {
    display: -webkit-inline-box;
    -webkit-box-orient: vertical;
}

.ha-additions .ha-edits .ha-editentries tr td:nth-of-type(2)::after {
    content: "";
}

.ha-text::after {
    content: "";
    display: table;
    clear: both;
}