Flattened all nested selectors to valid CSS

Author: elsamaryv

app/javascript/components/vm-snapshot-tree-select/styles.css

@@ -1,64 +1,62 @@
-  .snapshot-details-div {
-    .snapshot-details {
-      margin-left: 30px;
-      margin-bottom: 20px;
-    }
-    
-    .snapshot-detail-title {
-      width: 80px;
-      justify-content: right;
-      display: inline-flex;
-      margin-right: 30px;
-    }
+.snapshot-details-div .snapshot-details {
+  margin-left: 30px;
+  margin-bottom: 20px;
+}
 
-    .snapshot-detail-value {
-      display: inline-flex;
-    }
-  }
+.snapshot-details-div .snapshot-detail-title {
+  width: 80px;
+  justify-content: right;
+  display: inline-flex;
+  margin-right: 30px;
+}
 
-  .snapshot-tree-title {
-    font-size: 20px;
-    padding-left: 20px;
-    padding-top: 40px;
-  }
+.snapshot-details-div .snapshot-detail-value {
+  display: inline-flex;
+}
 
-  .no-snapshots-message {
-    padding-left: 20px;
-  }
+.snapshot-tree-title {
+  font-size: 20px;
+  padding-left: 20px;
+  padding-top: 40px;
+}
 
-  .vm-snapshot-tree {
-    font-size: 16px;
-    user-select: none;
-    min-height: 320px;
-    padding: 20px;
-    box-sizing: content-box;
-  }
-  
-  .selected-snapshot {
-    background-color: #0f62fe;
-    color: white;
-    width: 100%;
-    margin-left: 0px;
-    pointer-events: none;
+.no-snapshots-message {
+  padding-left: 20px;
+}
 
-    .arrow-div {
-      pointer-events: all;
-    }
+.vm-snapshot-tree {
+  font-size: 16px;
+  user-select: none;
+  min-height: 320px;
+  padding: 20px;
+  box-sizing: content-box;
+}
 
-    span {
-      pointer-events: all;
-    }
-  }
+.selected-snapshot {
+  background-color: #0f62fe;
+  color: white;
+  width: 100%;
+  margin-left: 0px;
+  pointer-events: none;
+}
 
-  .arrow-div {
-    display: inline-flex;
-    margin-right: 5px;
-  }
+.selected-snapshot .arrow-div {
+  pointer-events: all;
+}
 
-  .node-icon-div {
-    margin-right: 5px;
-    display: inline-flex;
-  }
+.selected-snapshot span {
+  pointer-events: all;
+}
+
+.arrow-div {
+  display: inline-flex;
+  margin-right: 5px;
+}
+
+.node-icon-div {
+  margin-right: 5px;
+  display: inline-flex;
+}
 
   .vm-snapshot-tree .tree,
   .vm-snapshot-tree .tree-node,

app/javascript/spec/vm-snapshot-tree/__snapshots__/vm-snapshot-tree.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`VM Snaspthot Tree Select should render snapshot tree 1`] = `
 <div>
   <div
-    className="checkbox"
+    className="vm-snapshot-tree"
   >
     <ForwardRef
       aria-label="Single select"
@@ -138,7 +138,7 @@ exports[`VM Snaspthot Tree Select should submit select API call 1`] = `
   >
     <div>
       <div
-        className="checkbox"
+        className="vm-snapshot-tree"
       >
         <ForwardRef
           aria-label="Single select"