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

  gap: var(--space-3);

  cursor: text;

  font: inherit;
  color: var(--gray-11);

  &[data-variant="bubble"] {
    border-radius: var(--max-size);

    background-color: var(--gray-1);
    outline: var(--outline-interactive);

    input {
      padding: var(--space-3) var(--space-4);
    }
  }

  &[data-variant="form"] {
    border-bottom: var(--space-1) solid var(--gray-6);

    input {
      padding: var(--space-2);
    }
  }

  &[data-size="minor"] {
    gap: var(--space-1);
    font-size: var(--font-size-minor);

    &[data-variant="bubble"] input {
      padding: var(--space-2) var(--space-3);
    }

    &[data-variant="form"] input {
      padding: var(--space-1);
    }

    /* the icon's gap already separates it from the input */
    &[data-has-icon="true"] input {
      padding-left: 0;
    }
  }

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

    input {
      padding-left: 0;
    }
  }

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

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

  &[data-disabled="true"] {
    cursor: not-allowed;
    background-color: var(--gray-3);

    color: var(--gray-9);

    input::placeholder {
      color: var(--gray-6);
    }
  }

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

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

    background: none;
    border: none;
    cursor: inherit;

    font: inherit;

    color: var(--gray-12);

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

    &:focus {
      outline: none;
    }

    &[data-align="center"] {
      text-align: center;
    }
    &[data-align="right"] {
      text-align: right;
    }

    &[data-auto-width="true"] {
      field-sizing: content;
    }
  }
}