@layer components {
/* COLORS */
  .ha-footer .ha-footertext {
    @apply bg-slate-50 text-hamannSlate-900 dark:bg-slate-900 dark:text-white
  }

  .ha-footer .ha-themetoggles {
    @apply bg-slate-200 dark:bg-slate-800 transition-colors duration-300 shadow-inner
  }

  .ha-footer .ha-themetoggles #ha-toggledark:checked ~ .ha-themetoggleslider {
    @apply bg-slate-200 transition-colors duration-300
  }

  .ha-footer .ha-themetoggles #ha-togglebright:checked ~ .ha-themetoggleslider {
      @apply bg-slate-50 transition-colors duration-300
  }

/* STYLES */
  .ha-footer {
    @apply font-sans !text-xs;
  }

  .ha-footer .ha-footertext {
    @apply p-2 px-4 mx-auto max-w-screen-desktop text-right text-sm
  }

  .ha-footer a {
    @apply underline decoration-dotted hover:decoration-solid
  }

  .ha-footer .ha-themetoggles {
    @apply whitespace-nowrap relative px-0.5 rounded-3xl h-4 w-[34px] 
  }

  .ha-footer .ha-themetoggles * {
    @apply float-left
  }

  .ha-footer .ha-themetoggles input[type="radio"] {
    @apply hidden
  }

  .ha-footer .ha-themetoggles label {
    @apply z-10 block w-[11px] h-[11px] my-[3px] mx-[2px] rounded-3xl cursor-pointer text-center
  }

  .ha-footer .ha-themetoggles .ha-themetoggleslider {
    @apply w-[11px] h-[11px] absolute top-[3px] rounded-3xl transition-all duration-100 ease-in-out shadow-md
  }

  .ha-footer .ha-themetoggles #ha-toggledark:checked ~ .ha-themetoggleslider {
      @apply  left-1
  }

  .ha-footer .ha-themetoggles #ha-togglebright:checked ~ .ha-themetoggleslider {
      @apply left-[19px]
  }
}