.wrapper {
  align-items: center;
  display: flex;
  gap: var(--t-spacing-2);
  width: 100%;
}

.inputContainer {
  align-items: center;
  background-color: var(--t-background-transparent-lighter);
  border: 1px solid var(--t-border-color-medium);
  border-radius: var(--t-border-radius-sm);
  box-sizing: border-box;
  display: flex;
  flex: 1;
  gap: var(--t-spacing-1);
  height: 32px;
  padding: 0 var(--t-spacing-2);
}

.inputContainer:focus-within {
  border-color: var(--t-color-blue);
}

.iconContainer {
  align-items: center;
  color: var(--t-font-color-light);
  display: flex;
  justify-content: center;
}

.iconContainer[data-focused] {
  color: var(--t-font-color-secondary);
}

.input {
  background: transparent;
  border: none;
  color: var(--t-font-color-primary);
  flex: 1;
  font-family: var(--t-font-family);
  font-size: var(--t-font-size-md);
  font-weight: var(--t-font-weight-regular);
  outline: none;
  width: 100%;
}

.input::placeholder {
  color: var(--t-font-color-light);
  font-weight: var(--t-font-weight-medium);
}

.input:disabled {
  color: var(--t-font-color-tertiary);
}