Redesign and add styles for element-tinted control

components/Segment/index.scss

@@ -1,26 +1,26 @@
 .Segment {
-    border-radius: 4px;
-    color: $grey-10;
+    color: $grey-50;
     cursor: pointer;
     font-size: 1.4rem;
-    font-weight: $medium;
+    font-weight: $normal;
     min-width: 100px;
 
     &:hover label {
-      background: $grey-90;
-      color: $grey-00;
+        background: $grey-90;
+        color: $grey-00;
     }
 
     & input {
-      display: none;
+        display: none;
 
-      &:checked + label {
-        background: $blue;
-        color: white;
-      }
+        &:checked + label {
+            background: $blue;
+            color: white;
+        }
     }
 
     & label {
+        border-radius: $unit * 3;
         display: block;
         text-align: center;
         white-space: nowrap;

components/SegmentedControl/index.scss

@@ -6,11 +6,84 @@
 
 .SegmentedControl {
     background: white;
-    border-radius: $unit;
+    border-radius: $unit * 3;
     display: inline-flex;
+    padding: 3px;
     position: relative;
     user-select: none;
     overflow: hidden;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     z-index: 1;
+    
+    &.fire {
+        .Segment input:checked + label {
+            background: $fire-bg-dark;
+            color: $fire-text-dark;
+        }
+
+        .Segment:hover label {
+            background: $fire-bg-light;
+            color: $fire-text-light;
+        }
+    }
+
+    &.water {
+        .Segment input:checked + label {
+            background: $water-bg-dark;
+            color: $water-text-dark;
+        }
+
+        .Segment:hover label {
+            background: $water-bg-light;
+            color: $water-text-light;
+        }
+    }
+
+    &.earth {
+        .Segment input:checked + label {
+            background: $earth-bg-dark;
+            color: $earth-text-dark;
+        }
+
+        .Segment:hover label {
+            background: $earth-bg-light;
+            color: $earth-text-light;
+        }
+    }
+
+    &.wind {
+        .Segment input:checked + label {
+            background: $wind-bg-dark;
+            color: $wind-text-dark;
+        }
+
+        .Segment:hover label {
+            background: $wind-bg-light;
+            color: $wind-text-light;
+        }
+    }
+
+    &.light {
+        .Segment input:checked + label {
+            background: $light-bg-dark;
+            color: $light-text-dark;
+        }
+
+        .Segment:hover label {
+            background: $light-bg-light;
+            color: $light-text-light;
+        }
+    }
+
+    &.dark {
+        .Segment input:checked + label {
+            background: $dark-bg-dark;
+            color: $dark-text-dark;
+        }
+
+        .Segment:hover label {
+            background: $dark-bg-light;
+            color: $dark-text-light;
+        }
+    }
 }