.text-field {
  display: flex;
  align-items: center;
  box-sizing: border-box;

  gap: var(--space-3);
  margin: 0 var(--space-4);

  border-radius: var(--max-size);

  background-color: var(--gray-3);
  outline: var(--outline-interactive);
  box-shadow: var(--shadow-cavity);

  font-size: var(--font-size-regular);
  color: var(--gray-11);

  &[data-has-icon="true"] {
    padding-left: var(--space-3);
  }

  &:focus-within {
    outline: var(--outline-focus);
    box-shadow: var(--shadow-focus);
  }

  svg {
    width: 1em;
    height: 1em;
  }

  input {
    min-width: 0;
    flex: 1;

    background: none;
    border: none;

    font-size: inherit;
    font-weight: medium;
    padding: var(--space-3) 0;

    color: var(--gray-12);

    &::placeholder {
      color: var(--gray-11);
    }

    &:focus {
      outline: none;
    }
  }
}