blitzkit/packages/website-ue/src/components/TextField/index.css

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

  gap: var(--space-3);
  width: 100%;
  max-width: 40rem;
  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 {
    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;
    }
  }
}