Select DownArrow margin can't be overridden when to compensate for margin bottom of container

[timReynolds]

Describe the bug
Currently the select down arrow SVG is centered to the outer box rather than the inner select box. This means if you try to apply margin to the bottom outer box the arrow is incorrectly centered.

This isn't a problem if equal padding is applied to the top and bottom however this normally isn't the case as you want to group the label with the select by having more padding at the bottom than the top where the label is positioned.

A work around is to apply padding to the top of the next label however this isn't ideal especially if the select is the last item in the form.

To Reproduce
Create a form with a label followed by a select using the following in the theme;

  forms: {
    label: {
      fontSize: 1,
      fontWeight: "bold",
      mb: 1,
    },
    input: {
      borderColor: "gray",
      borderRadius: 0,
      mb: 3,
      "&:focus": {
        borderColor: "primary",
        boxShadow: t => `0 0 0 2px ${t.colors.primary}`,
        outline: "none",
      },
    },
    select: {
      borderColor: "gray",
      mb: 3,
      "&:focus": {
        borderColor: "primary",
        boxShadow: t => `0 0 0 2px ${t.colors.primary}`,
        outline: "none",
      },
    },
    textarea: {
      borderColor: "gray",
      mb: 3,
      "&:focus": {
        borderColor: "primary",
        boxShadow: t => `0 0 0 2px ${t.colors.primary}`,
        outline: "none",
      },
    },

Expected behavior
There is either a way to offset the dropdown arrow margin or it's centered different to avoid this problem.

[lachlanjc]

This is likely a bug that should be fixed, but in the meantime, can you use a nested svg selector inside your select variant to manually adjust its positioning?

[timReynolds]

This is a good point I didn’t try targeting the SVG. Will do so today and report back

[timReynolds]

As @lachlanjc pointed out you can use a nested selector to fix this like so;

    select: {
      ...sharedInputStyles,
      "& + svg": {
        "margin-top": "-16px",
      },
    },

[lachlanjc]

Awesome. I think we can close this then? #706 seems to cover the same thing.