s/selected-option/selected/g

src/css/_base.scss

@@ -37,7 +37,7 @@ body .root .content.theme {
       width: 100%;
     }
     .react-select.theme {
-      .selected-option {
+      .selected {
         display: flex;
         justify-content: flex-end;
       }
@@ -106,7 +106,7 @@ body .root .content.theme.ar {
           right: 3px;
         }
       }
-      .selected-option {
+      .selected {
         font-size: x-large;
       }
     }

src/css/base/_select.scss

@@ -6,7 +6,7 @@
     height: 20px;
     z-index: 3;
 
-    .selected-option {
+    .selected {
       cursor: pointer;
     }
 
@@ -58,7 +58,7 @@
   }
 
   .react-select.theme {
-    .selected-option {
+    .selected {
       .circle {
         display: block;
         width: 16px;
@@ -100,7 +100,7 @@
 
 .content.theme.ar {
   .react-select.language {
-    .selected-option span {
+    .selected span {
       position: relative;
       bottom: 8px;
     }

src/css/themes/blue.scss

@@ -18,7 +18,7 @@
   }
 
   .react-select.theme {
-    .selected-option {
+    .selected {
       .circle {
         background: $primary-color;
         border-radius: 10px;

src/css/themes/blue/base/_select.scss

@@ -2,7 +2,7 @@
   @import "themes/blue/base/colors";
 
   .react-select.theme {
-    .selected-option .circle {
+    .selected .circle {
       background: $primary-color;
     }
     ul li.blue .circle {
@@ -15,7 +15,7 @@
   @import "themes/blue/base/colors";
 
   .react-select.language {
-    .selected-option {
+    .selected {
       color: $primary-color;
     }
   }

src/css/themes/green.scss

@@ -3,7 +3,7 @@
 
   direction: rtl;
   .react-select.language {
-    .selected-option { color: $primary-color; }
+    .selected { color: $primary-color; }
   }
 }
 
@@ -23,7 +23,7 @@
   }
 
   .react-select.theme {
-    .selected-option {
+    .selected {
       .circle {
         background: $primary-color;
         border-radius: 10px;

src/css/themes/green/base/_select.scss

@@ -1,7 +1,7 @@
 .content.theme {
   @import "themes/green/base/colors";
   .react-select.theme {
-    .selected-option.green .circle {
+    .selected.green .circle {
       background: $primary-color;
     }
     ul li.green .circle {

src/js/components/Select.tsx

@@ -28,7 +28,7 @@ export function Select({
   return (
     <div className={classNames("react-select", className)}>
       <span
-        className="selected-option"
+        className="selected"
         onClick={e => [e.stopPropagation(), setOpen(true)]}
       >
         {selected.props.children}