.text-input {
  --_input-border-color: var(--input-border-color, transparent);
  --_input-border-color-hover: var(
    --input-border-color-hover,
    var(--input-border-color, transparent)
  );
  --_input-border-color-focus: var(
    --input-border-color-focus,
    var(--input-border-color, transparent)
  );
  --_input-border-width: var(--input-border-width, 1px);
  --_input-background-color: var(--input-background-color, var(--color-white));
  --_input-color: var(--input-color, var(--color-text));
  --_input-placeholder-color: var(--input-placeholder-color, var(--color-text-extra-dimmed));
  --_input-box-shadow: var(--input-box-shadow, none);
  --_input-box-shadow-focus: var(--input-box-shadow-focus, none);
  --_input-border-radius: var(--input-border-radius, var(--radius-xs));
  --_input-height: var(--input-height, 3rem);
  --_input-font: var(--input-font, var(--typography-body-medium));
  --_input-padding-inline: var(--input-padding-inline, var(--spacing-md));
  --_input-gap: var(--input-gap, var(--_input-padding-inline));

  position: relative;
  display: inline-flex;
  box-sizing: border-box;
  width: 100%;
  height: var(--_input-height);
  margin: 0;
  cursor: text;
  transition: all 0.15s cubic-bezier(0.39, 0.58, 0.57, 1);
  color: var(--_input-color);
  border: var(--_input-border-width) solid var(--_input-border-color);
  border-radius: var(--_input-border-radius);
  outline: 2px solid transparent;
  background-color: var(--_input-background-color);
  box-shadow: var(--_input-box-shadow);
  font: var(--_input-font);
  gap: var(--_input-gap);
  padding-inline: var(--_input-padding-inline);

  &:hover {
    --_input-border-color: var(--_input-border-color-hover);
  }

  &:focus-within {
    --_input-border-color: var(--_input-border-color-focus);
    --_input-box-shadow: var(--_input-box-shadow-focus);
    box-shadow: var(--focus-box-shadow);
  }
}

.text-input__input {
  flex: 1;
  width: 100%;
  min-width: 0;
  padding: 0;
  text-overflow: ellipsis;
  color: inherit;
  border: none;
  outline: none;
  background-color: transparent;
  font: inherit;
}

.text-input__input:focus {
  box-shadow: none;
}

.text-input__input::placeholder {
  color: var(--_input-placeholder-color);
}

.text-input--full-width {
  width: 100%;
}

/* Disabled. */
.text-input--disabled {
  cursor: not-allowed;
  opacity: 0.75;
  filter: grayscale(1);
}

.text-input__input[disabled] {
  cursor: not-allowed;
}

/* Sizes. */
.text-input--size--small {
  --input-height: 2.5rem;
  --input-font: var(--typography-body-small);
}

.text-input--size--medium {
  --input-font: var(--typography-body-medium);
}

.text-input--size--large {
  --input-height: 3.5rem;
  --input-font: var(--typography-body-large);
}

/* Plain variants. */
.text-input--variant--plain.text-input--color--danger {
  --input-color: var(--color-error);
  --input-box-shadow-focus: inset 0 0 0 1px var(--color-error);
}

/* Outlined variants. */
.text-input--variant--outlined.text-input--color--primary {
  --input-border-color: var(--color-border);
  --input-border-color-hover: var(--color-primary-light);
  --input-border-color-focus: var(--color-primary);
}

.text-input--variant--outlined.text-input--color--danger {
  --input-color: var(--color-error);
  --input-border-color: var(--color-error);
  --input-border-color-focus: var(--color-error);
  --input-box-shadow-focus: inset 0 0 0 1px var(--color-error);
}