fix(button): follow core Carbon icon positioning (#697)

* fix(button): follow core Carbon icon positioning

* fix(button): add custom styles for ghost variants

* fix(button): support condensed layout

* fix(button): update ghost button styles

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

src/components/button/button.scss

@@ -20,26 +20,36 @@ $css--plex: true !default;
     max-width: 100%;
   }
 
-  .#{$prefix}-ce--btn--has-icon {
-    padding-right: 12px;
-  }
-
   ::slotted([slot='icon']) {
     fill: currentColor;
-    margin-left: calc(#{rem(60px)} - #{$spacing-04} - #{$icon-size-01});
+    position: absolute;
+    right: rem(16px);
+    flex-shrink: 0;
   }
 
   &[isExpressive] ::slotted([slot='icon']) {
     width: rem(20px);
     height: rem(20px);
   }
 
-  &[icon-layout='condensed'] ::slotted([slot='icon']) {
-    margin-left: $spacing-03;
+  &[icon-layout='condensed'] .#{$prefix}--btn {
+    padding-right: rem(39px);
   }
 
   .#{$prefix}--btn--icon-only ::slotted([slot='icon']) {
-    margin-left: 0;
+    position: static;
+  }
+
+  &[kind='ghost'],
+  &[kind='danger-ghost'] {
+    ::slotted([slot='icon']) {
+      position: static;
+      margin-left: rem(8px);
+    }
+
+    &[icon-layout='condensed'] .#{$prefix}--btn {
+      padding-right: rem(16px);
+    }
   }
 }