Anatomy
| 1. input-area | |
| 2. icon | |
| 3. placeholder |
Structure
| input-area | height | --size-height-06 |
| align-items | center | |
| padding-left | --spacing-inset-04 | |
| padding-right | --spacing-inset-04 | |
| gap | --spacing-inline-02 | |
| border-radius | --border-radius-rounded-03 | |
| icon | height | --size-square-03 |
| width | --size-square-03 |
Color
Default
| input-area | background-color | --color-interactive-alternative-default |
| placeholder | color | --color-content-secondary |
| icon | fill | --color-content-secondary |
Active
| input-area | border-color | --color-interactive-main-default |
| input-text | color | --color-content-primary |
| icon | fill | --color-content-primary |
Typography
Default
| placeholder | properties class (mixin) | --type-style-input |
| text-overflow | ellipsis | |
| text-align | left |
Active
| input-text | properties class (mixin) | |
| text-overflow | ellipsis | |
| text-align | left |