@layer components {
/* COLORS */


/* STYLES */
  .ha-adminuploadfields {
    @apply flex flex-row flex-wrap gap-x-4 gap-y-4
  }

  .ha-adminuploadfields .ha-uploadfield {
    @apply block shrink-0 grow bg-slate-50 rounded shadow basis-64 max-w-xs
  }

  .ha-adminuploadfields .ha-uploadfield:hover {
    @apply brightness-110
  }

  .ha-adminuploadfields .ha-uploadfield.active {
    @apply !text-black brightness-110 shadow-inner
  }

  .ha-adminuploadfields .ha-uploadfield .ha-uploadfieldname {
    @apply px-3 pt-2 pb-1
  }

  .ha-adminuploadfields .ha-uploadusedfiles {
    @apply text-sm whitespace-nowrap overflow-hidden text-ellipsis w-auto bg-slate-200 border-t border-slate-300 bg-opacity-30 px-2 py-0.5 
  }

  .ha-adminuploadfields .ha-uploadusedfiles.ha-uploadusedfilesnotfound {
    @apply bg-slate-500 border-slate-500
  }

  .ha-adminuploadfields .ha-uploadpublishforms {
    @apply flex flex-row gap-x-4 grow
  }

  .ha-adminuploadfields .ha-uploadform {
    @apply bg-slate-50 rounded shadow grow relative 
  }

  .ha-adminuploadfields .ha-uploadform .ha-uploadtext {
    @apply text-center
  }

  .ha-adminuploadfields .ha-uploadform .ha-lds-ellipsis {
    @apply left-1/2 -ml-[20px]
  }

  .ha-adminuploadfields .ha-uploadform .ha-uploadfilelabel {
    @apply inline-block px-4 py-1 pt-2 cursor-pointer w-full h-full hover:bg-slate-100
  }

  .ha-adminuploadfields .ha-uploadform .ha-uploadmessage {
    @apply text-sm bg-slate-700 bg-opacity-30 px-1 rounded-sm
  }

  .ha-adminuploadfields .ha-publishbutton  {
    @apply inline-block px-2 py-1 pt-2 cursor-pointer w-full h-full bg-slate-50 shadow shrink hover:bg-slate-100
  }

  .ha-adminuploadfields .ha-publishbutton .ha-publishtext {
    @apply text-center
  }

  .ha-adminuploadfields .ha-publishbutton .ha-publishmessage {
    @apply text-sm bg-slate-700 bg-opacity-30 px-1 rounded-sm
  }

  .ha-uploadheader {
    @apply bg-slate-50 w-full mt-4 px-16 pt-12 pb-8 flex flex-row
  }

  .ha-uploadheader h1 {
    @apply text-5xl
  }

  .ha-uploadcontainer {
    @apply w-full bg-slate-50 flex flex-col gap-y-2
  }

  .ha-uploadcontainer .ha-publishfilelist {
    @apply px-16 mb-8
  }

  .ha-uploadcontainer .ha-publishfilelist .ha-publishfilelisttitle {
    @apply text-xl mb-2
  }

  .ha-uploadcontainer .ha-publishfilelist td {
    @apply align-text-top pr-6
  }

  .ha-uploadcontainer .ha-publishfilelist .ha-publishfilelabel {
    @apply relative mt-4 ml-6 rounded-md px-3 border-2 border-blue-600 hover:border-2 hover:shadow active:shadow-inner hover:border-blue-800 cursor-pointer float-right;
  }

  .ha-uploadcontainer .ha-availablefiles {
    @apply px-16 border border-slate-200 hover:border-slate-800 py-2 cursor-pointer select-none
  }

  .ha-uploadcontainer .ha-availablefiles .ha-availablefilestitle {
    @apply text-2xl
  }

  .ha-uploadcontainer .ha-availablefiles .ha-usedfilelist {

  }

  .ha-filesheader {
    @apply mb-4
  }

  .ha-availablefileslist {
    @apply px-16 pt-4
  }

  .ha-uploadcontainer .ha-errorswarnings {
    @apply flex flex-row gap-x-2
  }

  .ha-uploadcontainer .ha-errorswarnings .ha-criticalerrors,
  .ha-uploadcontainer .ha-errorswarnings .ha-warnings {
    @apply basis-1/2 min-w-[40%] min-h-[400px] overflow-x-hidden overflow-y-scroll grow shrink
  }

  .ha-uploadcontainer .ha-errorswarnings .ha-criticalerrors {
    @apply bg-red-200
  }

  .ha-uploadcontainer .ha-errorswarnings .ha-warnings {
    @apply bg-orange-200
  }

  .ha-uploadcontainer .ha-crossfilechecking {
    @apply w-full bg-cyan-200 grow shrink-0 h-full min-h-[400px]
  }

  .ha-uploadcontainer .ha-hamannfilechooser {
    @apply px-16 pb-16 
  }

  .ha-uploadcontainer .ha-setendyearform {
    @apply px-16 pb-16 float-right
  }

  .ha-uploadcontainer .ha-setendyearform .ha-setendyearbutton {
    @apply mt-4 ml-6 rounded-md px-3 border-2 border-blue-600 hover:border-2 hover:shadow active:shadow-inner hover:border-blue-800 cursor-pointer
  }

  /* Classes for FileList Component */
  .ha-filelistfieldset {
    
  }

  .ha-filelistfieldset .ha-filelistlegend {
    @apply mb-2 text-xl
  }

  .ha-selectfilesform {
    
  }

  .ha-selectfilesform .ha-filelistfile {
    @apply flex flex-row gap-x-4 px-1 items-center
  }

  .ha-selectfilesform .ha-filelistfile:nth-child(even) {
    @apply bg-slate-100
  }

  .ha-selectfilesform .ha-filelistlist {
    @apply h-96 overflow-x-hidden overflow-y-scroll pr-4
  }

  .ha-selectfilesform .ha-filelistfile .ha-filelistname {
    @apply font-mono
  }

  .ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction {
    @apply text-sm
  }

  .ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction .ha-filelistproduction {
    @apply inline-block border rounded-md text-teal-600 border-teal-600 px-2 mr-2
  }

  .ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction .ha-filelistused {
    @apply inline-block border rounded-md text-indigo-600 border-indigo-600 px-2 
  }

  .ha-selectfilesform .ha-filelistfile .ha-filelistmodified {
    @apply grow text-right
  }

  .ha-selectfilesform .ha-filelistoutput {
    @apply mt-4 ml-6 
  }

  .ha-selectfilesform .ha-filelistbutton {
    @apply mt-4 ml-6 rounded-md px-3 border-2 border-blue-600 hover:border-2 hover:shadow active:shadow-inner hover:border-blue-800 cursor-pointer float-right;
  }
}