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/loading/loading.scss

@@ -3,7 +3,25 @@
 // Loading
 // --------------------------------------------------
 
-ion-loading {
+:host {
+  /**
+   * @prop --background: Background of the loading dialog
+   *
+   * @prop --min-width: Minimum width of the loading dialog
+   * @prop --width: Width of the loading dialog
+   * @prop --max-width: Maximum width of the loading dialog
+   *
+   * @prop --min-height: Minimum height of the loading dialog
+   * @prop --height: Height of the loading dialog
+   * @prop --max-height: Maximum height of the loading dialog
+   *
+   * @prop --spinner-color: Color of the loading spinner
+   */
+  --min-width: auto;
+  --width: auto;
+  --min-height: auto;
+  --height: auto;
+
   @include font-smoothing();
   @include position(0, 0, 0, 0);
 
@@ -21,15 +39,31 @@ ion-loading {
   z-index: $z-index-overlay;
 }
 
-ion-loading-controller {
-  display: none;
-}
-
 .loading-wrapper {
   display: flex;
 
-  align-items: center;
+  align-items: inherit;
+  justify-content: inherit;
+
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+
+  height: var(--height);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
+
+  background: var(--background);
 
   opacity: 0;
   z-index: $z-index-overlay-wrapper;
 }
+
+.spinner-lines,
+.spinner-lines-small,
+.spinner-bubbles,
+.spinner-circles,
+.spinner-crescent,
+.spinner-dots {
+  color: var(--spinner-color);
+}