== Background
We built our button component in {T256038}. Now, with the search spec completed in {T255603}, we should make some changes to the button to fit the requirements
== Acceptance criteria
[] Change the styling of the button, as well as the animation of the text input itself to fit the following design criteria:
=== Search box + search button
The search box follows OOUI guidelines in terms of styling and interactivity. Please refer to either [[ https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop | OOUI ]] or the [[ https://di-searchland-3.web.app/Pancake | demo ]] for additional details.
===== Specs
**Note:** //when the search box is inactive there's a border that wraps around the search box + the search button. It's a bit difficult to show in static mocks so please refer to the interactive demo.//
{F32194620}
===== States
| state | image | notes
| -- | -- | --
| inactive | {F32194622} | bounding border `#a2a9b1`
| hover search box | {F32194624} | search button becomes visible (OOUI/"Normal"), search box border darkens (`#72777d`)
| hover search button | {F32194626} | search button background lightens (`#fff`) / text lightens (`#404244`), search box border initial
| active & focus | {F32194628} | search box border (`border: 1px` / `#36c` & `box-shadow: inset 0 0 0 1px #36c`), search icon opacity (1), search box grows 20px wider from the left
| has value | {F32190225} | search box text color `#000` / bottom-left corner border radius (0)