LT-247: making rounded button group component toggleable

Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl

@@ -4,43 +4,67 @@ $height = 25px
 $borderColorActive = #3C8074
 $textColorActive = #2D2D2D
 
-.viewerRoundedButtonGroup
+.roundedButtonGroup
   font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
-  font-weight: 500
-  position: relative
 
-  .viewerRoundedButton
-    background: $darkUiColor
-    border: 1px $uiBorderColorDark solid
-    color: $textSecondaryColor
+  .roundedButtonWrapper
     cursor: pointer
     display: inline-block
-    margin-left: -1px
     float: left
-    font-size: 11px
-    height: $height
-    line-height: $height
-    padding: 0 15px
+    margin-left: -1px
     text-decoration: none
-    text-transform: uppercase
-    transition: $sidebarTransition
-    -webkit-transition: $sidebarTransition
-    -ms-transition: $sidebarTransition
-    -o-transition: $sidebarTransition
-    -moz-transition: $sidebarTransition
-    z-index: 1
+    text-align: center
 
-    &.active
-      background: $activeColor
-      color: $textColorActive
-      border-color: $borderColorActive
-      z-index: 2
+    .roundedButton
+      align-items: center
+      background-color: $darkUiColor
+      border: 1px $uiBorderColorDark solid
+      color: $textSecondaryColor
+      display: flex
+      font-size: 11px
+      font-weight: 500
+      justify-content: center
+      height: $height
+      line-height: $height
+      padding: 0 22px
+      text-transform: uppercase
+      transition: transition($sidebarTransition)
+
+      svg
+        fill: $defaultColor
+        stroke: $defaultColor
+
+      svg
+      span
+        margin: 0 2px
+
+    .bottomLabel
+      color: $textSecondaryColor
+      font-size: 12px
+      line-height: 12px
+      margin-top: 8px
 
     &:first-child
       margin-left: 0
-      border-bottom-left-radius: $height
-      border-top-left-radius: $height
+      .roundedButton
+        border-bottom-left-radius: $height
+        border-top-left-radius: $height
 
-    &:last-child
+    &:last-child .roundedButton
       border-bottom-right-radius: $height
       border-top-right-radius: $height
+
+    &:hover .roundedButton
+      background-color: $boxBackgroundColor
+      color: $darkUiColor
+
+    &.active .roundedButton
+      background-color: $activeColor
+      border-color: $borderColorActive
+      color: $textColorActive
+
+    &:hover .roundedButton
+    &.active .roundedButton
+      svg
+        fill: $darkUiColor
+        stroke: $darkUiColor