Move css variables into the componnet wrapper

Author: zvizvi

dist/cssonly.css

@@ -1,7 +1,7 @@
 {
   "name": "cssonly",
   "description": "",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "main": "dist/cssonly.css",
   "devDependencies": {
     "autoprefixer": "^9.8.6",

package.json

@@ -1,9 +1,7 @@
-:root {
+.cssonly-image-comparison {
   --height: 400px;
   --width: 600px;
-}
 
-.cssonly-image-comparison {
   display: inline-block;
   position: relative;
   width: var(--width);

src/image-comparison/style.scss

@@ -1,15 +1,12 @@
-:root {
+.cssonly-rating {
   --icon-size: 36px;
   --filled-icon: "★";
   --non-filled-icon: "☆";
   --filled-color: #ffb400;
   --non-filled-color: rgba(0, 0, 0, 0.26);
-}
 
-.cssonly-rating {
   display: inline-flex;
   position: relative;
-  font-size: var(--icon-size);
   flex-direction: row-reverse;
   justify-content: center;
 
@@ -25,7 +22,7 @@
       &::before {
         content: var(--non-filled-icon);
         color: var(--non-filled-color);
-        font-size: inherit;
+        font-size: var(--icon-size);
         display: inline-block;
         cursor: pointer;
         transition: color 0.15s;

src/rating/style.scss

@@ -1,11 +1,9 @@
-:root {
+.cssonly-tabs {
   // --tabs-number: 5; // one of them is required
   // --tabs-width: 70px; // one of them is required
   --line-color: #4f46e5;
   --trnasition-time: 0.2s;
-}
 
-.cssonly-tabs {
   display: flex;
   position: relative;
   align-items: center;