fix(action): Update transparent action styles (#8194)

**Related Issue:** #3834 

## Summary
cc @asangma @SkyeSeitz @ashetland

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

@@ -160,32 +160,26 @@
 }
 
 :host([appearance="transparent"]) .button {
-  @apply bg-transparent
-    transition-shadow
-    duration-150
-    ease-in-out;
+  @apply bg-transparent;
 }
 
+:host([appearance="transparent"][active]) .button,
 :host([appearance="transparent"]) .button:hover,
 :host([appearance="transparent"]) .button:focus {
-  @apply bg-transparent;
-  box-shadow: 0 0 0 2px theme("borderColor.color.1") inset;
+  background-color: var(--calcite-button-transparent-hover);
 }
 
-:host([active][appearance="transparent"]) .button,
-:host([active][appearance="transparent"]) .button:hover,
-:host([active][appearance="transparent"]) .button:focus {
-  @apply text-color-1 fill-color-1 bg-foreground-3;
+:host([appearance="transparent"]) .button:active {
+  background-color: var(--calcite-button-transparent-press);
 }
 
-:host([appearance="transparent"][loading]) .button,
 :host([appearance="transparent"][disabled]) .button {
   @apply bg-transparent;
 }
 
-:host([loading]) .button,
-:host([loading]) .button:hover,
-:host([loading]) .button:focus {
+:host([loading][appearance="solid"]) .button,
+:host([loading][appearance="solid"]) .button:hover,
+:host([loading][appearance="solid"]) .button:focus {
   @apply bg-foreground-1;
   .text-container {
     @apply opacity-disabled;