[data-control="input"] {
  --input-height: 30px;
  --input-font-size: 13px;
  --input-font-weight: 500;
  --input-radius: 6px;

  display: inline-grid;
  gap: 6px;
  color: var(--ink);
  font-size: var(--input-font-size);

  &[data-width="full"] {
    width: 100%;
  }

  &[data-size="md"] {
    --input-height: 34px;
    --input-font-size: 14px;
  }

  > span:not(.sr-only) {
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 500;
  }

  input {
    width: 100%;
    height: var(--input-height);
    padding: 0 12px;
    color: var(--ink);
    background: var(--bg-raised);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--input-radius);
    box-shadow: var(--shadow);
    font: inherit;
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);

    &::placeholder {
      color: var(--ink-faint);
    }
  }
}