[RadioButton] consolidate se23 styles (#10053)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes #9960 <!-- link to issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

- Consolidate se23 styles

### How to 🎩

-
[Storybook](https://5d559397bae39100201eedc1-bfoqxzgpur.chromatic.com/?path=/story/all-components-radiobutton--disabled-radio)
- [Prod
Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-radiobutton--default&globals=polarisSummerEditions2023:true)


### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: gwyneplaine

polaris-react/src/components/RadioButton/RadioButton.scss

@@ -11,16 +11,9 @@
   @include visually-hidden;
 
   &:focus-visible + .Backdrop {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include focus-ring($style: 'focused');
-
-    #{$se23} & {
-      /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 radio overrides */
-      @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
-        var(--p-color-border-interactive-focus);
-      outline-offset: var(--p-space-025);
-    }
+    outline: var(--p-border-width-2) solid
+      var(--p-color-border-interactive-focus);
+    outline-offset: var(--p-space-025);
 
     &::after {
       border-radius: var(--p-border-radius-full);
@@ -37,14 +30,10 @@
       border-color: var(--p-color-border-interactive);
 
       &::before {
-        #{$se23} & {
-          background-color: var(--p-color-icon-on-color);
-          transition: opacity var(--p-motion-duration-150)
-              var(--p-motion-ease-out),
-            transform var(--p-motion-duration-150) var(--p-motion-ease-out);
-        }
-        transition: opacity var(--p-motion-duration-150) var(--p-motion-ease),
-          transform var(--p-motion-duration-150) var(--p-motion-ease);
+        background-color: var(--p-color-icon-on-color);
+        transition: opacity var(--p-motion-duration-150)
+            var(--p-motion-ease-out),
+          transform var(--p-motion-duration-150) var(--p-motion-ease-out);
         opacity: 1;
         transform: translate(-50%, -50%) scale(1);
       }
@@ -54,44 +43,32 @@
   &:checked:not([disabled]) + .Backdrop {
     &,
     .ChoiceLabel:hover & {
-      #{$se23} & {
-        background-color: var(--p-color-bg-primary);
-        border-color: var(--p-color-border-input-active-experimental);
-      }
+      background-color: var(--p-color-bg-primary);
+      border-color: var(--p-color-border-input-active-experimental);
     }
   }
 
   + .Backdrop {
     .ChoiceLabel:hover & {
       cursor: pointer;
       border-color: var(--p-color-border-input-hover);
-      #{$se23} & {
-        background: var(--p-color-bg-input-hover-experimental);
-      }
+      background: var(--p-color-bg-input-hover-experimental);
     }
 
     .ChoiceLabel:active & {
-      #{$se23} & {
-        border-color: var(--p-color-bg-primary);
-        border-width: var(--p-border-width-2);
-      }
+      border-color: var(--p-color-bg-primary);
+      border-width: var(--p-border-width-2);
     }
   }
 
   &:disabled + .Backdrop {
     &,
     .ChoiceLabel:hover & {
-      border-color: var(--p-color-border-disabled);
       cursor: default;
-      #{$se23} & {
-        background-color: var(
-          --p-color-bg-transparent-secondary-disabled-experimental
-        );
-        border: none;
-        // Duplicating this rule due to the specificity of the se23 selector
-        // in earlier rules blasting it away.
-        cursor: default;
-      }
+      background-color: var(
+        --p-color-bg-transparent-secondary-disabled-experimental
+      );
+      border: none;
 
       &::before {
         background-color: var(--p-color-border-disabled);
@@ -102,26 +79,13 @@
   &:disabled:checked + .Backdrop::before {
     &,
     .ChoiceLabel:hover & {
-      #{$se23} & {
-        background-color: var(--p-color-icon-on-color);
-      }
+      background-color: var(--p-color-icon-on-color);
     }
   }
 }
 /* stylelint-enable selector-max-specificity, selector-max-class, selector-max-combinators */
 
 .Backdrop {
-  #{$se23} & {
-    border-width: var(--p-border-width-1-experimental);
-    background-color: var(--p-color-bg-input);
-    transition: border-color var(--p-motion-duration-100)
-      var(--p-motion-ease-out);
-
-    &::before {
-      transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
-        transform var(--p-motion-duration-100) var(--p-motion-ease-out);
-    }
-  }
   // stylelint-disable-next-line -- Polaris component custom properties
   --pc-icon-size-small: 8px;
 
@@ -137,10 +101,10 @@
   display: block;
   width: 100%;
   height: 100%;
-  border: var(--p-border-width-2) solid var(--p-color-border-input);
+  border: var(--p-border-width-1-experimental) solid var(--p-color-border-input);
   border-radius: var(--p-border-radius-full);
-  background-color: var(--p-color-bg);
-  transition: border-color var(--p-motion-duration-100) var(--p-motion-ease);
+  background-color: var(--p-color-bg-input);
+  transition: border-color var(--p-motion-duration-100) var(--p-motion-ease-out);
 
   &::before {
     content: '';
@@ -156,8 +120,8 @@
     width: var(--pc-icon-size-small);
     background-color: var(--p-color-bg-interactive);
     border-radius: var(--p-border-radius-full);
-    transition: opacity var(--p-motion-duration-100) var(--p-motion-ease),
-      transform var(--p-motion-duration-100) var(--p-motion-ease);
+    transition: opacity var(--p-motion-duration-100) var(--p-motion-ease-out),
+      transform var(--p-motion-duration-100) var(--p-motion-ease-out);
 
     @media (forced-colors: active) {
       border: var(--p-border-width-5) solid transparent;