feat(alert): apply --calcite-alert-corner-radius to internal close bu…

…tton (#10388)

**Related Issue:**
[#7180](#7180)

## Summary
-Apply `calcite-alert-corner-radius` to internal close button.

-Make queue count's container background-color transparent.

packages/calcite-components/src/components/alert/alert.e2e.ts

@@ -594,10 +594,20 @@ describe("calcite-alert", () => {
         shadowSelector: `.${CSS.container}`,
         targetProp: "backgroundColor",
       },
-      "--calcite-alert-corner-radius": {
-        shadowSelector: `.${CSS.container}`,
-        targetProp: "borderRadius",
-      },
+      "--calcite-alert-corner-radius": [
+        {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "borderRadius",
+        },
+        {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "borderStartEndRadius",
+        },
+        {
+          shadowSelector: `.${CSS.close}`,
+          targetProp: "borderEndEndRadius",
+        },
+      ],
       "--calcite-alert-shadow": {
         shadowSelector: `.${CSS.container}`,
         targetProp: "boxShadow",

packages/calcite-components/src/components/alert/alert.scss

@@ -5,7 +5,7 @@
  *
  * @prop --calcite-alert-width: Specifies the width of the component.
  * @prop --calcite-alert-background-color: Specifies the component's background color.
- * @prop --calcite-alert-corner-radius: Specifies the component's border radius.
+ * @prop --calcite-alert-corner-radius: Specifies the component's corner radius.
  * @prop --calcite-alert-shadow: Specifies the component's shadow.
  */
 
@@ -81,6 +81,8 @@ $border-style: 1px solid var(--calcite-color-border-3);
 .close {
   @apply bg-transparent border-none cursor-pointer flex items-center justify-end outline-none self-stretch text-color-3;
   -webkit-appearance: none;
+  border-start-end-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius));
+  border-end-end-radius: var(--calcite-alert-corner-radius, var(--calcite-border-radius));
 
   @apply focus-base;
   &:focus {
@@ -99,8 +101,7 @@ $border-style: 1px solid var(--calcite-color-border-3);
 }
 
 .queue-count {
-  @apply bg-foreground-1
-  cursor-default
+  @apply cursor-default
   flex
   font-medium
   invisible