/**
 * @prop --ux-input-height: the height of the field itself (without labels)
 * @prop --ux-input-font-size: font-size of the input
 * @prop --ux-input-padding-horizontal: horizontal inner padding
 * @prop --ux-input-font-family: font-family of the input
 * @prop --ux-input-unit-color: color of the unit
 * @prop --ux-input-unit-padding: padding of the unit
 * @prop --ux-input-unit-font-size: font-size of the unit
 * @prop --ux-input-unit-font-weight: font-weight of the unit
 * @prop --ux-input-unit-line-height: line-height of the unit
 */
:host {
  box-sizing: border-box !important;
  display: flex;
  position: relative;
  height: var(--ux-input-height);
  padding: var(--ux-input-unit-padding);
  align-items: var(--ux-input-unit-align-items);
  font-size: var(--ux-input-unit-font-size);
  font-weight: var(--ux-input-unit-font-weight);
  line-height: var(--ux-input-unit-line-height);
  font-family: var(--ux-font);
  color: var(--ux-input-unit-color);
}
:host::before {
  content: "";
  display: block;
  width: 0;
  top: var(--ux-input-unit-top);
  bottom: var(--ux-input-unit-bottom);
  border-left: 1px solid var(--ux-input-unit-divider-color);
  position: absolute;
  left: 0;
}