.TextInput {
  background: transparent;
  border-color: var(--Input-borderColor);
  border-radius: 0;
  border-style: solid;
  border-width: 0 0 1px;
  padding: var(--gap-s) 0 calc(var(--gap-s) - 1px) 0;
  resize: none;
  width: 100%;

  &:hover,
  &:focus {
    border-color: var(--Input-focusColor);
  }

  &:focus {
    background: var(--Input-focusBackground);
    border-bottom-width: 2px;
    padding-bottom: calc(var(--gap-s) - 2px);
  }
}

input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
textarea {
  &:extend(.TextInput all);
}
