Merge pull request #711 from GSA/sam-design-system-1520

Update button group stylesheet to support modular dashboard

Author: yerramshilpa

sam-styles/packages/components/button-group/button-group.scss

@@ -39,4 +39,48 @@
       @include u-border('secondary-dark');
     }
   }
+}
+
+.sds-button-group--modular.sds-button-group--segmented {
+  mat-button-toggle:not(:last-of-type){
+    margin-right: 10px;
+  }
+  .sds-button-group__item {
+    .mat-button-toggle-button{
+      padding: 8px;
+    }
+    border-radius: 8px;
+    box-shadow: 1px 2px 4px 0px #00000080;
+    @include u-bg('base-lightest');
+    @include u-border(2px, !important);
+    @include u-border('solid');
+    @include u-border('base-lightest', !important);
+
+    .mat-button-toggle-focus-overlay{
+      background-color: transparent;
+    }
+
+    &:not(.mat-button-toggle-disabled):hover{
+      @include u-bg('accent-cool-lighter');
+      @include u-border('accent-cool-lighter', !important);
+      cursor: pointer;
+    }
+    &:not(.mat-button-toggle-disabled).mat-button-toggle-checked, &:not(.mat-button-toggle-disabled):active{
+    
+      @include u-border('secondary', !important);
+      @include u-border(2px, !important);
+    }
+    &.mat-button-toggle-disabled{
+      @include u-bg('base-light');
+      @include u-border('base-light', !important);
+      @include u-border(2px, !important);
+      @include u-text('base-dark');
+    }
+    // Focus is placed on this class when tabbing
+    .mat-button-toggle-button:focus{
+      outline: solid 2px #2491FF;
+      outline-offset: 5px;
+    }
+
+  }
 }