/*
 * DO NOT EDIT THIS FILE.
 * It's generated automatically by 'yarn build' command.
 * @preserve
 */

.h-text-input {
  position: relative;
}

.h-text-input__element {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 1.25rem;
  color: var(--color-text);
  border: 0.0625rem solid var(--color-primary-brand);
  border-radius: 0.375rem;
  background-color: var(--color-light);
  font: inherit;
  appearance: none;
}

@media (hover: hover) and (pointer: fine) {
  .h-text-input__element:hover {
    border-color: var(--color-primary-brand-hover);
  }
}

.h-text-input__element:-ms-input-placeholder {
  opacity: 1;
  color: var(--color-text);
}

.h-text-input__element::placeholder {
  opacity: 1;
  color: var(--color-text);
}

.h-text-input__element:focus-visible {
  border-color: var(--color-secondary-brand);
  outline: none;
}

.h-text-input__element.error {
  border-color: var(--color-secondary-brand);
}

.h-text-input__element.error:-ms-input-placeholder {
  color: var(--color-secondary-brand);
}

.h-text-input__element.error::placeholder {
  color: var(--color-secondary-brand);
}

.h-text-input__element[disabled],
.h-text-input__element.is-disabled {
  color: var(--color-disabled);
  border-color: var(--color-disabled);
}

.h-text-input__element[disabled]:-ms-input-placeholder,
.h-text-input__element.is-disabled:-ms-input-placeholder {
  color: var(--color-disabled);
}

.h-text-input__element[disabled]::placeholder,
.h-text-input__element.is-disabled::placeholder {
  color: var(--color-disabled);
}