Fix segmented controls

components/common/Segment/index.module.scss

@@ -1,4 +1,4 @@
-.Segment {
+.segment {
   color: $grey-55;
   cursor: pointer;
   flex-grow: 1;
@@ -40,3 +40,7 @@
     width: 100%;
   }
 }
+
+:global(.blended) .segment input:checked + label {
+  background: var(--card-bg);
+}

components/common/Segment/index.tsx

@@ -21,7 +21,7 @@ const Segment: React.FC<Props> = (props: Props) => {
   }
 
   return (
-    <div className="Segment">
+    <div className={styles.segment}>
       <input
         name={props.groupName}
         id={props.name}

components/common/SegmentedControl/index.module.scss

@@ -23,10 +23,6 @@
     &.blended {
       background: var(--input-bound-bg);
       border-radius: $full-corner;
-
-      .Segment input:checked + label {
-        background: var(--card-bg);
-      }
     }
 
     &.grow {

components/common/SegmentedControl/index.tsx

@@ -26,6 +26,7 @@ const SegmentedControl: React.FC<Props> = ({
       [styles.blended]: blended,
       [styles.grow]: grow,
       [styles.gap]: gap,
+      blended: blended,
     },
     className,
     elementClass