.input-base {
  align-items: center;
  box-sizing: border-box;
  border: var(--hs-border-dark);
  border-radius: var(--hs-radius);
  color: var(--hs-color-input-fg);
  background-color: var(--hs-color-input-bg);
  padding: 0 var(--hs-spacing-base);
  font-family: inherit;
  font-size: 1.6rem;
  transition-property: color, border-color, background-color;
  transition-duration: var(--hs-transitions-duration-base);
  transition-timing-function: var(--hs-transitions-easing);
}

.input-base--height-small {
  height: calc(var(--hs-spacing-large) * 2.5);
}

.input-base--height-normal {
  height: calc(var(--hs-spacing-large) * 3);
}

.input-base--disabled {
  color: var(--hs-color-input-bg);
  background-color: var(--hs-color-input-accent);
}

.input-base--invalid {
  border-color: var(--hs-palette-error-main);
}

.input-base:focus-within {
  border-color: var(--hs-color-input-highlight);
}

.input-base .input-base__input {
  width: 100%;
  height: 100%;
  outline: 0;
  border: none;
  border-radius: inherit;
  font-family: inherit;
  font-size: inherit;
  background: inherit;
}

.input-base .input-base__input[type="range"] {
  margin: 0 var(--hs-spacing-base);
}

.input-base .input-base__input[type="file"] {
  height: max-content;
  padding: 0 var(--hs-spacing-base);
}

.input-base .input-base__icon,
.input-base .input-base__adornment {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}