Match collapsed theming with navigation controls

[tristen]

In this collapsed state, the container has a wide box shadow, slightly grey icon and different dimensions:

For consistency with the default navigation controls, I think the styling to conform so its flush and resembles a member of the same system.

cc/ @scottsfarley93

[kmanzana]

Did you end up styling this to match? or has someone else and can they share the code?

[kmanzana]

for future reference or in case it helps anyone, here is how i styled the button

.mapboxgl-ctrl-geocoder {
  height: 29px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--icon-search {
  top: 0;
  left: 5px;
  height: 100%;
  fill: rgba(0, 0, 0, 0.87);
}
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input {
  height: 29px;
}
.mapboxgl-ctrl-geocoder.mapboxgl-ctrl-geocoder--collapsed {
  width: 29px !important;
  min-width: 29px;
}
.mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--pin-right > * {
  top: 4px;
}

button collapsed

search box expanded

if the maintainers fix this or someone wants to open a PR, may be easiest to add a .mapbox-ctrl-group to the top level div, then put the svg inside of a button. this would allow styles applied by .mapboxgl-ctrl-group button from Mapbox GL to get applied here too, may help, but haven't dug into that myself.