fix(input): only apply the shape to the outline fill in ionic theme (#29482)

Issue number: internal

---------

## What is the current behavior?
The shape styles are being applied when the `fill` is unset in the
`ionic` theme. This is incorrect per the input UX requirements as shape
should only apply when `fill` is set to `"outline"`. This is made
apparent when looking at the existing styles for `disabled`.

## What is the new behavior?
- Only apply the shape styles to the `"outline"` fill
- Move the use of the `--background` css variable to the native wrapper
since this is what we use to style both the disabled and readonly states

| Before | After |
| ---| ---|
|
![before](https://github.com/ionic-team/ionic-framework/assets/6577830/44b6e7e4-70f4-49d5-844f-a015b7284ed5)
|
![after](https://github.com/ionic-team/ionic-framework/assets/6577830/06ac9431-17f4-4741-8ceb-19b40d8ba7d9)
|

I am not sure why this wasn't caught with the shape additions, but it's
probably because the minimum pixel ratio was not met.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

core/src/components/input/input.ionic.scss

@@ -101,21 +101,6 @@
   display: none;
 }
 
-// Ionic Input Shapes
-// --------------------------------------------------
-
-:host(.input-shape-soft) {
-  --border-radius: #{$ionic-border-radius-rounded-medium};
-}
-
-:host(.input-shape-round) {
-  --border-radius: #{$ionic-border-radius-rounded-full};
-}
-
-:host(.input-shape-rectangular) {
-  --border-radius: #{$ionic-border-radius-square};
-}
-
 // Input Bottom Content
 // ----------------------------------------------------------------