@layer components {
    /* THEME OPTIONS */

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

    .ha-search .ha-searchhead .ha-activefilterinfo {
       @apply bg-slate-200 dark:bg-slate-800
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult:nth-child(even) {
        @apply bg-slate-100 dark:bg-slate-900
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult:nth-child(odd) {
        @apply bg-slate-50 dark:bg-slate-900
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry {
        @apply  bg-slate-100 dark:bg-slate-900 dark:border-none border-r border-b border-gray-200 
    }

    .ha-search .ha-searchhead .ha-searchnav a.active {
        @apply dark:!text-white hover:dark:!text-white dark:font-bold
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry:hover {
        @apply border-gray-300
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-personfilter .ha-personlist a {
        @apply hover:!bg-slate-200 dark:hover:!bg-slate-800
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-personfilter .ha-personlist a.active {
        @apply dark:!text-white dark:font-bold
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-personfilter .ha-personlist a:nth-child(odd) {
        @apply bg-slate-100 dark:bg-zinc-900
    }

    .ha-search .ha-searchbody .ha-commenthead .ha-letlinks {
        @apply desktop:bg-slate-50 dark:bg-slate-900 dark:text-slate-50
    }

    .ha-search .ha-searchbody .ha-commenthead .ha-letlinks::before {
        @apply bg-hamannSlate-500 dark:bg-slate-500
    }

    .ha-search .ha-searchbody .ha-commenthead .ha-letlinks.ha-expanded-box {
        @apply shadow-md dark:shadow-lg
    }

    .ha-search .ha-btn-collapsed-box {
        @apply hidden desktop:block absolute -top-[0.15rem] cursor-pointer mt-0.5
    }

    .ha-search .ha-searchbody .ha-comment .ha-commenthead .ha-letlinks .ha-hkb {
        @apply text-slate-900 dark:text-white
    }

    .ha-search .ha-searchbody .ha-comment .ha-commenthead .ha-letlinks a {
        @apply hover:text-hamannSlate-900 dark:hover:text-gray-200 no-underline hover:underline
    }

    .ha-search .ha-searchbody .ha-comment .ha-commenthead .ha-letlinks {
        @apply text-slate-700 dark:text-white
    }

    /* NON THEME RULES */
    .ha-search .ha-searchhead {
        @apply pt-9 md:pt-12 px-9 md:px-16 border-b-2 
    }

    .ha-search .ha-searchhead h1 {
        @apply font-bold text-2xl desktop:font-normal desktop:text-5xl mb-6 inline-block font-serif
    }

    .ha-search .ha-searchhead .ha-searchnav {
        @apply font-sans oldstyle-nums
    }

    .ha-search .ha-searchhead .ha-searchnav a {
        @apply mr-3 inline-block
    }

    .ha-search .ha-searchhead .ha-searchnav a.active {
        @apply border-b-4
    }

    .ha-search .ha-searchhead .ha-searchfilter {
        @apply mb-4 md:mb-7
    }

    .ha-search .ha-searchhead .ha-searchfilterinfo {
        @apply border p-2 mb-4 hyphenate text-base max-w-[46rem]
    }
    .ha-search .ha-searchhead .ha-searchfilter form {
        @apply mb-2 max-w-[34rem]
    }

    .ha-search .ha-searchhead .ha-searchfilter .ha-searchform {
        @apply py-1 flex flex-row gap-x-2 
    }

    .ha-search .ha-searchhead .ha-searchfilter .ha-searchform input {
        @apply px-1 border grow min-w-0
    }

    .ha-search .ha-searchhead .ha-searchfilter .ha-includecomments {
        @apply w-full !text-base 
    }

    .ha-search .ha-searchhead .ha-searchfilter .ha-searchform button {
        @apply float-right px-2 border border-slate-200 hover:border-black disabled:bg-gray-200 disabled:hover:border-slate-200 disabled:text-gray-600
    }

    .ha-search .ha-searchhead .ha-activefilterinfo {
        @apply font-sans text-base px-1 rounded my-1 max-w-[34rem]
    }

    .ha-search .ha-searchhead .ha-reversefilter {
        @apply inline-block text-right decoration-dotted underline hover:decoration-solid dark:bg-black
    }

    .ha-search .ha-searchhead .ha-searchfilter .ha-alternativesearches a {
        @apply block text-base underline decoration-dotted hover:decoration-solid
    }

    .ha-search .ha-searchbody {
        @apply pt-6 md:pl-6 md:pr-[24rem] pb-9 md:pb-12 rounded-b-sm
    }

    .ha-search .ha-searchbody .ha-letterlist {
        @apply pb-4 basis-2/3 grow-0
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry:not(:first-child) {
        @apply mt-4
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry {
        @apply rounded-sm block pt-3  transition-all duration-100 
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry:hover {
        @apply transition-all duration-100
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterhead {
        @apply pb-3 px-3 pl-6
    } 

    input, select {
        @apply dark:!bg-zinc-900 dark:border-none
    }

    button {
        @apply dark:!bg-zinc-900 dark:!border-zinc-800
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults {

    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult {
        @apply px-6 py-1 bg-slate-50 flex flex-row gap-x-4 items-baseline
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult .ha-searchresultlocation {
        @apply font-semibold text-sm inline-block shrink-0 flex-nowrap
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult .ha-searchresultpreview {
       
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult .ha-seachresultmarginal {
        @apply text-sm max-w-[32rem] my-1
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult .ha-seachresultmarginal .ha-searchresultcommentpill {
        @apply text-xs px-1.5 rounded-xl text-white bg-hamannSlate-700 inline-block mr-2
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult .ha-seachresultmarginal .ha-marginal a {
        @apply underline decoration-dotted hover:decoration-solid
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult .ha-seachresultmarginal .ha-marginal,
    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult .ha-seachresultmarginal .ha-marginal * {
        @apply !inline hyphenate
    }


    .ha-search .ha-searchbody .ha-commentlist {
        @apply pt-2 md:pt-4 pr-9 pl-4 md:pr-16 md:pl-6 numeric-mediaeval font-serif
    }

    .ha-search .ha-searchbody .ha-commentlist .ha-comment {
        @apply block mb-9 md:mb-12
      }
    
      .ha-search .ha-searchbody .ha-commentlist .ha-comment a {
        @apply underline decoration-dotted hover:decoration-solid
      }
    
      .ha-search .ha-searchbody .ha-commentlist .ha-comment .ha-headcomment {
        @apply desktop:relative block
      }
    
      .ha-search .ha-searchbody .ha-commentlist .ha-comment .ha-subcomment {
        @apply desktop:relative block ml-8 mt-2
      }
    
      .ha-search .ha-searchbody .ha-commentlist .ha-comment .ha-commenthead {
        @apply block
      }
    
      .ha-search .ha-searchbody .ha-commentlist .ha-comment .ha-commenthead .ha-lemma {
        @apply inline font-bold
      }
    
      .ha-search
        .ha-searchbody
        .ha-forschung
        .ha-comment
        .ha-commenthead
        .ha-lemma {
        @apply inline font-normal;
      }
    
      .ha-search .ha-searchbody  .ha-forschung .ha-comment {
        @apply mb-4 md:mb-6 -indent-4 
      }
    
      .ha-search .ha-searchbody .ha-commentlist .ha-comment .ha-commenthead .ha-letlinks {
        @apply inline-block font-normal text-xs md:text-sm leading-snug font-sans caps-allpetite ml-2 mt-1
      }
    
      .ha-search .ha-searchbody .ha-commentlist .ha-comment .ha-commenthead .ha-letlinks::before {
        @apply absolute mt-1 top-[0.1rem] bottom-[0.1rem] left-0 w-0.5 content-['']
      }
    
      .ha-search .ha-searchbody .ha-commentlist
        .ha-comment
        .ha-commenthead
        .ha-letlinks
        .ha-hkb {
        @apply inline
      }
    
      .ha-search .ha-searchbody .ha-commentlist
        .ha-headcomment
        .ha-commenthead
        .ha-letlinks {
        @apply desktop:left-[48rem]
      }
    
      .ha-search .ha-searchbody .ha-commentlist
        .ha-subcomment
        .ha-commenthead
        .ha-letlinks {
        @apply desktop:left-[46rem]
      }
    
    
      .ha-search .ha-searchbody .ha-commentlist .ha-commenthead .ha-letlinks {
        @apply desktop:indent-0 desktop:top-0 desktop:w-80 desktop:block desktop:absolute pl-2
      }
    
      .ha-search .ha-searchbody .ha-commentlist .ha-comment .ha-commenthead .ha-letlinks a {
        @apply hover:text-slate-900
      }
    
      .ha-search .ha-searchbody .ha-commentlist .ha-headcomment .ha-btn-collapsed-box {
        @apply left-[47.6rem]
      }
    
      .ha-search .ha-searchbody .ha-commentlist .ha-subcomment .ha-btn-collapsed-box {
        @apply left-[45.6rem]
      }
    
      .ha-search .ha-searchbody .ha-commentlist .ha-btn-collapsed-box {
        @apply hidden desktop:block absolute -top-[0.15rem] cursor-pointer
      }

}