.field-with-counter{gap:var(--space-size-2xs);flex-direction:column;display:flex}.input-wrapper{align-items:stretch;width:100%;display:flex;position:relative}.input-wrapper .input--with-unit{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0;flex:1}.input-wrapper .input__unit{padding:var(--space-size-xs);padding-left:var(--space-size-2xs);background-color:var(--color-body-background);border:1px solid var(--color-body-text);border-radius:0 var(--space-size-2xs) var(--space-size-2xs) 0;transition:border-color .15s ease-out,opacity var(--transition-default-duration) var(--transition-default-timing-function);border-left:none;flex-shrink:0;align-items:center;margin-left:-1px;display:flex}.input__unit-text{color:var(--color-body-text-transparent-60);font-size:var(--font-size-step-0);white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1.5}.input-wrapper:has(input:focus) input.input--with-unit{border-color:var(--color-complementary-teal);outline:var(--color-complementary-teal) solid 2px;outline-offset:-2px}.input-wrapper:has(input:focus) .input__unit{border-color:var(--color-complementary-teal);z-index:1;border-left:none}.input__unit--disabled{opacity:.6}.input-wrapper:has(input:disabled) .input__unit{opacity:.6}