chore(content-switcher): update styles from audit (#2085)

* chore(content-switcher): update styles from audit

* chore(content-switcher): change focus to box shadow for radius

* chore(content-switcher): add rem

* chore(content-switcher): css updates

src/components/content-switcher/_content-switcher.scss

@@ -117,6 +117,8 @@
 @mixin content-switcher--x {
   .#{$prefix}--content-switcher {
     display: flex;
+    justify-content: space-evenly;
+    width: 100%;
     height: rem(32px);
   }
 
@@ -126,18 +128,23 @@
     @include focus-outline('reset');
 
     background-color: $ui-01;
-    display: flex;
-    align-items: center;
-    padding: $spacing-xs $spacing-xl;
+    display: inline-block;
+    width: 100%;
+    height: rem(40px);
+    padding: $spacing-xs $spacing-md;
     margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: left;
     text-decoration: none;
     border: none;
     color: $text-02;
     transition: all $transition--base $carbon--standard-easing;
     position: relative;
 
     &:focus {
-      @include focus-outline('outline');
+      box-shadow: inset 0 0 0 2px $focus;
       color: $text-01;
       z-index: 3;
     }
@@ -162,20 +169,31 @@
     }
   }
 
-  .#{$prefix}--content-switcher-btn:not(:last-of-type)::after {
+  .#{$prefix}--content-switcher-btn:first-child {
+    border-top-left-radius: rem(4px);
+    border-bottom-left-radius: rem(4px);
+  }
+
+  .#{$prefix}--content-switcher-btn:last-child {
+    border-top-right-radius: rem(4px);
+    border-bottom-right-radius: rem(4px);
+  }
+
+  .#{$prefix}--content-switcher-btn:not(:first-of-type)::before {
     content: '';
     display: block;
     height: rem(16px);
     width: rem(1px);
     background-color: $content-switcher-divider;
     position: absolute;
     z-index: 2;
-    right: rem(-1px);
+    left: 0;
   }
 
-  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected::after,
-  .#{$prefix}--content-switcher-btn:focus::after,
-  .#{$prefix}--content-switcher-btn:hover::after {
+  .#{$prefix}--content-switcher-btn.#{$prefix}--content-switcher--selected::before,
+  .#{$prefix}--content-switcher-btn:focus::before,
+  .#{$prefix}--content-switcher-btn:focus + .#{$prefix}--content-switcher-btn::before,
+  .#{$prefix}--content-switcher-btn:hover::before {
     background-color: transparent;
   }