/* fx.css · micro/field-float, the label floats up and the underline draws · owner: Lizzy East · all rights reserved */

/* Each field (data-fx-field) holds an input or textarea, then its real <label for>. While
   the field is empty and unfocused the label rests inside it, like a placeholder;
   focus or any value lifts it above, smaller, and an accent underline draws from the
   left while the field has focus. The input needs placeholder=" " (one space) so CSS
   can tell when it is empty. CSS only; with motion off the same looks arrive at once. */
[data-fx~="micro/field-float"] { display: grid; gap: var(--fx-field-gap, 1.6rem); }
[data-fx~="micro/field-float"] [data-fx-field] {
  position: relative;
  display: grid;
  padding-top: 1.1rem;
}
[data-fx~="micro/field-float"] [data-fx-field] > :is(input, textarea) {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--fx-field-line, #6a7080);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
[data-fx~="micro/field-float"] [data-fx-field] > textarea { min-height: 6.5rem; resize: vertical; }
[data-fx~="micro/field-float"] [data-fx-field] > :is(input, textarea):focus-visible {
  outline: none;
  border-bottom-color: var(--fx-field-accent, #2340ff);
}
[data-fx~="micro/field-float"] [data-fx-field] > :is(input, textarea)::placeholder { color: transparent; }
[data-fx~="micro/field-float"] [data-fx-field] > label {
  position: absolute;
  top: 1.75rem;
  left: 0;
  max-width: 100%;
  color: var(--fx-field-soft, #4a4f5e);
  line-height: 1.2;
  transform-origin: 0 0;
  pointer-events: none;
}
[data-fx~="micro/field-float"] [data-fx-field] > :is(input, textarea):is(:focus, :not(:placeholder-shown), :autofill) + label {
  translate: 0 -1.75rem;
  scale: var(--fx-field-scale, 0.78);
}
[data-fx~="micro/field-float"] [data-fx-field] > :is(input, textarea):focus + label { color: var(--fx-field-accent, #2340ff); }
/* The underline that draws: 2px of accent over the resting line. */
[data-fx~="micro/field-float"] [data-fx-field]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--fx-field-accent, #2340ff);
  transform-origin: 0 50%;
  scale: 0 1;
  pointer-events: none;
}
[data-fx~="micro/field-float"] [data-fx-field]:focus-within::after { scale: 1 1; }
@media (prefers-reduced-motion: no-preference) {
  [data-fx~="micro/field-float"] [data-fx-field] > label {
    transition: translate var(--fx-field-dur, 260ms) var(--fx-ease), scale var(--fx-field-dur, 260ms) var(--fx-ease);
  }
  [data-fx~="micro/field-float"] [data-fx-field]::after { transition: scale var(--fx-field-draw, 420ms) var(--fx-ease); }
}