@bizhermit/react-sdk
Version:
React SDK
1 lines • 38.7 kB
JavaScript
"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(n,o,c,e){void 0===e&&(e=c);var r=Object.getOwnPropertyDescriptor(o,c);r&&!("get"in r?!o.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return o[c]}}),Object.defineProperty(n,e,r)}:function(n,o,c,e){void 0===e&&(e=c),n[e]=o[c]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(n,o){Object.defineProperty(n,"default",{enumerable:!0,value:o})}:function(n,o){n.default=o}),__importStar=this&&this.__importStar||function(n){if(n&&n.__esModule)return n;var o={};if(null!=n)for(var c in n)"default"!==c&&Object.prototype.hasOwnProperty.call(n,c)&&__createBinding(o,n,c);return __setModuleDefault(o,n),o},__importDefault=this&&this.__importDefault||function(n){return n&&n.__esModule?n:{default:n}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.IconStyle=exports.iconChildCount=exports.iconCn=void 0;const array_utils_1=__importDefault(require("@bizhermit/basic-utils/dist/array-utils")),react_1=__importDefault(require("react")),css_var_1=__importStar(require("../styles/css-var")),jsx_style_1=__importDefault(require("../styles/jsx-style")),attributes_1=require("../utils/attributes"),cn="bh-icon",cnc=`${cn}_c`;exports.iconCn=cn;const singleDivImages=["users","save-as","sync","graph-border","history","code","calendar","location","clip","lock","unlock","folder-check","folder-add","guard","c-cross","c-add","document"],doubleDivImages=["post","cloud","cloud-check","cloud-download","cloud-upload","gear","list","share","note"],iconChildCount=n=>singleDivImages.includes(n)?1:doubleDivImages.includes(n)?2:0;exports.iconChildCount=iconChildCount;const Icon=react_1.default.forwardRef(((n,o)=>react_1.default.createElement("div",{...(0,attributes_1.attributes)(n,cn,`${cn}-${n.$image}`),ref:o,"data-signal":n.$signal,"data-spin":n.$spinR?"r":n.$spinL?"l":void 0},array_utils_1.default.generateArray((0,exports.iconChildCount)(n.$image),(n=>react_1.default.createElement("div",{key:n,className:cnc}))),exports.IconStyle))),iconFc="var(--bh-icon-fc)",iconBc="var(--bh-icon-bc)";exports.IconStyle=react_1.default.createElement(jsx_style_1.default,{id:cn},(()=>`\n.${cn} {\n box-sizing: border-box;\n position: relative;\n overflow: hidden;\n height: calc(${css_var_1.default.fs} * 1.55);\n width: calc(${css_var_1.default.fs} * 1.55);\n flex: none;\n --bh-icon-fc: ${css_var_1.default.fc};\n --bh-icon-bc: ${css_var_1.default.bgc};\n}\n.${cnc} {\n box-sizing: border-box;\n position: absolute;\n top: 0px;\n left: 0px;\n height: 100%;\n width: 100%;\n cursor: inherit;\n}\n.${cn}::before, .${cn}::after,\n.${cnc}::before, .${cnc}::after {\n ${css_var_1.CssPV.ba}\n transition: background 0.1s, border-color 0.1s;\n}\n.${cn}[data-spin="r"] {\n animation: iconSpinR 3s linear 0s infinite normal;\n}\n.${cn}[data-spin="l"] {\n animation: iconSpinL 3s linear 0s infinite normal;\n}\n@keyframes iconSpinR {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n@keyframes iconSpinL {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(-360deg); }\n}\n${(0,css_var_1.signalIterator)(((n,o,c)=>`\n.${cn}${c} {\n --bh-icon-fc: ${o.fc} !important;\n}`)).join("")}\n.${cn}-favicon::before {\n height: 80%;\n width: 80%;\n top: 10%;\n left: 10%;\n background: url("/favicon.ico") center center no-repeat;\n background-size: cover;\n overflow: hidden;\n}\n.${cn}-add::before,\n.${cn}-minus::before {\n height: 3px;\n width: 70%;\n top: calc(50% - 1.5px);\n left: 15%;\n background-color: ${iconFc};\n border-radius: 1px;\n}\n.${cn}-add::after {\n height: 70%;\n width: 3px;\n top: 15%;\n left: calc(50% - 1.5px);\n background-color: ${iconFc};\n border-radius: 1px;\n}\n.${cn}-cross::before,\n.${cn}-cross::after {\n height: 80%;\n width: 3px;\n top: 10%;\n left: calc(50% - 1.5px);\n background-color: ${iconFc};\n border-radius: 1px;\n}\n.${cn}-cross::before {\n transform: rotate(45deg);\n}\n.${cn}-cross::after {\n transform: rotate(135deg);\n}\n.${cn}-check::before {\n width: 44%;\n height: 66%;\n top: 10%;\n left: 30%;\n transform: rotate(40deg);\n border-bottom: 3px solid ${iconFc};\n border-right: 3px solid ${iconFc};\n border-radius: 1px;\n}\n.${cn}-reorder::before,\n.${cn}-reorder::after {\n height: 3px;\n width: 70%;\n left: 15%;\n background: ${iconFc};\n border-radius: 1px;\n}\n.${cn}-reorder::before {\n top: calc(50% - 4px);\n}\n.${cn}-reorder::after {\n bottom: calc(50% - 4px);\n}\n.${cn}-hamburger::before,\n.${cn}-align-left::before,\n.${cn}-align-center::before,\n.${cn}-align-right::before {\n height: 60%;\n width: 70%;\n top: 20%;\n left: 15%;\n border-top: 3px solid ${iconFc};\n border-bottom: 3px solid ${iconFc};\n}\n.${cn}-hamburger::after {\n height: 2px;\n width: 70%;\n top: calc(50% - 1.5px);\n left: 15%;\n border-top: 3px solid ${iconFc};\n}\n.${cn}-align-left::after,\n.${cn}-align-center::after,\n.${cn}-align-right::after {\n height: 2px;\n width: 50%;\n top: calc(50% - 1.5px);\n border-top: 3px solid ${iconFc};\n}\n.${cn}-align-left::after {\n left: 15%;\n}\n.${cn}-align-center::after {\n left: 25%;\n}\n.${cn}-align-right::after {\n left: 35%;\n}\n.${cn}-v-hamburger::before,\n.${cn}-align-top::before,\n.${cn}-align-middle::before,\n.${cn}-align-bottom::before {\n height: 70%;\n width: 60%;\n top: 15%;\n left: 20%;\n border-left: 3px solid ${iconFc};\n border-right: 3px solid ${iconFc};\n}\n.${cn}-v-hamburger::after {\n height: 70%;\n width: 2px;\n top: 15%;\n left: calc(50% - 1.5px);\n border-left: 3px solid ${iconFc};\n}\n.${cn}-align-top::after,\n.${cn}-align-middle::after,\n.${cn}-align-bottom::after {\n height: 50%;\n width: 2px;\n left: calc(50% - 1.5px);\n border-left: 3px solid ${iconFc};\n}\n.${cn}-align-top::after {\n top: 15%;\n}\n.${cn}-align-middle::after {\n top: 25%;\n}\n.${cn}-align-bottom::after {\n top: 35%;\n}\n.${cn}-pull-up::before,\n.${cn}-pull-down::before,\n.${cn}-pull-left::before,\n.${cn}-pull-left-d::before,\n.${cn}-pull-left-d::after,\n.${cn}-pull-right::before,\n.${cn}-pull-right-d::before,\n.${cn}-pull-right-d::after {\n width: calc(60% - 3px);\n height: calc(60% - 3px);\n transform: rotate(45deg);\n}\n.${cn}-pull-up::before {\n top: calc(50% - 3px);\n left: 26%;\n border-top: 3px solid ${iconFc};\n border-left: 3px solid ${iconFc};\n}\n.${cn}-pull-down::before {\n bottom: calc(50% - 4px);\n left: 26%;\n border-bottom: 3px solid ${iconFc};\n border-right: 3px solid ${iconFc};\n}\n.${cn}-pull-left::before {\n bottom: 26%;\n right: 15%;\n border-bottom: 3px solid ${iconFc};\n border-left: 3px solid ${iconFc};\n}\n.${cn}-pull-left-d::before,\n.${cn}-pull-left-d::after {\n bottom: 26%;\n border-bottom: 3px solid ${iconFc};\n border-left: 3px solid ${iconFc};\n}\n.${cn}-pull-left-d::before {\n right: -3%;\n}\n.${cn}-pull-left-d::after {\n right: 32%;\n}\n.${cn}-pull-right::before {\n bottom: 26%;\n left: 15%;\n border-top: 3px solid ${iconFc};\n border-right: 3px solid ${iconFc};\n}\n.${cn}-pull-right-d::before,\n.${cn}-pull-right-d::after {\n bottom: 26%;\n border-top: 3px solid ${iconFc};\n border-right: 3px solid ${iconFc};\n}\n.${cn}-pull-right-d::before {\n left: -3%;\n}\n.${cn}-pull-right-d::after {\n left: 32%;\n}\n.${cn}-pull-x::before,\n.${cn}-pull-x::after {\n width: 45%;\n height: 45%;\n top: 27.5%;\n border-radius: 1px;\n transform: rotate(45deg);\n}\n.${cn}-pull-x::before {\n left: 17%;\n border-bottom: 3px solid ${iconFc};\n border-left: 3px solid ${iconFc};\n}\n.${cn}-pull-x::after {\n right: 17%;\n border-top: 3px solid ${iconFc};\n border-right: 3px solid ${iconFc};\n}\n.${cn}-pull-y::before,\n.${cn}-pull-y::after {\n width: 45%;\n height: 45%;\n left: 27.5%;\n border-radius: 1px;\n transform: rotate(45deg);\n}\n.${cn}-pull-y::before {\n top: 17%;\n border-top: 3px solid ${iconFc};\n border-left: 3px solid ${iconFc};\n}\n.${cn}-pull-y::after {\n bottom: 17%;\n border-bottom: 3px solid ${iconFc};\n border-right: 3px solid ${iconFc};\n}\n.${cn}-pull-ul::before,\n.${cn}-pull-ur::before,\n.${cn}-pull-dr::before,\n.${cn}-pull-dl::before {\n width: 50%;\n height: 50%;\n border-radius: 1px;\n}\n.${cn}-pull-ul::before {\n left: 30%;\n top: 30%;\n border-top: 3px solid ${iconFc};\n border-left: 3px solid ${iconFc};\n}\n.${cn}-pull-ur::before {\n right: 30%;\n top: 30%;\n border-top: 3px solid ${iconFc};\n border-right: 3px solid ${iconFc};\n}\n.${cn}-pull-dr::before {\n right: 30%;\n bottom: 30%;\n border-bottom: 3px solid ${iconFc};\n border-right: 3px solid ${iconFc};\n}\n.${cn}-pull-dl::before {\n left: 30%;\n bottom: 30%;\n border-bottom: 3px solid ${iconFc};\n border-left: 3px solid ${iconFc};\n}\n.${cn}-pull-uldr::before,\n.${cn}-pull-uldr::after,\n.${cn}-pull-urdl::before,\n.${cn}-pull-urdl::after {\n width: 45%;\n height: 45%;\n border-radius: 1px;\n}\n.${cn}-pull-uldr::before {\n top: 20%;\n left: 20%;\n border-top: 3px solid ${iconFc};\n border-left: 3px solid ${iconFc};\n}\n.${cn}-pull-uldr::after {\n bottom: 20%;\n right: 20%;\n border-bottom: 3px solid ${iconFc};\n border-right: 3px solid ${iconFc};\n}\n.${cn}-pull-urdl::before {\n top: 20%;\n right: 20%;\n border-top: 3px solid ${iconFc};\n border-right: 3px solid ${iconFc};\n}\n.${cn}-pull-urdl::after {\n bottom: 20%;\n left: 20%;\n border-bottom: 3px solid ${iconFc};\n border-left: 3px solid ${iconFc};\n}\n.${cn}-arrow-up::before,\n.${cn}-arrow-down::before,\n.${cn}-arrow-left::before,\n.${cn}-arrow-right::before {\n height: 70%;\n width: 70%;\n top: 15%;\n left: 15%;\n background-color: ${iconFc};\n}\n.${cn}-arrow-up::before {\n clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%);\n}\n.${cn}-arrow-down::before {\n clip-path: polygon(0% 50%, 50% 100%, 100% 50%, 70% 50%, 70% 0%, 30% 0%, 30% 50%);\n}\n.${cn}-arrow-left::before {\n clip-path: polygon(0% 50%, 50% 0%, 50% 30%, 100% 30%, 100% 70%, 50% 70%, 50% 100%);\n}\n.${cn}-arrow-right::before {\n clip-path: polygon(0% 30%, 50% 30%, 50% 0%, 100% 50%, 50% 100%, 50% 70%, 0% 70%);\n}\n.${cn}-arrow-x::before {\n height: 70%;\n width: 80%;\n top: 15%;\n left: 10%;\n background-color: ${iconFc};\n clip-path: polygon(0% 50%, 35% 0%, 35% 30%, 65% 30%, 65% 0%, 100% 50%, 65% 100%, 65% 70%, 35% 70%, 35% 100%, 0% 50%);\n}\n.${cn}-arrow-y::before {\n height: 80%;\n width: 70%;\n top: 10%;\n left: 15%;\n background-color: ${iconFc};\n clip-path: polygon(0% 35%, 50% 0%, 100% 35%, 70% 35%, 70% 65%, 100% 65%, 50% 100%, 0% 65%, 30% 65%, 30% 35%);\n}\n.${cn}-arrow-ul::before,\n.${cn}-arrow-ur::before,\n.${cn}-arrow-dr::before,\n.${cn}-arrow-dl::before {\n height: 66%;\n width: 66%;\n top: 17%;\n left: 17%;\n background-color: ${iconFc};\n}\n.${cn}-arrow-ul::before {\n clip-path: polygon(0% 0%, 90% 0%, 60% 30%, 100% 70%, 70% 100%, 30% 60%, 0% 90%);\n}\n.${cn}-arrow-ur::before {\n clip-path: polygon(10% 0%, 100% 0%, 100% 90%, 70% 60%, 30% 100%, 0% 70%, 40% 30%);\n}\n.${cn}-arrow-dr::before {\n clip-path: polygon(100% 10%, 100% 100%, 10% 100%, 40% 70%, 0% 30%, 30% 0%, 70% 40%);\n}\n.${cn}-arrow-dl::before {\n clip-path: polygon(90% 100%, 0% 100%, 0% 10%, 30% 40%, 70% 0%, 100% 30%, 60% 70%);\n}\n.${cn}-arrow-uldr::before,\n.${cn}-arrow-urdl::before {\n height: 66%;\n width: 66%;\n top: 17%;\n left: 17%;\n background-color: ${iconFc};\n}\n.${cn}-arrow-uldr::before {\n clip-path: polygon(0% 75%, 0% 0%, 75% 0%, 50% 25%, 75% 50%, 100% 25%, 100% 100%, 25% 100%, 50% 75%, 25% 50%);\n}\n.${cn}-arrow-urdl::before {\n clip-path: polygon(100% 75%, 100% 0%, 25% 0%, 50% 25%, 25% 50%, 0% 25%, 0% 100%, 75% 100%, 50% 75%, 75% 50%);\n}\n.${cn}-signin::before,\n.${cn}-signout::before {\n height: 80%;\n width: 60%;\n top: 10%;\n border: 2.5px solid ${iconFc};\n}\n.${cn}-signin::before {\n right: 15%;\n border-left-color: transparent;\n}\n.${cn}-signout::before {\n left: 15%;\n border-right-color: transparent;\n}\n.${cn}-signin::after,\n.${cn}-signout::after {\n height: 54%;\n width: 54%;\n top: 23%;\n background-color: ${iconFc};\n clip-path: polygon(0% 30%, 50% 30%, 50% 0%, 100% 50%, 50% 100%, 50% 70%, 0% 70%);\n}\n.${cn}-signin::after {\n left: 15%;\n}\n.${cn}-signout::after {\n right: 10%;\n}\n.${cn}-user::before {\n height: 40%;\n width: 40%;\n border-radius: 50%;\n top: 12%;\n left: 30%;\n background: ${iconFc};\n}\n.${cn}-user::after {\n height: 33%;\n width: 70%;\n border-radius: 50% 50% 1px 1px;\n background: 50%;\n bottom: 13%;\n left: 15%;\n background: ${iconFc};\n}\n.${cn}-users::before {\n height: 38%;\n width: 38%;\n border-radius: 50%;\n top: 10%;\n right: 21%;\n background: ${iconFc};\n z-index: 0;\n}\n.${cn}-users::after {\n height: 33%;\n width: 58%;\n border-radius: 50% 50% 1px 1px;\n background: 50%;\n bottom: 20%;\n right: 10%;\n background: ${iconFc};\n z-index: 0;\n}\n.${cn}-users > .${cnc}::before {\n height: 38%;\n width: 38%;\n border-radius: 50%;\n top: 20%;\n left: 21%;\n background: ${iconFc};\n z-index: 1;\n}\n.${cn}-users > .${cnc}::after {\n height: 33%;\n width: 58%;\n border-radius: 50% 50% 1px 1px;\n background: 50%;\n bottom: 10%;\n left: 10%;\n background: ${iconFc};\n z-index: 1;\n}\n.${cn}-users > .${cnc} {\n filter: drop-shadow(2px -1px 0px ${iconBc});\n z-index: 1;\n}\n.${cn}-post::before {\n height: 40%;\n width: 2px;\n top: 30%;\n left: calc(50% - 1px);\n background-color: ${iconFc};\n}\n.${cn}-post::after {\n height: 30%;\n width: 60%;\n top: calc(50% - 1px);\n left: 20%;\n border-top: 2px solid ${iconFc};\n border-left: 2px solid ${iconFc};\n border-right: 2px solid ${iconFc};\n}\n.${cn}-post > .${cnc}::before,\n.${cn}-post > .${cnc}::after {\n height: 24%;\n width: 24%;\n border-radius: 50%;\n background-color: ${iconFc};\n}\n.${cn}-post > .${cnc}:nth-child(1)::before {\n top: 10%;\n left: 38%;\n}\n.${cn}-post > .${cnc}:nth-child(1)::after {\n bottom: 10%;\n left: 38%;\n}\n.${cn}-post > .${cnc}:nth-child(2)::before {\n bottom: 10%;\n left: 10%;\n}\n.${cn}-post > .${cnc}:nth-child(2)::after {\n bottom: 10%;\n right: 10%;\n}\n.${cn}-power::before {\n height: 70%;\n width: 70%;\n top: 20%;\n left: 15%;\n border: 3px solid ${iconFc};\n border-radius: 50%;\n clip-path: polygon(0% 0%, 30% 0%, 30% 50%, 70% 50%, 70% 0%, 100% 0%, 100% 100%, 0% 100%);\n}\n.${cn}-power::after {\n height: 40%;\n width: 3px;\n top: 10%;\n left: calc(50% - 1.5px);\n background-color: ${iconFc};\n border-radius: 1px;\n}\n.${cn}-stop::before {\n height: 50%;\n width: 50%;\n top: 25%;\n left: 25%;\n background-color: ${iconFc};\n}\n.${cn}-pose::before,\n.${cn}-pose::after {\n height: 50%;\n width: 21%;\n top: 25%;\n background-color: ${iconFc};\n}\n.${cn}-pose::before {\n left: 25%;\n}\n.${cn}-pose::after {\n right: 25%;\n}\n.${cn}-play::before,\n.${cn}-backwards::before {\n height: 60%;\n width: 60%;\n top: 20%;\n left: 20%;\n background-color: ${iconFc};\n}\n.${cn}-play::before {\n clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\n}\n.${cn}-backwards::before {\n clip-path: polygon(0% 50%, 100% 0%, 100% 100%);\n}\n.${cn}-fast-forward::before,\n.${cn}-fast-forward::after,\n.${cn}-rewind::before,\n.${cn}-rewind::after {\n height: 40%;\n width: 40%;\n top: 30%;\n background-color: ${iconFc};\n}\n.${cn}-rewind::before,\n.${cn}-rewind::after {\n clip-path: polygon(0% 50%, 100% 0%, 100% 100%);\n}\n.${cn}-fast-forward::before,\n.${cn}-fast-forward::after {\n clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\n}\n.${cn}-fast-forward::before,\n.${cn}-rewind::before {\n left: 10%;\n}\n.${cn}-fast-forward::after,\n.${cn}-rewind::after {\n right: 10%;\n}\n.${cn}-download::before,\n.${cn}-upload::before {\n height: 60%;\n width: 50%;\n top: 10%;\n left: 25%;\n background-color: ${iconFc};\n}\n.${cn}-download::after,\n.${cn}-upload::after {\n height: 30%;\n width: 80%;\n bottom: 15%;\n left: 10%;\n background-color: transparent;\n border-bottom: 2.5px solid ${iconFc};\n border-right: 2.5px solid ${iconFc};\n border-left: 2.5px solid ${iconFc};\n}\n.${cn}-download::before {\n clip-path: polygon(30% 0%, 70% 0%, 70% 40%, 100% 40%, 50% 100%, 0% 40%, 30% 40%);\n}\n.${cn}-upload::before {\n clip-path: polygon(50% 0%, 100% 60%, 70% 60%, 70% 100%, 30% 100%, 30% 60%, 0% 60%);\n}\n.${cn}-cloud::before,\n.${cn}-cloud-check::before,\n.${cn}-cloud-upload::before,\n.${cn}-cloud-download::before,\n.${cn}-cloud::after,\n.${cn}-cloud-check::after,\n.${cn}-cloud-upload::after,\n.${cn}-cloud-download::after {\n height: 42%;\n width: 42%;\n border-radius: 50%;\n background-color: ${iconFc};\n}\n.${cn}-cloud::before,\n.${cn}-cloud-check::before,\n.${cn}-cloud-upload::before,\n.${cn}-cloud-download::before {\n bottom: 20%;\n left: 10%;\n}\n.${cn}-cloud::after,\n.${cn}-cloud-check::after,\n.${cn}-cloud-upload::after,\n.${cn}-cloud-download::after {\n top: 20%;\n left: 22%;\n}\n.${cn}-cloud > .${cnc}:nth-child(1)::before,\n.${cn}-cloud-check > .${cnc}:nth-child(1)::before,\n.${cn}-cloud-upload > .${cnc}:nth-child(1)::before,\n.${cn}-cloud-download > .${cnc}:nth-child(1)::before {\n bottom: 20%;\n right: 10%;\n height: 34%;\n width: 34%;\n border-radius: 50%;\n background-color: ${iconFc};\n}\n.${cn}-cloud > .${cnc}:nth-child(1)::after,\n.${cn}-cloud-check > .${cnc}:nth-child(1)::after,\n.${cn}-cloud-upload > .${cnc}:nth-child(1)::after,\n.${cn}-cloud-download > .${cnc}:nth-child(1)::after {\n top: 30%;\n right: 17%;\n height: 30%;\n width: 30%;\n border-radius: 50%;\n background-color: ${iconFc};\n}\n.${cn}-cloud > .${cnc}:nth-child(2)::before,\n.${cn}-cloud-check > .${cnc}:nth-child(2)::before,\n.${cn}-cloud-upload > .${cnc}:nth-child(2)::before,\n.${cn}-cloud-download > .${cnc}:nth-child(2)::before {\n bottom: 20%;\n left: 30%;\n height: 30%;\n width: 45%;\n background-color: ${iconFc};\n}\n.${cn}-cloud-check > .${cnc}:nth-child(2)::after {\n height: 40%;\n width: 30%;\n top: 30%;\n left: 34%;\n border-right: 2.5px solid ${iconBc};\n border-bottom: 2.5px solid ${iconBc};\n transform: rotate(40deg);\n z-index: 1;\n}\n.${cn}-cloud-upload > div:nth-child(2)::after,\n.${cn}-cloud-download > div:nth-child(2)::after {\n height: 44%;\n width: 44%;\n bottom: 17%;\n left: 28%;\n background-color: ${iconBc};\n z-index: 1;\n}\n.${cn}-cloud-upload > div:nth-child(2)::after {\n clip-path: polygon(50% 0%, 100% 60%, 70% 60%, 70% 100%, 30% 100%, 30% 60%, 0% 60%);\n}\n.${cn}-cloud-download > div:nth-child(2)::after {\n clip-path: polygon(30% 0%, 70% 0%, 70% 40%, 100% 40%, 50% 100%, 0% 40%, 30% 40%);\n}\n.${cn}-home::before {\n height: 80%;\n width: 80%;\n top: 10%;\n left: 10%;\n background-color: ${iconFc};\n clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 90% 50%, 90% 100%, 60% 100%, 60% 75%, 40% 75%, 40% 100%, 10% 100%, 10% 50%);\n}\n.${cn}-pen::before {\n height: 70%;\n width: 25%;\n top: 10%;\n left: 45%;\n border-radius: 2px 2px 0px 0px;\n transform: rotate(45deg);\n background-color: ${iconFc};\n}\n.${cn}-pen::after {\n height: 20%;\n width: 25%;\n bottom: 10%;\n left: 10%;\n transform: rotate(45deg);\n background-color: ${iconFc};\n clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\n}\n.${cn}-gear::before {\n height: 60%;\n width: 60%;\n top: 20%;\n left: 20%;\n border-radius: 50%;\n background: ${iconFc};\n}\n.${cn}-gear::after {\n height: 40%;\n width: 40%;\n top: 30%;\n left: 30%;\n border-radius: 50%;\n background: ${iconBc};\n border: 3px double ${iconFc};\n}\n.${cn}-gear > .${cnc}::before,\n.${cn}-gear > .${cnc}::after {\n height: 80%;\n width: 16%;\n background: ${iconFc};\n top: 10%;\n left: 42%;\n border-radius: 1px;\n}\n.${cn}-gear > .${cnc}:nth-child(1)::after {\n transform: rotate(45deg);\n}\n.${cn}-gear > .${cnc}:nth-child(2)::before {\n transform: rotate(90deg);\n}\n.${cn}-gear > .${cnc}:nth-child(2)::after {\n transform: rotate(135deg);\n}\n.${cn}-save::before,\n.${cn}-save-as::before {\n height: 74%;\n width: 74%;\n top: 13%;\n left: 13%;\n background-color: ${iconFc};\n clip-path: polygon(0% 0%, 30% 0%, 30% 25%, 70% 25%, 70% 0%, 85% 0%, 100% 15%, 100% 100%, 80% 100%, 80% 50%, 20% 50%, 20% 90%, 85% 90%, 85% 100%, 0% 100%);\n}\n.${cn}-save::after,\n.${cn}-save-as::after {\n height: 74%;\n width: 74%;\n top: 13%;\n left: 13%;\n background-color: ${iconFc};\n clip-path: polygon(50% 5%, 60% 5%, 60% 20%, 50% 20%);\n}\n.${cn}-save-as > .${cnc}::before,\n.${cn}-note > .${cnc}:nth-child(2)::before {\n height: 55%;\n width: 20%;\n top: 15%;\n left: 56%;\n border-radius: 2px 2px 0px 0px;\n transform: rotate(45deg);\n background-color: ${iconFc};\n border: 0.5px solid ${iconBc};\n z-index: 2;\n}\n.${cn}-save-as > .${cnc}::after,\n.${cn}-note > .${cnc}:nth-child(2)::after {\n height: 15%;\n width: 20%;\n bottom: 25%;\n left: 30%;\n transform: rotate(45deg);\n background-color: ${iconFc};\n clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\n z-index: 2;\n}\n.${cn}-delete::before {\n height: 76%;\n width: 76%;\n top: 12%;\n left: 12%;\n background-color: ${iconFc};\n clip-path: polygon(5% 10%, 40% 10%, 40% 0%, 60% 0%, 60% 10%, 95% 10%, 95% 20%, 85% 20%, 85% 90%, 75% 100%, 25% 100%, 15% 90%, 15% 20%, 5% 20%);\n}\n.${cn}-delete::after {\n height: 45%;\n width: 24%;\n top: 32%;\n left: 38%;\n border-left: 2px solid ${iconBc};\n border-right: 2px solid ${iconBc};\n}\n.${cn}-reload::before,\n.${cn}-revert::before,\n.${cn}-sync::before {\n height: 70%;\n width: 70%;\n top: 15%;\n left: 15%;\n border-radius: 50%;\n border: 2.5px solid ${iconFc};\n}\n.${cn}-reload::before {\n clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 50% 50%, 100% 70%, 100% 100%, 0% 100%);\n}\n.${cn}-revert::before {\n clip-path: polygon(50% 50%, 0% 10%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 70%);\n}\n.${cn}-reload::after,\n.${cn}-revert::after,\n.${cn}-sync > .${cnc}::before,\n.${cn}-sync > .${cnc}::after {\n background-color: ${iconFc};\n height: 40%;\n width: 30%;\n}\n.${cn}-reload::after {\n top: 17%;\n right: 8%;\n clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\n transform: rotate(45deg);\n}\n.${cn}-revert::after {\n top: 17%;\n left: 8%;\n clip-path: polygon(0% 50%, 100% 0%, 100% 100%);\n transform: rotate(-45deg);\n}\n.${cn}-sync::before {\n clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 0% 40%, 0% 80%, 100% 60%, 100% 100%, 0% 100%);\n}\n.${cn}-sync > .${cnc}::before {\n top: 20%;\n right: 5%;\n clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\n transform: rotate(50deg);\n}\n.${cn}-sync > .${cnc}::after {\n bottom: 20%;\n left: 5%;\n clip-path: polygon(0% 50%, 100% 0%, 100% 100%);\n transform: rotate(50deg);\n}\n.${cn}-search::before {\n height: 60%;\n width: 60%;\n top: 10%;\n left: 10%;\n border: 3px solid ${iconFc};\n background-color: transparent;\n border-radius: 50%;\n}\n.${cn}-search::after {\n height: 4px;\n width: 40%;\n bottom: 19%;\n right: 10%;\n transform: rotate(45deg);\n background-color: ${iconFc};\n border-radius: 1px;\n}\n.${cn}-filter::before {\n height: 72%;\n width: 72%;\n top: 14%;\n left: 14%;\n background-color: ${iconFc};\n clip-path: polygon(0% 0%, 100% 0%, 60% 50%, 60% 90%, 40% 100%, 40% 50%);\n}\n.${cn}-graph-bar::before,\n.${cn}-graph-border::before {\n height: 80%;\n width: 80%;\n left: 10%;\n top: 10%;\n border-left: 2px solid ${iconFc};\n border-bottom: 2px solid ${iconFc};\n}\n.${cn}-graph-bar::after {\n height: calc(75% - 2px);\n width: 70%;\n left: 15%;\n top: 10%;\n background-color: ${iconFc};\n clip-path: polygon(10% 100%, 10% 50%, 25% 50%, 25% 100%, 35% 100%, 35% 20%, 50% 20%, 50% 100%, 60% 100%, 60% 40%, 75% 40%, 75% 100%, 85% 100%, 85% 0%, 100% 0%, 100% 100%);\n}\n.${cn}-graph-border > .${cnc}::before {\n height: 35%;\n width: 30%;\n left: calc(20% + 2px);\n top: 40%;\n border-top: 2px solid ${iconFc};\n border-left: 2px solid ${iconFc};\n transform: rotate(35deg);\n}\n.${cn}-graph-border > .${cnc}::after {\n height: 40%;\n width: 2px;\n left: calc(60% + 3px);\n top: 20%;\n border-left: 2px solid ${iconFc};\n transform: rotate(35deg);\n}\n.${cn}-history::before {\n height: 80%;\n width: 80%;\n top: 10%;\n left: 10%;\n border-radius: 50%;\n border: 2.5px solid ${iconFc};\n clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%, 0% 50%);\n}\n.${cn}-history::after {\n background-color: ${iconFc};\n top: 40%;\n left: 0%;\n height: 25%;\n width: 30%;\n clip-path: polygon(0% 0%, 100% 0%, 50% 100%);\n}\n.${cn}-history > .${cnc}::before {\n height: 30%;\n width: 25%;\n top: calc(25% + 1px);\n right: calc(25% + 1px);\n border-left: 2.5px solid ${iconFc};\n border-bottom: 2.5px solid ${iconFc};\n}\n.${cn}-code::before,\n.${cn}-code::after {\n width: 35%;\n height: 35%;\n top: 35%;\n border-radius: 1px;\n}\n.${cn}-code::before {\n left: 10%;\n transform: rotate(45deg);\n border-bottom: 3px solid ${iconFc};\n border-left: 3px solid ${iconFc};\n}\n.${cn}-code::after {\n right: 10%;\n transform: rotate(45deg);\n border-top: 3px solid ${iconFc};\n border-right: 3px solid ${iconFc};\n}\n.${cn}-code > .${cnc}::before {\n height: 64%;\n width: 2px;\n top: 20%;\n left: calc(50% - 1px);\n background-color: ${iconFc};\n transform: rotate(10deg);\n}\n.${cn}-list::before,\n.${cn}-list > .${cnc}::before {\n height: 20%;\n width: 20%;\n left: 5%;\n background-color: ${iconFc};\n clip-path: circle(40% at 50% 50%);\n}\n.${cn}-list::after,\n.${cn}-list > .${cnc}::after {\n height: 20%;\n width: 55%;\n left: 35%;\n background-color: ${iconFc};\n clip-path: polygon(0% 35%, 100% 35%, 100% 65%, 0% 65%);\n}\n.${cn}-list::before,\n.${cn}-list::after {\n top: 15%;\n}\n.${cn}-list > .${cnc}:nth-child(1)::before,\n.${cn}-list > .${cnc}:nth-child(1)::after {\n top: 40%;\n}\n.${cn}-list > .${cnc}:nth-child(2)::before,\n.${cn}-list > .${cnc}:nth-child(2)::after {\n top: 65%;\n}\n.${cn}-clock::before {\n height: 80%;\n width: 80%;\n top: 10%;\n left: 10%;\n border: 2.5px solid ${iconFc};\n border-radius: 50%;\n}\n.${cn}-clock::after {\n height: 35%;\n width: 30%;\n top: calc(20% + 1px);\n right: calc(20% + 1px);\n border-left: 2.5px solid ${iconFc};\n border-bottom: 2.5px solid ${iconFc};\n}\n.${cn}-calendar::before {\n height: 70%;\n width: 80%;\n top: 15%;\n left: 10%;\n border: 1.5px solid ${iconFc};\n border-top-width: 4px;\n border-radius: 1px;\n}\n.${cn}-calendar::after {\n top: 37%;\n}\n.${cn}-calendar > .${cnc}:nth-child(1)::before {\n top: 52%;\n}\n.${cn}-calendar > .${cnc}:nth-child(1)::after {\n top: 67%;\n}\n.${cn}-calendar::after,\n.${cn}-calendar > .${cnc}::before,\n.${cn}-calendar > .${cnc}::after {\n width: 60%;\n height: 8%;\n left: 20%;\n background-color: ${iconFc};\n clip-path: polygon(0% 100%, 0% 0%, 14.2% 0%, 14.2% 100%, 28.4% 100%, 28.4% 0%, 42.6% 0%, 42.6% 100%, 56.8% 100%, 56.8% 0%, 71% 0%, 71% 100%, 85.2% 100%, 85.2% 0%, 100% 0%, 100% 100%);\n}\n.${cn}-mail::before {\n height: 60%;\n width: 80%;\n top: 20%;\n left: 10%;\n background-color: ${iconFc};\n clip-path: polygon(0% 10%, 50% 60%, 100% 10%, 100% 100%, 0% 100%);\n border-radius: 2px;\n}\n.${cn}-mail::after {\n height: calc(40% - 4px);\n width: calc(80% - 2px);\n top: 20%;\n left: calc(10% + 1px);\n background-color: ${iconFc};\n clip-path: polygon(0% 0%, 50% 100%, 100% 0%);\n}\n.${cn}-tel::before {\n height: 86%;\n width: 44%;\n top: 12%;\n left: 26%;\n border: calc(${css_var_1.default.fs} * 0.4) solid ${iconFc};\n border-right: none;\n border-radius: 50% 1px 1px 50%;\n clip-path: polygon(0% 0%, 75% 0%, 75% 100%, 85% 100%, 85% 0%, 100% 0%, 100% 100%, 0% 100%);\n transform: rotate(-45deg);\n}\n.${cn}-location::before,\n.${cn}-location::after {\n height: 56%;\n width: 56%;\n top: 10%;\n left: 22%;\n}\n.${cn}-location::before {\n background: ${iconFc};\n clip-path: circle(48% at 50%);\n}\n.${cn}-location::after {\n background: ${iconBc};\n clip-path: circle(20% at 50%);\n}\n.${cn}-location > .${cnc}::before {\n height: 41%;\n width: 58%;\n top: 45%;\n left: 21%;\n background-color: ${iconFc};\n clip-path: polygon(5% 0%, 5% 2%, 50% 40%, 95% 0%, 95% 2%, 51% 100%, 49% 100%);\n}\n.${cn}-flag::before {\n height: 45%;\n width: 60%;\n top: calc(10% + 1px);\n left: calc(15% + 3.5px);\n background: ${iconFc};\n clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\n}\n.${cn}-flag::after {\n height: 80%;\n width: 2px;\n top: 10%;\n left: 15%;\n background-color: ${iconFc};\n border-radius: 1px;\n}\n.${cn}-clip::before {\n height: 65%;\n width: 50%;\n left: 25%;\n top: 30%;\n border-radius: 0 0 50% 50% / 0 0 30% 30%;\n border: 2px solid ${iconFc};\n border-top: none;\n}\n.${cn}-clip::after {\n height: 50%;\n width: 35%;\n left: 25%;\n top: 5%;\n border-radius: 50% 50% 0 0 / 30% 30% 0 0;\n border: 2px solid ${iconFc};\n border-bottom: none;\n}\n.${cn}-clip > .${cnc}::before {\n height: 45%;\n width: 20%;\n left: 40%;\n top: 30%;\n border-radius: 0 0 50% 50% / 0 0 30% 30%;\n border: 2px solid ${iconFc};\n border-top: none;\n}\n.${cn}-share::before,\n.${cn}-share::after,\n.${cn}-share > .${cnc}:nth-child(1)::before {\n height: 24%;\n width: 24%;\n border-radius: 50%;\n background-color: ${iconFc};\n}\n.${cn}-share::before {\n top: 38%;\n left: 15%;\n}\n.${cn}-share::after {\n top: 15%;\n right: 15%;\n}\n.${cn}-share > .${cnc}:nth-child(1)::before {\n right: 15%;\n bottom: 15%;\n}\n.${cn}-share > .${cnc}:nth-child(2)::before,\n.${cn}-share > .${cnc}:nth-child(2)::after {\n height: 2px;\n width: calc(80% - 4px);\n background-color: ${iconFc};\n left: 15%;\n}\n.${cn}-share > .${cnc}:nth-child(2)::before {\n transform: rotate(-25deg);\n top: 34%;\n}\n.${cn}-share > .${cnc}:nth-child(2)::after {\n transform: rotate(25deg);\n bottom: 34%;\n}\n.${cn}-star::before,\n.${cn}-star-border::before,\n.${cn}-star-half::before {\n height: 90%;\n width: 90%;\n top: 5%;\n left: 5%;\n background-color: ${iconFc};\n}\n.${cn}-star-border::after,\n.${cn}-star-half::after {\n height: calc(90% - 10px);\n width: calc(90% - 10px);\n top: calc(5% + 5px);\n left: calc(5% + 5px);\n background-color: ${iconBc};\n}\n.${cn}-c-star::after {\n height: 60%;\n width: 60%;\n left: 20%;\n top: 20%;\n background: ${iconBc};\n}\n.${cn}-star::before,\n.${cn}-star-border::before,\n.${cn}-star-border::after,\n.${cn}-star-half::before,\n.${cn}-c-star::after {\n clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);\n}\n.${cn}-star-half::after {\n clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%);\n}\n.${cn}-heart::before {\n height: 40%;\n width: 70%;\n top: 30%;\n left: 4%;\n background-color: ${iconFc};\n transform: rotate(45deg);\n border-radius: 30% 0 0 50% / 50% 0 0 50%;\n}\n.${cn}-heart::after {\n height: 40%;\n width: 70%;\n top: 30%;\n right: 4%;\n background-color: ${iconFc};\n transform: rotate(-45deg);\n border-radius: 0 30% 50% 0 / 0 50% 50% 0;\n}\n.${cn}-message::before,\n.${cn}-message-ellipse::before {\n top: 15%;\n left: 10%;\n height: 60%;\n width: 80%;\n border: 2px solid ${iconFc};\n border-radius: 3px;\n z-index: 0;\n}\n.${cn}-message-ellipse::before {\n border-radius: 50%;\n}\n.${cn}-message::after {\n bottom: 10%;\n right: 25%;\n height: 20%;\n width: 30%;\n background-color: ${iconFc};\n clip-path: polygon(20% 0%, 100% 0%, 0% 100%);\n z-index: 0;\n}\n.${cn}-message-ellipse::after {\n bottom: 12%;\n right: 25%;\n height: 20%;\n width: 30%;\n background-color: ${iconFc};\n clip-path: polygon(20% 10%, 100% 0%, 0% 100%);\n z-index: 0;\n}\n.${cn}-key::before {\n height: 50%;\n width: 50%;\n top: 10%;\n left: 10%;\n background-color: transparent;\n border: 4px solid ${iconFc};\n border-radius: 50%;\n}\n.${cn}-key::after {\n height: 50%;\n width: 8px;\n top: 35%;\n left: 55%;\n background-color: ${iconFc};\n clip-path: polygon(0% 0%, 0% 100%, 40% 100%, 40% 90%, 100% 90%, 100% 70%, 60% 70%, 60% 60%, 100% 60%, 100% 40%, 40% 40%, 40% 0%);\n transform: rotate(-45deg);\n}\n.${cn}-lock::before,\n.${cn}-unlock::before {\n height: 50%;\n width: 80%;\n bottom: 10%;\n left: 10%;\n background-color: ${iconFc};\n border-radius: 2px;\n}\n.${cn}-lock::after,\n.${cn}-unlock::after {\n height: 50%;\n width: 50%;\n top: 10%;\n left: 25%;\n background-color: transparent;\n border-radius: 50% / 30%;\n border-top: 2.5px solid ${iconFc};\n border-left: 2.5px solid ${iconFc};\n border-right: 2.5px solid ${iconFc};\n}\n.${cn}-unlock::after {\n clip-path: polygon(0% 0%, 100% 0%, 100% 35%, 50% 35%, 100% 100%, 0% 100%);\n}\n.${cn}-lock > .${cnc},\n.${cn}-unlock > .${cnc} {\n z-index: 1;\n}\n.${cn}-lock > .${cnc}::before,\n.${cn}-unlock > .${cnc}::before {\n height: 16%;\n width: 16%;\n top: 50%;\n left: 42%;\n background-color: ${iconBc};\n border-radius: 50%;\n}\n.${cn}-lock > .${cnc}::after,\n.${cn}-unlock > .${cnc}::after {\n height: 20%;\n width: 4%;\n top: 56%;\n left: 48%;\n background-color: ${iconBc};\n}\n.${cn}-guard::before,\n.${cn}-guard > .${cnc}::before,\n.${cn}-guard > .${cnc}::after {\n height: 80%;\n width: 80%;\n top: 10%;\n left: 10%;\n}\n.${cn}-guard::before {\n background-color: ${iconFc};\n clip-path: polygon(0% 10%, 50% 0%, 100% 10%, 90% 80%, 50% 100%, 10% 80%);\n}\n.${cn}-guard > .${cnc}::before {\n background-color: ${iconBc};\n clip-path: polygon(50% 45%, 85% 45%, 80% 75%, 50% 90%, 50% 75%);\n opacity: 0.8;\n}\n.${cn}-guard > .${cnc}::after {\n background-color: ${iconBc};\n clip-path: polygon(10% 18%, 50% 10%, 50% 45%, 14% 45%);\n opacity: 0.8;\n}\n.${cn}-folder::before,\n.${cn}-folder-check::before,\n.${cn}-folder-add::before {\n height: 15%;\n width: 60%;\n top: 11%;\n left: 10%;\n background: ${iconFc};\n clip-path: polygon(0% 100%, 10% 0%, 90% 0%, 100% 100%);\n}\n.${cn}-folder::after,\n.${cn}-folder-check::after,\n.${cn}-folder-add::after {\n height: 60%;\n width: 84%;\n top: 25%;\n left: 8%;\n background: ${iconFc};\n border-radius: 2px;\n}\n.${cn}-folder-check > .${cnc}::before {\n height: 40%;\n width: 30%;\n top: 29%;\n left: 34%;\n border-right: 2.5px solid ${iconBc};\n border-bottom: 2.5px solid ${iconBc};\n transform: rotate(40deg);\n z-index: 1;\n}\n.${cn}-folder-add > .${cnc} {\n z-index: 1;\n}\n.${cn}-folder-add > .${cnc}::before {\n height: 40%;\n width: 3px;\n top: 30%;\n left: calc(50% - 1.5px);\n background-color: ${iconBc};\n}\n.${cn}-folder-add > .${cnc}::after {\n height: 3px;\n width: 40%;\n top: calc(50% - 1.5px);\n left: 30%;\n background-color: ${iconBc};\n}\n.${cn}-document::before,\n.${cn}-note::before {\n height: 80%;\n width: 70%;\n top: 10%;\n left: 15%;\n border: 2px solid ${iconFc};\n clip-path: polygon(0% 0%, 60% 0%, 100% 30%, 100% 100%, 0% 100%);\n border-radius: 1px;\n}\n.${cn}-document::after,\n.${cn}-note::after {\n height: 25%;\n width: 25%;\n right: 15%;\n top: 10%;\n background: ${iconFc};\n clip-path: polygon(0% 0%, 100% 100%, 0% 100%);\n border-radius: 1px;\n}\n.${cn}-document > .${cnc}::before,\n.${cn}-note > .${cnc}:nth-child(1)::before {\n height: 40%;\n width: 40%;\n top: 30%;\n left: 30%;\n border-top: 2px solid ${iconFc};\n border-bottom: 2px solid ${iconFc};\n}\n.${cn}-document > .${cnc}::after,\n.${cn}-note > .${cnc}:nth-child(1)::after {\n height: 2px;\n width: 40%;\n top: calc(50% - 1px);\n left: 30%;\n border-top: 2px solid ${iconFc};\n}\n.${cn}-tag::before {\n height: 80%;\n width: 80%;\n top: 13%;\n left: 13%;\n background: ${iconFc};\n clip-path: polygon(0% 0%, 45% 0%, 100% 55%, 55% 100%, 0% 45%);\n}\n.${cn}-tag::after {\n height: 3px;\n width: 3px;\n top: 25%;\n left: 25%;\n background: ${iconBc};\n border-radius: 50%;\n}\n.${cn}-bookmark::before {\n height: 80%;\n width: 50%;\n top: 10%;\n left: 25%;\n border-radius: 2px;\n background: ${iconFc};\n clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 70%, 0% 100%);\n}\n.${cn}-crown::before {\n height: 70%;\n width: 80%;\n top: 15%;\n left: 10%;\n background: ${iconFc};\n clip-path: polygon(90% 100%, 10% 100%, 0% 15%, 25% 45%, 50% 0%, 75% 45%, 100% 15%);\n}\n.${cn}-beginner::before {\n height: 86%;\n width: 60%;\n top: 7%;\n left: 20%;\n border-radius: 2px;\n background: ${iconFc};\n clip-path: polygon(0% 0%, 50% 25%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);\n}\n.${cn}-beginner::after {\n height: calc(86% - 5px);\n width: calc(30% - 2px);\n top: calc(7% + 3px);\n left: calc(20% + 1.5px);\n background: ${iconBc};\n clip-path: polygon(0% 0%, 100% 25%, 100% 100%, 0% 75%);\n}\n.${cn}-c-check::before,\n.${cn}-c-cross::before,\n.${cn}-c-add::before,\n.${cn}-c-minus::before,\n.${cn}-c-play::before,\n.${cn}-c-star::before,\n.${cn}-information::before,\n.${cn}-error::before,\n.${cn}-question::before {\n height: 80%;\n width: 80%;\n top: 10%;\n left: 10%;\n border-radius: 50%;\n background: ${iconFc};\n}\n.${cn}-c-check::after {\n width: 33%;\n height: 48%;\n top: 20%;\n left: 33%;\n transform: rotate(40deg);\n border-bottom: 3px solid ${iconBc};\n border-right: 3px solid ${iconBc};\n border-radius: 1px;\n}\n.${cn}-c-cross > .${cnc}::before,\n.${cn}-c-cross > .${cnc}::after,\n.${cn}-c-add > .${cnc}::before,\n.${cn}-c-minus::after {\n width: 50%;\n height: 3px;\n top: calc(50% - 1.5px);\n left: 25%;\n background-color: ${iconBc};\n border-radius: 1px;\n}\n.${cn}-c-cross > .${cnc}::before {\n transform: rotate(45deg);\n}\n.${cn}-c-cross > .${cnc}::after {\n transform: rotate(-45deg);\n}\n.${cn}-c-add > .${cnc}::after {\n width: 3px;\n height: 50%;\n top: 25%;\n left: calc(50% - 1.5px);\n background-color: ${iconBc};\n border-radius: 1px;\n}\n.${cn}-c-play::after {\n height: 36%;\n width: 36%;\n top: 32%;\n left: 37%;\n background-color: ${iconBc};\n clip-path: polygon(0% 0%, 100% 50%, 0% 100%);\n}\n.${cn}-information::before,\n.${cn}-warning::before,\n.${cn}-error::before,\n.${cn}-question::before {\n display: flex;\n flex-flow: row nowrap;\n justify-content: center;\n align-items: center;\n font-size: ${css_var_1.default.fs};\n color: ${iconBc};\n font-weight: bold;\n padding-top: 2px;\n}\n.${cn}-information::before {\n content: "i" !important;\n}\n.${cn}-warning::before {\n content: "!" !important;\n height: 84%;\n width: 84%;\n top: 8%;\n left: 8%;\n background: ${iconFc};\n clip-path: polygon(50% 0%, 100% 100%, 0% 100%);\n padding-top: 7px;\n}\n.${cn}-error::before {\n content: "!" !important;\n}\n.${cn}-question::before {\n content: "?" !important;\n}\n`)),exports.default=Icon;