fix(alert): use the proper borders for the buttons for rtl

references #17012

core/src/components/alert/alert.ios.scss

@@ -280,10 +280,19 @@
   overflow: hidden;
 }
 
+.alert-button:first-child {
+  @include rtl() {
+    border-right: 0;
+  }
+}
+
 .alert-button:last-child {
+  font-weight: $alert-ios-button-main-font-weight;
   border-right: 0;
 
-  font-weight: $alert-ios-button-main-font-weight;
+  @include rtl() {
+    border-right: $alert-ios-button-border-width $alert-ios-button-border-style $alert-ios-button-border-color;
+  }
 }
 
 .alert-button.activated {

core/src/components/alert/test/basic/e2e.ts

@@ -22,34 +22,64 @@ async function openAlert(selector: string) {
   expect(alert).toBe(null);
 }
 
+async function openRTLAlert(selector: string) {
+  const page = await newE2EPage({
+    url: '/src/components/alert/test/basic?ionic:_testing=true&rtl=true'
+  });
+
+  await page.click(selector);
+
+  let alert = await page.find('ion-alert');
+  expect(alert).not.toBe(null);
+  await alert.waitForVisible();
+  await page.waitFor(250);
+
+  const compare = await page.compareScreenshot('rtl');
+  expect(compare).toMatchScreenshot();
+
+  await alert.callMethod('dismiss');
+  await alert.waitForNotVisible();
+
+  alert = await page.find('ion-alert');
+  expect(alert).toBe(null);
+}
+
 test(`alert: basic`, async () => {
   await openAlert('#basic');
+  await openRTLAlert('#basic');
 });
 
 test(`alert: basic, long message`, async () => {
   await openAlert('#longMessage');
+  await openRTLAlert('#longMessage');
 });
 
 test(`alert: basic, multiple buttons`, async () => {
   await openAlert('#multipleButtons');
+  await openRTLAlert('#multipleButtons');
 });
 
 test(`alert: basic, no message`, async () => {
   await openAlert('#noMessage');
+  await openRTLAlert('#noMessage');
 });
 
 test(`alert: basic, confirm`, async () => {
   await openAlert('#confirm');
+  await openRTLAlert('#confirm');
 });
 
 test(`alert: basic, prompt`, async () => {
   await openAlert('#prompt');
+  await openRTLAlert('#prompt');
 });
 
 test(`alert: basic, radio`, async () => {
   await openAlert('#radio');
+  await openRTLAlert('#radio');
 });
 
 test(`alert: basic, checkbox`, async () => {
   await openAlert('#checkbox');
+  await openRTLAlert('#checkbox');
 });

core/src/themes/ionic.functions.string.scss

@@ -103,7 +103,8 @@
       $list: append($list, ":host(#{$addHostSelector}) #{$selector}", comma);
 
     } @else {
-      $list: append($list, "#{$addHostSelector} #{$selector}", comma);
+      // TODO host-context should be for scoped only
+      $list: append($list, ":host-context(#{$addHostSelector}) #{$selector}", comma);
     }
   }