@layer utilities {
  .float-container {
    display: grid;

    /* Label always float (sticky) */
    &.float-always,
    /* Label when input has no value and focused */
    &:focus-within,
    /* Label when input has value and no placeholder */
    &:has(.float-input:not(:placeholder-shown)) {
      & .float-label {
        /*background-color: var(--float-label-background-color);*/
        @apply bg-[var(--float-label-background-color)]
          translate-x-2
          opacity-100
          text-xs
          w-fit
          self-start
          -translate-y-1/2;
      }
    }

    .float-input {
      @apply col-start-1 row-start-1;
    }

    &:not(.float-always) .float-input::placeholder {
      color: transparent;
    }

    /** Placeholder replacement */
    .float-label {
      @apply col-start-1 row-start-1
        opacity-50
        self-center
        /*transition-all duration-200*/;
    }

    &:has(textarea.float-input) .float-label {
      @apply self-start;
    }
  }
}