.text-input-view {
  display: inline-flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

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

.text-input-view .text-input-control {
  position: relative;
  --edge-fade-ground: var(--background-color-base);
  --edge-fade-inset-start: calc(var(--border-width-base) + var(--spacing-12));
  --edge-fade-inset-end: calc(var(--border-width-base) + var(--spacing-12));
}

.text-input-view.text-input-disabled .text-input-control {
  --edge-fade-ground: var(--background-color-disabled);
}

.text-input-view.text-input-read-only .text-input-control {
  --edge-fade-ground: var(--background-color-neutral-subtle);
}

.text-input-view.text-input-has-start-icon .text-input-control {
  --edge-fade-inset-start: calc(var(--border-width-base) + var(--spacing-12) + var(--size-icon-medium) + var(--spacing-8));
}

.text-input-view.text-input-has-end-icon .text-input-control, .text-input-view.text-input-clearable .text-input-control {
  --edge-fade-inset-end: calc(var(--border-width-base) + var(--spacing-12) + var(--size-icon-medium) + var(--spacing-8));
}

.text-input-view .text-input-control::before, .text-input-view .text-input-control::after {
  content: "";
  position: absolute;
  top: var(--border-width-base);
  bottom: var(--border-width-base);
  width: var(--size-edge-fade);
  pointer-events: none;
  opacity: 0;
}

.text-input-view .text-input-control::before {
  inset-inline-start: var(--edge-fade-inset-start);
  background-image: linear-gradient(to left, transparent, var(--edge-fade-ground));
}

.text-input-view .text-input-control::after {
  inset-inline-end: var(--edge-fade-inset-end);
  background-image: linear-gradient(to right, transparent, var(--edge-fade-ground));
}

.text-input-view .text-input-control:dir(rtl)::before {
  background-image: linear-gradient(to right, transparent, var(--edge-fade-ground));
}

.text-input-view .text-input-control:dir(rtl)::after {
  background-image: linear-gradient(to left, transparent, var(--edge-fade-ground));
}

.text-input-view .text-input-control:has(> .text-input-input[data-overflowing='true'][data-overflowing-start='true']:not(:focus))::before {
  opacity: 1;
}

.text-input-view .text-input-control:has(> .text-input-input[data-overflowing='true'][data-overflowing-end='true']:not(:focus))::after {
  opacity: 1;
}

.text-input-view .text-input-input {
  width: 100%;
  padding: var(--spacing-12);
  font-family: var(--typography-font-sans);
  font-size: var(--font-size-medium-16);
  line-height: var(--line-height-small-22);
  color: var(--color-base);
  background-color: var(--background-color-base);
  border: var(--border-width-base) solid var(--border-color-base);
  border-radius: var(--border-radius-base);
  transition: var(--transition-property-base) var(--transition-duration-base) var(--transition-timing-function-system);
  outline: none;
  cursor: var(--cursor-text);
  box-sizing: border-box;
}

.text-input-view.text-input-disabled .text-input-input {
  color: var(--color-disabled);
  -webkit-text-fill-color: var(--color-disabled);
  background-color: var(--background-color-disabled);
  border-color: var(--border-color-disabled);
  cursor: var(--cursor-not-allowed);
}

.text-input-view.text-input-read-only .text-input-input {
  background-color: var(--background-color-neutral-subtle);
}

.text-input-view.text-input-error .text-input-input {
  border-color: var(--border-color-red);
  outline: var(--border-width-base) solid var(--border-color-red);
  outline-offset: 0px;
}

.text-input-view.text-input-has-start-icon .text-input-input {
  padding-inline-start: calc((var(--spacing-12) + var(--size-icon-medium)) + var(--spacing-8)) !important;
}

.text-input-view.text-input-has-end-icon .text-input-input, .text-input-view.text-input-clearable .text-input-input {
  padding-inline-end: calc((var(--spacing-12) + var(--size-icon-medium)) + var(--spacing-8)) !important;
}

.text-input-view .text-input-input::placeholder {
  color: var(--color-placeholder) !important;
  -webkit-text-fill-color: var(--color-placeholder) !important;
}

.text-input-view .text-input-input:disabled::placeholder {
  color: var(--color-disabled) !important;
  -webkit-text-fill-color: var(--color-disabled) !important;
}

.text-input-view:not(.text-input-disabled):not(.text-input-read-only):not(.text-input-error) .text-input-input:focus {
  border-color: var(--border-color-blue) !important;
  outline: var(--border-width-base) solid var(--border-color-blue) !important;
  outline-offset: 0px !important;
}

.text-input-view .text-input-start-icon, .text-input-view .text-input-end-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-medium);
  height: var(--size-icon-medium);
  color: var(--color-subtle);
  pointer-events: none;
}

.text-input-view .text-input-start-icon {
  left: calc(var(--border-width-base) + var(--spacing-12));
}

.text-input-view .text-input-end-icon {
  right: calc(var(--border-width-base) + var(--spacing-12));
}

.text-input-view .text-input-clear-button {
  position: absolute;
  top: 50%;
  right: calc(var(--border-width-base) + var(--spacing-12));
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--size-icon-medium);
  height: var(--size-icon-medium);
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: var(--border-radius-circle);
  color: var(--color-subtle);
  cursor: var(--cursor-base);
  transition: var(--transition-property-base) var(--transition-duration-base) var(--transition-timing-function-system);
}

.text-input-view.text-input-disabled .text-input-clear-button {
  cursor: var(--cursor-not-allowed);
  opacity: var(--opacity-medium) !important;
}

.text-input-view:not(.text-input-disabled) .text-input-clear-button:hover {
  background-color: var(--background-color-interactive-subtle-hover) !important;
  color: var(--color-base) !important;
}

.text-input-view:not(.text-input-disabled) .text-input-clear-button:active {
  background-color: var(--background-color-interactive-subtle-active) !important;
}

.text-input-view .text-input-clear-button:focus {
  outline: 2px solid var(--border-color-blue-focus) !important;
  outline-offset: -2px !important;
}

.text-input-view .text-input-clear-button[data-visible='true'] {
  display: inline-flex;
}

.text-input-view .text-input-optional-flag {
  font-weight: var(--font-weight-normal);
  color: var(--color-subtle);
}

.text-input-view .text-input-label-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--font-size-medium-16);
  font-weight: 600;
  color: var(--color-base);
  font-family: var(--typography-font-sans);
}