@layer components {
    .ha-search {
        @apply bg-slate-50
    }

    .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-searchbody {
        @apply pt-4 pr-4 clear-both flex flex-row gap-x-4
    }

    .ha-search .ha-searchbody .ha-letterlist {
        @apply pl-6 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 block border
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistentryheader {
        @apply border-b flex flex-row py-1 px-2 bg-slate-100
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistentryheader .ha-letterlistautopsic {
        @apply text-3xl font-bold grow
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistentryheader .ha-letterlistpills {
        @apply grow-0 
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistletterdata {
        @apply px-2 py-1
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults {
        @apply px-2 py-1
    }

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

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult .ha-searchresultlocation {
        @apply numeric-mediaeval font-semibold text-sm inline-block
    }

    .ha-search .ha-searchbody .ha-letterlist .ha-letterlistentry .ha-letterlistsearchresults .ha-letterlistsearchresult .ha-searchresultpreview {
        @apply inline-block pl-2
    }

    .ha-search .ha-searchbody .ha-filterlist {
        @apply flex flex-col gap-y-5 pb-4 float-right max-w-lg basis-1/3 min-w-0 shrink
    }

    .ha-search .ha-searchbody .ha-filterlist > div {
        @apply border border-slate-200 hover:shadow transition-shadow duration-200  bg-slate-50
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-filtertitle {
        @apply text-2xl px-3 pb-2 pt-3 font-serif leading-none border-b bg-slate-100
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-reversefilter {
        @apply inline-block text-sm ml-2
    }

    /* .ha-search .ha-searchbody .ha-filterlist .ha-gotofilter {
        @apply bg-slate-100
    } */

    /* .ha-search .ha-searchbody .ha-filterlist .ha-gotofilter .ha-filtertitle {
        @apply inline-block border-none
    } */

    .ha-search .ha-searchbody .ha-filterlist .ha-gotofilter form {
        @apply font-sans py-2 px-3 bg-slate-50
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-gotofilter form .ha-gototext {
        @apply inline-block font-sans mr-2
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-gotofilter form input {
        @apply w-14 px-1 border 
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-gotofilter form button {
        @apply float-right inline-block px-2 border bg-slate-50 disabled:bg-gray-200 border-slate-200 hover:border-black disabled:hover:border-slate-200 disabled:text-slate-600
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-zhsearchfilter .ha-zhform {
        @apply py-2 px-3
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-zhsearchfilter .ha-zhform > span {
        @apply whitespace-nowrap
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-zhsearchfilter .ha-zhform input {
        @apply w-14 px-1 border
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-zhsearchfilter .ha-zhform button {
        @apply float-right px-2 border bg-slate-50 border-slate-200 disabled:bg-gray-200 hover:border-black disabled:hover:border-slate-200 disabled:text-slate-600
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-zhsearchfilter .ha-zhform select {
        @apply  px-1
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-searchfilter .ha-searchform {
        @apply py-2 px-3 flex flex-row gap-x-2
    }

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

    .ha-search .ha-searchbody .ha-filterlist .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-slate-600
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-personfilter .ha-personlist {
        @apply max-h-64 overflow-y-auto overflow-x-hidden pb-2
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-personfilter .ha-personlist a {
        @apply block px-3 hover:!bg-slate-200 !transition-none
    }

    .ha-search .ha-searchbody .ha-filterlist .ha-personfilter .ha-personlist a:nth-child(even) {
        @apply block bg-slate-100
    }
}