refactor(themes): update border radius to new logical properties (#29002)

Issue number: internal

---------

## What is the current behavior?
The old `border-radius` mixin added additional selectors and styles
depending on whether the direction was set to `ltr` or `rtl`.

Old mixin usage:

```scss
.old-border-radius {
  @include border-radius(5px, 6px, 7px, 8px)
}
```

generates:

```css
.old-border-radius {
  border-top-left-radius: 5px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 8px;
}

:host-context([dir=rtl]) .old-border-radius {
  border-top-left-radius: 6px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 7px;
}

[dir=rtl] .old-border-radius {
  border-top-left-radius: 6px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 7px;
}

@supports selector(:dir(rtl)) {
  .old-border-radius:dir(rtl) {
    border-top-left-radius: 6px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 7px;
  }
}
```

## What is the new behavior?
The new `border-radius` mixin uses the [logical
properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Margins_borders_padding)
which handles switching based on the
[writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode),
[direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction),
and
[text-orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation):

| Before                       | After                       |
| -----------------------------| ----------------------------|
| `border-top-left-radius`     | `border-start-start-radius` |
| `border-bottom-left-radius`  | `border-end-start-radius`   |
| `border-top-right-radius`    | `border-start-end-radius`   |
| `border-bottom-right-radius` | `border-end-end-radius`     |

New mixin usage:

```scss
.new-border-radius {
  @include border-radius(5px, 6px, 7px, 8px)
}
```

```css
.new-border-radius {
  border-start-start-radius: 5px;
  border-start-end-radius: 6px;
  border-end-end-radius: 7px;
  border-end-start-radius: 8px;
}
```

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

The `select` styles have been updated to use the mixin instead of
hardcoding `border-radius`.

core/src/components/range/range.md.scss

@@ -178,6 +178,7 @@
     @include position(null, null, -1px, 50%);
     @include margin-horizontal(-13px, null);
 
+    // Border radius for the pin should not change based on the direction
     @include multi-dir() {
       /* stylelint-disable-next-line property-disallowed-list */
       border-radius: 50% 50% 50% 0;

core/src/components/select/select.md.outline.scss

@@ -199,14 +199,8 @@
   @include border(null, null, null, var(--border-width) var(--border-style) var(--border-color));
 }
 
-:host(.select-ltr.select-fill-outline) .select-outline-start {
-  // stylelint-disable-next-line property-disallowed-list
-  border-radius: var(--border-radius) 0px 0px var(--border-radius);
-}
-
-:host(.select-rtl.select-fill-outline) .select-outline-start {
-  // stylelint-disable-next-line property-disallowed-list
-  border-radius: 0px var(--border-radius) var(--border-radius) 0px;
+:host(.select-fill-outline) .select-outline-start {
+  @include border-radius(var(--border-radius), 0px, 0px, var(--border-radius));
 }
 
 :host(.select-fill-outline) .select-outline-start {
@@ -225,14 +219,8 @@
   @include border(null, var(--border-width) var(--border-style) var(--border-color), null, null);
 }
 
-:host(.select-ltr.select-fill-outline) .select-outline-end {
-  // stylelint-disable-next-line property-disallowed-list
-  border-radius: 0px var(--border-radius) var(--border-radius) 0px;
-}
-
-:host(.select-rtl.select-fill-outline) .select-outline-end {
-  // stylelint-disable-next-line property-disallowed-list
-  border-radius: var(--border-radius) 0px 0px var(--border-radius);
+:host(.select-fill-outline) .select-outline-end {
+  @include border-radius(0px, var(--border-radius), var(--border-radius), 0px);
 }
 
 :host(.select-fill-outline) .select-outline-end {

core/src/themes/ionic.mixins.scss

@@ -438,23 +438,12 @@
 // ----------------------------------------------------------
 @mixin border-radius($top-start, $top-end: $top-start, $bottom-end: $top-start, $bottom-start: $top-end) {
   @if $top-start == $top-end and $top-start == $bottom-end and $top-start == $bottom-start {
-    @include multi-dir() {
-      border-radius: $top-start;
-    }
+    border-radius: $top-start;
   } @else {
-    @include ltr() {
-      border-top-left-radius: $top-start;
-      border-top-right-radius: $top-end;
-      border-bottom-right-radius: $bottom-end;
-      border-bottom-left-radius: $bottom-start;
-    }
-
-    @include rtl() {
-      border-top-left-radius: $top-end;
-      border-top-right-radius: $top-start;
-      border-bottom-right-radius: $bottom-start;
-      border-bottom-left-radius: $bottom-end;
-    }
+    border-start-start-radius: $top-start;
+    border-start-end-radius: $top-end;
+    border-end-end-radius: $bottom-end;
+    border-end-start-radius: $bottom-start;
   }
 }