@layer components {
/* COLORS */
  .ha-tooltiptext {
    @apply shadow-sm bg-slate-50 border-hamannSlate-900 text-hamannSlate-900 dark:text-slate-100 border dark:border-none dark:shadow dark:bg-slate-800
  }

  .ha-tooltip .ha-tooltiptext::after {
    @apply border-t-slate-600 dark:border-t-slate-800 border-l-transparent border-r-transparent border-b-transparent
  }

  .ha-pill {
    @apply rounded bg-gray-200 text-gray-600 dark:bg-black shadow dark:text-gray-200
  }

  /* .ha-pill {
    @apply border-hamannSlate-900 text-hamannSlate-900 dark:text-white dark:bg-slate-800 dark:shadow-md dark:border-slate-400 caps-petite
  } */

  .ha-pill.ha-newpill {
    @apply dark:text-white dark:bg-slate-800 dark:shadow-md dark:border-slate-400
  }

  .ha-pill .ha-cross::before {
    @apply border-b-2 border-hamannSlate-900 dark:border-gray-200
  }

/* STYLES */
  .ha-letterhead {
    @apply flex flex-row
  }

  .ha-letterhead .ha-letternumber {
    @apply flex text-5xl desktop:font-normal desktop:text-6xl mr-4 desktop:mr-6
  }

  .ha-letterhead .ha-letternumber .ha-letternumberinline {
    @apply inline align-middle leading-none
  }

  .ha-letterhead .ha-metadata {
    @apply flex self-end grow flex-col
  }

  .ha-letterhead .ha-metadatastrike {
    @apply flex self-center
  }

  .ha-letterhead .ha-metadata .ha-metadataupperrow {
    @apply flex flex-row leading-snug
  }

  .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-metadatadate {
    @apply flex caps-petite numeric-mediaeval whitespace-nowrap
  }

 .ha-tooltip {
    @apply self-center cursor-default inline-block relative 
  }

  .ha-tooltiptext {
    @apply rounded text-sm px-1 py-0.5 absolute z-10 text-center
  }

  .ha-tooltiptext::after {
    @apply absolute top-full left-1/2
  }

  .ha-pill {
    @apply text-xs px-1 ml-1.5 tracking-normal whitespace-nowrap
  }

  .ha-pill .ha-cross {
    @apply relative inline-block
  }

  .ha-pill .ha-cross::before,
  .ha-pill .ha-cross::after {
    @apply w-full h-0 absolute right-0 top-1/2
  }

  .ha-letterhead .ha-metadata .ha-metadatapersons a {
    @apply hover:decoration-solid rounded decoration-dotted underline decoration-slate-400 hover:decoration-gray-600
  }
}