@rescui/icons 0.16.16 → 1.0.0

package/lib/index.css

@@ -1,4 +1,4 @@
-._icon_gxmcf_4{
+._icon_oeje7x_4{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -8,7 +8,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._icon_gxmcf_4{
+._icon_oeje7x_4{
       --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
       --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
       --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -17,7 +17,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._icon_gxmcf_4{
+._icon_oeje7x_4{
     --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
     --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
     --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -25,30 +25,30 @@
     --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
 }
   }
-._icon_gxmcf_4{
+._icon_oeje7x_4{
 
   fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
 
   width:auto;
   height:var(--_rs-icons-height);
 }
-._sizeXS_gxmcf_14{
+._sizeXS_oeje7x_14{
   --_rs-icons-height:16px;
 }
-._sizeS_gxmcf_18{
+._sizeS_oeje7x_18{
   --_rs-icons-height:20px;
 }
-._sizeM_gxmcf_22{
+._sizeM_oeje7x_22{
   --_rs-icons-height:24px;
 }
-._sizeL_gxmcf_26{
+._sizeL_oeje7x_26{
   --_rs-icons-height:28px;
 }
-._light_gxmcf_30{
+._light_oeje7x_30{
   --rs-theme-dark:0;
   --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
 }
-._dark_gxmcf_34{
+._dark_oeje7x_34{
   --rs-theme-dark:1;
   --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
 }
@@ -60,5 +60,41 @@
     transform:rotate(360deg);
   }
 }
+._allVariants_oeje7x_48{
+  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
+  container:rs-icon / size;
+}
+._variant16_oeje7x_53,
+._variant20_oeje7x_54,
+._variant24_oeje7x_55{
+  display:none;
+}
+._variant28_oeje7x_58{
+  display:block;
+}
+@container rs-icon (max-height: 24px){
+  ._variant24_oeje7x_55{
+    display:block;
+  }
+  ._variant28_oeje7x_58{
+    display:none;
+  }
+}
+@container rs-icon (max-height: 20px){
+  ._variant20_oeje7x_54{
+    display:block;
+  }
+  ._variant24_oeje7x_55{
+    display:none;
+  }
+}
+@container rs-icon (max-height: 16px){
+  ._variant16_oeje7x_53{
+    display:block;
+  }
+  ._variant20_oeje7x_54{
+    display:none;
+  }
+}
 
 /*# sourceMappingURL=index.css.map */

package/lib/index.css.js

@@ -1,10 +1,15 @@
 export default {
-  "icon": "_icon_gxmcf_4",
-  "sizeXS": "_sizeXS_gxmcf_14",
-  "sizeS": "_sizeS_gxmcf_18",
-  "sizeM": "_sizeM_gxmcf_22",
-  "sizeL": "_sizeL_gxmcf_26",
-  "light": "_light_gxmcf_30",
-  "dark": "_dark_gxmcf_34"
+  "icon": "_icon_oeje7x_4",
+  "sizeXS": "_sizeXS_oeje7x_14",
+  "sizeS": "_sizeS_oeje7x_18",
+  "sizeM": "_sizeM_oeje7x_22",
+  "sizeL": "_sizeL_oeje7x_26",
+  "light": "_light_oeje7x_30",
+  "dark": "_dark_oeje7x_34",
+  "allVariants": "_allVariants_oeje7x_48",
+  "variant16": "_variant16_oeje7x_53",
+  "variant20": "_variant20_oeje7x_54",
+  "variant24": "_variant24_oeje7x_55",
+  "variant28": "_variant28_oeje7x_58"
 };
 //# sourceMappingURL=index.css.js.map

package/lib/index.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.css.js","names":[],"sources":["index.css.js"],"sourcesContent":["export default {\"icon\":\"_icon_gxmcf_4\",\"sizeXS\":\"_sizeXS_gxmcf_14\",\"sizeS\":\"_sizeS_gxmcf_18\",\"sizeM\":\"_sizeM_gxmcf_22\",\"sizeL\":\"_sizeL_gxmcf_26\",\"light\":\"_light_gxmcf_30\",\"dark\":\"_dark_gxmcf_34\"}"],"mappings":"AAAA,eAAe;EAAC,QAAO,eAAR;EAAwB,UAAS,kBAAjC;EAAoD,SAAQ,iBAA5D;EAA8E,SAAQ,iBAAtF;EAAwG,SAAQ,iBAAhH;EAAkI,SAAQ,iBAA1I;EAA4J,QAAO;AAAnK,CAAf"}
+{"version":3,"file":"index.css.js","names":[],"sources":["index.css.js"],"sourcesContent":["export default {\"icon\":\"_icon_oeje7x_4\",\"sizeXS\":\"_sizeXS_oeje7x_14\",\"sizeS\":\"_sizeS_oeje7x_18\",\"sizeM\":\"_sizeM_oeje7x_22\",\"sizeL\":\"_sizeL_oeje7x_26\",\"light\":\"_light_oeje7x_30\",\"dark\":\"_dark_oeje7x_34\",\"allVariants\":\"_allVariants_oeje7x_48\",\"variant16\":\"_variant16_oeje7x_53\",\"variant20\":\"_variant20_oeje7x_54\",\"variant24\":\"_variant24_oeje7x_55\",\"variant28\":\"_variant28_oeje7x_58\"}"],"mappings":"AAAA,eAAe;EAAC,QAAO,gBAAR;EAAyB,UAAS,mBAAlC;EAAsD,SAAQ,kBAA9D;EAAiF,SAAQ,kBAAzF;EAA4G,SAAQ,kBAApH;EAAuI,SAAQ,kBAA/I;EAAkK,QAAO,iBAAzK;EAA2L,eAAc,wBAAzM;EAAkO,aAAY,sBAA9O;EAAqQ,aAAY,sBAAjR;EAAwS,aAAY,sBAApT;EAA2U,aAAY;AAAvV,CAAf"}

package/lib/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.p.css","../../colors/src/public-api.p.css","<no source>","../src/api.p.css"],"names":[],"mappings":"AAGA;ECKE;;;GAGC;EACD,wCAAyC;EAgBzC,wIAA6I;EAC7I,yEAA0E;ADlB5E;ACgFE;ADxFF;MCyFM,kOAAkR;MAClR,8OAAsS;MACtS,8OAAsS;MACtS,oRAAgT;MAChT,mRAAgT;ADrFtT;ECsFE;AAEA;ADhGF;ICiGI,mNAAgD;IAChD,8SAAwD;IACxD,4SAAwD;IACxD,+NAA4D;IAC5D,sTAA4D;AD7FhE;EC8FE;ACzGF;;EFOE,0DAA2D;;EAE3D,UAAW;EACX;CEVF;AFaA;EGVE,uBAAwB;AHY1B;AAEA;EGXE,uBAAwB;AHa1B;AAEA;EGZE,uBAAwB;AHc1B;AAEA;EGbE,uBAAwB;AHe1B;AAEA;EACE,iBAAkB;EGdlB,qMAAwE;AHgB1E;AACA;EACE,iBAAkB;EGlBlB,qMAAwE;AHoB1E;AAEA;EACE;IACE,sBAAuB;EACzB;EACA;IACE,wBAAyB;EAC3B;AACF","file":"index.css","sourcesContent":["@import '@rescui/colors/src/public-api.p.css';\n@import \"./api.p.css\";\n\n.icon {\n  @mixin rs-theme-env;\n  @mixin rs-primary-colors-env;\n\n  fill: var(--_rs-icons-themed-fill-or-initial, currentcolor);\n\n  width: auto;\n  height: var(--_rs-icons-height);\n}\n\n.sizeXS {\n  @mixin icon-size-xs;\n}\n\n.sizeS {\n  @mixin icon-size-s;\n}\n\n.sizeM {\n  @mixin icon-size-m;\n}\n\n.sizeL {\n  @mixin icon-size-l;\n}\n\n.light {\n  --rs-theme-dark: 0;\n  @mixin icon-themed-fill-true;\n}\n.dark {\n  --rs-theme-dark: 1;\n  @mixin icon-themed-fill-true;\n}\n\n@keyframes :global(rs-icon-rotate) {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n","@import './simple-vars.p.css';\n\n/**\nSet \"protected\" theme variables. The most important variables are `--_rs-theme-dark-coefficient` and\n`--_rs-theme-light-coefficient`. They are used to calculate themed colors.\n@mixin\n */\n@define-mixin rs-theme-env {\n  --_rs-theme-dark: var(\n    --_rs-internal-force-theme-dark-consult-rescui-before-using,\n    var(--rs-theme-dark, 0)\n  );\n  --_rs-theme-flip: var(--rs-theme-flip, 0);\n  /*\n  We want to achieve following:\n  1. If --rs-theme-flip is 0 and --rs-theme-dark is 0, then --_rs-theme-dark-coefficient should be 0\n  2. If --rs-theme-flip is 1 and --rs-theme-dark is 0, then --_rs-theme-dark-coefficient should be 1\n  3. If --rs-theme-flip is 0 and --rs-theme-dark is 1, then --_rs-theme-dark-coefficient should be 1\n  4. If --rs-theme-flip is 1 and --rs-theme-dark is 1, then --_rs-theme-dark-coefficient should be 0\n\n  Basically, we want to flip --rs-theme-dark value if --rs-theme-flip is 1.\n  Logical XOR operation is exactly what we need here:\n   --_rs-theme-dark-coefficient = --rs-theme-dark XOR --rs-theme-flip\n\n   Mathematically, XOR operation can be expressed as:\n    A XOR B = A * (1 - B) + B * (1 - A)\n\n   */\n  --_rs-theme-dark-coefficient: calc(var(--_rs-theme-dark) * (1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip) * (1 - var(--_rs-theme-dark)));\n  --_rs-theme-light-coefficient: calc(1 - var(--_rs-theme-dark-coefficient));\n}\n\n\n\n$_rs-color-primary-light-theme-r: 107;\n$_rs-color-primary-light-theme-g: 87;\n/*$_rs-color-primary-light-theme-b: 255;*/\n\n$_rs-color-primary-dark-theme-r: 132;\n$_rs-color-primary-dark-theme-g: 115;\n/* $_rs-color-primary-dark-theme-b: 255; */\n\n$_rs-color-primary-r: calc($_rs-color-primary-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-g: calc($_rs-color-primary-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-b: 255; /* calc($_rs-color-primary-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dark-theme-b * var(--_rs-theme-dark-coefficient, 0)); */\n\n$_rs-color-primary-dim-light-theme-r: 137;\n$_rs-color-primary-dim-light-theme-g: 121;\n$_rs-color-primary-dim-light-theme-b: 255;\n\n$_rs-color-primary-dim-dark-theme-r: 111;\n$_rs-color-primary-dim-dark-theme-g: 97;\n$_rs-color-primary-dim-dark-theme-b: 210;\n\n$_rs-color-primary-dim-r: calc($_rs-color-primary-dim-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dim-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-dim-g: calc($_rs-color-primary-dim-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dim-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-dim-b: calc($_rs-color-primary-dim-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dim-dark-theme-b * var(--_rs-theme-dark-coefficient, 0));\n\n\n$_rs-color-primary-fog-light-theme-r: 225;\n$_rs-color-primary-fog-light-theme-g: 221;\n$_rs-color-primary-fog-light-theme-b: 255;\n\n$_rs-color-primary-fog-dark-theme-r: 46;\n$_rs-color-primary-fog-dark-theme-g: 43;\n$_rs-color-primary-fog-dark-theme-b: 73;\n\n$_rs-color-primary-fog-r: calc($_rs-color-primary-fog-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-fog-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-fog-g: calc($_rs-color-primary-fog-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-fog-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-fog-b: calc($_rs-color-primary-fog-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-fog-dark-theme-b * var(--_rs-theme-dark-coefficient, 0));\n\n\n$_rs-fog-coefficient-light-theme: 0.2;\n$_rs-fog-coefficient-dark-theme: 0.3;\n\n$_rs-fog-coefficient: calc($_rs-fog-coefficient-light-theme * var(--_rs-theme-light-coefficient, 1) + $_rs-fog-coefficient-dark-theme * var(--_rs-theme-dark-coefficient, 0));\n\n$_rs-color-primary-fallback: rgb($_rs-color-primary-r, $_rs-color-primary-g, $_rs-color-primary-b);\n$_rs-color-primary-dim-fallback: rgb($_rs-color-primary-dim-r, $_rs-color-primary-dim-g, $_rs-color-primary-dim-b);\n$_rs-color-primary-fog-fallback: rgb($_rs-color-primary-fog-r, $_rs-color-primary-fog-g, $_rs-color-primary-fog-b);\n\n$_rs-color-primary-t-dim-fallback: rgba($_rs-color-primary-r, $_rs-color-primary-g, $_rs-color-primary-b, 0.8);\n$_rs-color-primary-t-fog-fallback: rgba($_rs-color-primary-r, $_rs-color-primary-g, $_rs-color-primary-b, $_rs-fog-coefficient);\n\n/**\nSet \"protected\" primary colors variables.\nIt uses `color-mix` function if the browser supports it. Otherwise, it uses manual calculations for the r-g-b parts of the primary colors.\nRequires `rs-theme-env` mixin.\n@mixin\n */\n@define-mixin rs-primary-colors-env {\n  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)) {\n      --_rs-color-primary: color-mix(in srgb, var(--rs-color-primary-light-theme, $rs-color-primary-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, $rs-color-primary-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n      --_rs-color-primary-dim: color-mix(in srgb, var(--rs-color-primary-dim-light-theme, $rs-color-primary-dim-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, $rs-color-primary-dim-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n      --_rs-color-primary-fog: color-mix(in srgb, var(--rs-color-primary-fog-light-theme, $rs-color-primary-fog-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, $rs-color-primary-fog-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n      --_rs-color-primary-t-dim: color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, $rs-color-primary-t-dim-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, $rs-color-primary-t-dim-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n      --_rs-color-primary-t-fog: color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, $rs-color-primary-t-fog-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, $rs-color-primary-t-fog-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n  }\n\n  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)) {\n    --_rs-color-primary: $_rs-color-primary-fallback;\n    --_rs-color-primary-dim: $_rs-color-primary-dim-fallback;\n    --_rs-color-primary-fog: $_rs-color-primary-fog-fallback;\n    --_rs-color-primary-t-dim: $_rs-color-primary-t-dim-fallback;\n    --_rs-color-primary-t-fog: $_rs-color-primary-t-fog-fallback;\n  }\n}\n",null,"@import '@rescui/colors/src/auto-vars.p.css';\n\n@define-mixin icon-size-xs {\n  --_rs-icons-height: 16px;\n}\n@define-mixin icon-size-s {\n  --_rs-icons-height: 20px;\n}\n@define-mixin icon-size-m {\n  --_rs-icons-height: 24px;\n}\n@define-mixin icon-size-l {\n  --_rs-icons-height: 28px;\n}\n\n@define-mixin icon-themed-fill-true {\n  --_rs-icons-themed-fill-or-initial: rgb($rs-color-light_black-dark_white)\n}\n@define-mixin icon-themed-fill-false {\n  --_rs-icons-themed-fill-or-initial: initial;\n}\n"]}
+{"version":3,"sources":["../src/index.p.css","../../colors/src/public-api.p.css","<no source>","../src/api.p.css"],"names":[],"mappings":"AAGA;ECKE;;;GAGC;EACD,wCAAyC;EAgBzC,wIAA6I;EAC7I,yEAA0E;ADlB5E;ACgFE;ADxFF;MCyFM,kOAAkR;MAClR,8OAAsS;MACtS,8OAAsS;MACtS,oRAAgT;MAChT,mRAAgT;ADrFtT;ECsFE;AAEA;ADhGF;ICiGI,mNAAgD;IAChD,8SAAwD;IACxD,4SAAwD;IACxD,+NAA4D;IAC5D,sTAA4D;AD7FhE;EC8FE;ACzGF;;EFOE,0DAA2D;;EAE3D,UAAW;EACX;CEVF;AFaA;EGVE,uBAAwB;AHY1B;AAEA;EGXE,uBAAwB;AHa1B;AAEA;EGZE,uBAAwB;AHc1B;AAEA;EGbE,uBAAwB;AHe1B;AAEA;EACE,iBAAkB;EGdlB,qMAAwE;AHgB1E;AACA;EACE,iBAAkB;EGlBlB,qMAAwE;AHoB1E;AAEA;EACE;IACE,sBAAuB;EACzB;EACA;IACE,wBAAyB;EAC3B;AACF;AAEA;EACE,qEAAsE;EACtE,wBAAyB;AAC3B;AAEA;;;EAGE,YAAa;AACf;AACA;EACE,aAAc;AAChB;AACA;EACE;IACE,aAAc;EAChB;EACA;IACE,YAAa;EACf;AACF;AACA;EACE;IACE,aAAc;EAChB;EACA;IACE,YAAa;EACf;AACF;AACA;EACE;IACE,aAAc;EAChB;EACA;IACE,YAAa;EACf;AACF","file":"index.css","sourcesContent":["@import '@rescui/colors/src/public-api.p.css';\n@import './api.p.css';\n\n.icon {\n  @mixin rs-theme-env;\n  @mixin rs-primary-colors-env;\n\n  fill: var(--_rs-icons-themed-fill-or-initial, currentcolor);\n\n  width: auto;\n  height: var(--_rs-icons-height);\n}\n\n.sizeXS {\n  @mixin icon-size-xs;\n}\n\n.sizeS {\n  @mixin icon-size-s;\n}\n\n.sizeM {\n  @mixin icon-size-m;\n}\n\n.sizeL {\n  @mixin icon-size-l;\n}\n\n.light {\n  --rs-theme-dark: 0;\n  @mixin icon-themed-fill-true;\n}\n.dark {\n  --rs-theme-dark: 1;\n  @mixin icon-themed-fill-true;\n}\n\n@keyframes :global(rs-icon-rotate) {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.allVariants {\n  aspect-ratio: var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);\n  container: rs-icon / size;\n}\n\n.variant16,\n.variant20,\n.variant24 {\n  display: none;\n}\n.variant28 {\n  display: block;\n}\n@container rs-icon (max-height: 24px) {\n  .variant24 {\n    display: block;\n  }\n  .variant28 {\n    display: none;\n  }\n}\n@container rs-icon (max-height: 20px) {\n  .variant20 {\n    display: block;\n  }\n  .variant24 {\n    display: none;\n  }\n}\n@container rs-icon (max-height: 16px) {\n  .variant16 {\n    display: block;\n  }\n  .variant20 {\n    display: none;\n  }\n}\n","@import './simple-vars.p.css';\n\n/**\nSet \"protected\" theme variables. The most important variables are `--_rs-theme-dark-coefficient` and\n`--_rs-theme-light-coefficient`. They are used to calculate themed colors.\n@mixin\n */\n@define-mixin rs-theme-env {\n  --_rs-theme-dark: var(\n    --_rs-internal-force-theme-dark-consult-rescui-before-using,\n    var(--rs-theme-dark, 0)\n  );\n  --_rs-theme-flip: var(--rs-theme-flip, 0);\n  /*\n  We want to achieve following:\n  1. If --rs-theme-flip is 0 and --rs-theme-dark is 0, then --_rs-theme-dark-coefficient should be 0\n  2. If --rs-theme-flip is 1 and --rs-theme-dark is 0, then --_rs-theme-dark-coefficient should be 1\n  3. If --rs-theme-flip is 0 and --rs-theme-dark is 1, then --_rs-theme-dark-coefficient should be 1\n  4. If --rs-theme-flip is 1 and --rs-theme-dark is 1, then --_rs-theme-dark-coefficient should be 0\n\n  Basically, we want to flip --rs-theme-dark value if --rs-theme-flip is 1.\n  Logical XOR operation is exactly what we need here:\n   --_rs-theme-dark-coefficient = --rs-theme-dark XOR --rs-theme-flip\n\n   Mathematically, XOR operation can be expressed as:\n    A XOR B = A * (1 - B) + B * (1 - A)\n\n   */\n  --_rs-theme-dark-coefficient: calc(var(--_rs-theme-dark) * (1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip) * (1 - var(--_rs-theme-dark)));\n  --_rs-theme-light-coefficient: calc(1 - var(--_rs-theme-dark-coefficient));\n}\n\n\n\n$_rs-color-primary-light-theme-r: 107;\n$_rs-color-primary-light-theme-g: 87;\n/*$_rs-color-primary-light-theme-b: 255;*/\n\n$_rs-color-primary-dark-theme-r: 132;\n$_rs-color-primary-dark-theme-g: 115;\n/* $_rs-color-primary-dark-theme-b: 255; */\n\n$_rs-color-primary-r: calc($_rs-color-primary-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-g: calc($_rs-color-primary-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-b: 255; /* calc($_rs-color-primary-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dark-theme-b * var(--_rs-theme-dark-coefficient, 0)); */\n\n$_rs-color-primary-dim-light-theme-r: 137;\n$_rs-color-primary-dim-light-theme-g: 121;\n$_rs-color-primary-dim-light-theme-b: 255;\n\n$_rs-color-primary-dim-dark-theme-r: 111;\n$_rs-color-primary-dim-dark-theme-g: 97;\n$_rs-color-primary-dim-dark-theme-b: 210;\n\n$_rs-color-primary-dim-r: calc($_rs-color-primary-dim-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dim-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-dim-g: calc($_rs-color-primary-dim-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dim-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-dim-b: calc($_rs-color-primary-dim-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-dim-dark-theme-b * var(--_rs-theme-dark-coefficient, 0));\n\n\n$_rs-color-primary-fog-light-theme-r: 225;\n$_rs-color-primary-fog-light-theme-g: 221;\n$_rs-color-primary-fog-light-theme-b: 255;\n\n$_rs-color-primary-fog-dark-theme-r: 46;\n$_rs-color-primary-fog-dark-theme-g: 43;\n$_rs-color-primary-fog-dark-theme-b: 73;\n\n$_rs-color-primary-fog-r: calc($_rs-color-primary-fog-light-theme-r * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-fog-dark-theme-r * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-fog-g: calc($_rs-color-primary-fog-light-theme-g * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-fog-dark-theme-g * var(--_rs-theme-dark-coefficient, 0));\n$_rs-color-primary-fog-b: calc($_rs-color-primary-fog-light-theme-b * var(--_rs-theme-light-coefficient, 1) + $_rs-color-primary-fog-dark-theme-b * var(--_rs-theme-dark-coefficient, 0));\n\n\n$_rs-fog-coefficient-light-theme: 0.2;\n$_rs-fog-coefficient-dark-theme: 0.3;\n\n$_rs-fog-coefficient: calc($_rs-fog-coefficient-light-theme * var(--_rs-theme-light-coefficient, 1) + $_rs-fog-coefficient-dark-theme * var(--_rs-theme-dark-coefficient, 0));\n\n$_rs-color-primary-fallback: rgb($_rs-color-primary-r, $_rs-color-primary-g, $_rs-color-primary-b);\n$_rs-color-primary-dim-fallback: rgb($_rs-color-primary-dim-r, $_rs-color-primary-dim-g, $_rs-color-primary-dim-b);\n$_rs-color-primary-fog-fallback: rgb($_rs-color-primary-fog-r, $_rs-color-primary-fog-g, $_rs-color-primary-fog-b);\n\n$_rs-color-primary-t-dim-fallback: rgba($_rs-color-primary-r, $_rs-color-primary-g, $_rs-color-primary-b, 0.8);\n$_rs-color-primary-t-fog-fallback: rgba($_rs-color-primary-r, $_rs-color-primary-g, $_rs-color-primary-b, $_rs-fog-coefficient);\n\n/**\nSet \"protected\" primary colors variables.\nIt uses `color-mix` function if the browser supports it. Otherwise, it uses manual calculations for the r-g-b parts of the primary colors.\nRequires `rs-theme-env` mixin.\n@mixin\n */\n@define-mixin rs-primary-colors-env {\n  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)) {\n      --_rs-color-primary: color-mix(in srgb, var(--rs-color-primary-light-theme, $rs-color-primary-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, $rs-color-primary-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n      --_rs-color-primary-dim: color-mix(in srgb, var(--rs-color-primary-dim-light-theme, $rs-color-primary-dim-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, $rs-color-primary-dim-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n      --_rs-color-primary-fog: color-mix(in srgb, var(--rs-color-primary-fog-light-theme, $rs-color-primary-fog-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, $rs-color-primary-fog-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n      --_rs-color-primary-t-dim: color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, $rs-color-primary-t-dim-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, $rs-color-primary-t-dim-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n      --_rs-color-primary-t-fog: color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, $rs-color-primary-t-fog-light-theme) calc(100% * var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, $rs-color-primary-t-fog-dark-theme) calc(100% * var(--_rs-theme-dark-coefficient, 0)));\n  }\n\n  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)) {\n    --_rs-color-primary: $_rs-color-primary-fallback;\n    --_rs-color-primary-dim: $_rs-color-primary-dim-fallback;\n    --_rs-color-primary-fog: $_rs-color-primary-fog-fallback;\n    --_rs-color-primary-t-dim: $_rs-color-primary-t-dim-fallback;\n    --_rs-color-primary-t-fog: $_rs-color-primary-t-fog-fallback;\n  }\n}\n",null,"@import '@rescui/colors/src/auto-vars.p.css';\n\n@define-mixin icon-size-xs {\n  --_rs-icons-height: 16px;\n}\n@define-mixin icon-size-s {\n  --_rs-icons-height: 20px;\n}\n@define-mixin icon-size-m {\n  --_rs-icons-height: 24px;\n}\n@define-mixin icon-size-l {\n  --_rs-icons-height: 28px;\n}\n\n@define-mixin icon-themed-fill-true {\n  --_rs-icons-themed-fill-or-initial: rgb($rs-color-light_black-dark_white)\n}\n@define-mixin icon-themed-fill-false {\n  --_rs-icons-themed-fill-or-initial: initial;\n}\n"]}