refactor(components): consistent css variables for size (#16600)

Reviews the `--width` and `--height` variables in each component to either remove or add them based on need.

- fixes a bug where the spinner color wasn't being set properly in loading
- adds css variables for customizing background, color, some borders in overlays
- fixes a bug where prefix, suffix are taking up too much width in picker

closes #16097
references ionic-team/ionic-docs#228

BREAKING CHANGES

## Core Components

Removes the `--width` and `--height` variables from the following components, in favor of CSS:

- Button
- FAB Button
- Checkbox
  - Removes the `--width`/`--height` and adds a `--size` variable that is set on the width and height, allowing width and height to still be set and border-radius to still use it as a variable
- Radio
  - Removes the `--width`/`--height` and `--inner-width`/`--inner-height` variables. Calculates inner values based on parent element size.

## Overlay Components

The following components have all be converted to shadow (or scoped) and have CSS variables for width/height:

- Action Sheet _(scoped)_
- Alert  _(scoped)_
- Loading  _(scoped)_
- Menu _(shadow)_
- Modal  _(scoped)_
- Picker _(scoped)_
- Popover  _(scoped)_
- Toast _(shadow)_

The above components will now have the following CSS variables for consistency among overlays:

| Name              |
| ----------------- |
| `--height`        |
| `--max-height`    |
| `--max-width`     |
| `--min-height`    |
| `--min-width`     |
| `--width`         |

If the component does not set the value, it will default to `auto`.

## Removed CSS Variables

The following CSS properties have been removed:

| Component      | Property            | Reason                          |
| ---------------| --------------------| --------------------------------|
| **Button**     | `--height`          | Use CSS instead                 |
| **Button**     | `--margin-bottom`   | Use CSS instead                 |
| **Button**     | `--margin-end`      | Use CSS instead                 |
| **Button**     | `--margin-start`    | Use CSS instead                 |
| **Button**     | `--margin-top`      | Use CSS instead                 |
| **Button**     | `--width`           | Use CSS instead                 |
| **Checkbox**   | `--height`          | Use CSS or `--size`             |
| **Checkbox**   | `--width`           | Use CSS or `--size`             |
| **FAB Button** | `--width`           | Use CSS instead                 |
| **FAB Button** | `--height`          | Use CSS instead                 |
| **FAB Button** | `--margin-bottom`   | Use CSS instead                 |
| **FAB Button** | `--margin-end`      | Use CSS instead                 |
| **FAB Button** | `--margin-start`    | Use CSS instead                 |
| **FAB Button** | `--margin-top       | Use CSS instead                 |
| **Menu**       | `--width-small`     | Use a media query and `--width` |
| **Radio**      | `--width`           | Use CSS instead                 |
| **Radio**      | `--height`          | Use CSS instead                 |
| **Radio**      | `--inner-height`    | Calculated based on parent      |
| **Radio**      | `--inner-width`     | Calculated based on parent      |

core/src/components/picker-column/picker-column.scss

@@ -0,0 +1,101 @@
+@import "../../themes/ionic.globals";
+
+// Picker Column
+// --------------------------------------------------
+
+.picker-col {
+  display: flex;
+  position: relative;
+
+  flex: 1;
+  justify-content: center;
+
+  height: 100%;
+  box-sizing: content-box;
+
+  contain: content;
+}
+
+.picker-opts {
+  position: relative;
+
+  flex: 1;
+
+  max-width: 100%;
+}
+
+// contain property is supported by Chrome
+.picker-opt {
+  @include position(0, null, null, 0);
+
+  display: block;
+  position: absolute;
+
+  width: 100%;
+
+  border: 0;
+
+  text-align: center;
+  text-overflow: ellipsis;
+
+  white-space: nowrap;
+
+  contain: strict;
+  overflow: hidden;
+  will-change: transform;
+}
+
+.picker-opt.picker-opt-disabled {
+  pointer-events: none;
+}
+
+.picker-opt-disabled {
+  opacity: 0;
+}
+
+.picker-opts-left {
+  @include ltr() {
+    justify-content: flex-start;
+  }
+
+  @include rtl() {
+    justify-content: flex-end;
+  }
+}
+
+.picker-opts-right {
+  @include ltr() {
+    justify-content: flex-end;
+  }
+
+  @include rtl() {
+    justify-content: flex-start;
+  }
+}
+
+.picker-opt {
+  &:active,
+  &:focus {
+    outline: none;
+  }
+}
+
+.picker-prefix {
+  position: relative;
+
+  flex: 1;
+
+  text-align: end;
+
+  white-space: nowrap;
+}
+
+.picker-suffix {
+  position: relative;
+
+  flex: 1;
+
+  text-align: start;
+
+  white-space: nowrap;
+}