._inputContainer_1b42v_2 {
  /*
   * Invisible pass-through everywhere by default, so nothing about Input's layout
   * changes for existing (non-table) callers. `Table.vue`'s `.table > *` cell rule is
   * more specific and overrides this to `display: flex` for its own direct children,
   * turning this into a real box that Table can force to a uniform row height and
   * vertically center — instead of that height/centering landing directly on the
   * visual field box itself (which has no room to be its own natural, smaller height).
   */
  display: contents;
}
._input_1b42v_2 {
    position: relative;
    color: var(--color-foreground-800);
    padding: 0;

    transition: .3s box-shadow;
&:has(input:hover), &:focus {
      box-shadow: inset 0 0 0 4px var(--color-background-300);
}
&::-moz-placeholder {
      color: var(--color-foreground-600);
}
&::placeholder {
      color: var(--color-foreground-600);
}

    /* Optional label wrapper (excluding the floating tooltip) extends to fill available space */
> label:not(._floating_1b42v_29) {
      flex: 1 1 0;
      min-inline-size: 0; /* Firefox fix*/
}
input {
    flex: 1 1 0;  /* Grow to fill available space, shrink when parent is smaller, start at 0 */
    min-inline-size: 0;   /* Firefox fix */

    width: 100%;

    cursor: text;
    border: none;
    margin: 0;
    padding-inline-start: 16px;
    --mask-padding-inline-start: 16px;
    padding-inline-end: 0px;
&:last-child {
        padding-inline-end: 16px;
        --mask-padding-inline-end: 16px;
}
&:focus-visible {
        outline: none;
}
}
button {
      outline-offset: -4px;
}
&:has(:focus-visible) {
      box-shadow: inset 0 0 0 4px var(--color-focus);
}
> ._start_1b42v_66:not(:empty) {
      inline-size: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
}
&:has(._start_1b42v_66:not(:empty)) input {
    padding-inline-start: 44px;
    --mask-padding-inline-start: 44px;
}
&:has([shows-tooltip]:is(:hover, :focus-visible)) label._floating_1b42v_29:not(:empty) {
    opacity: 1;
}
label._floating_1b42v_29 {
    position: absolute;
    opacity: 0;
    transition: opacity .2s;
    right: 8px;
    bottom: 37px;
    font-size: 12px;
    background: var(--color-900);
    color: var(--color-200);
    padding: 0 8px;
    outline: .5px solid currentcolor;
    pointer-events: none;
}
}