@24vlh/vds 0.1.1 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/accordion.css +170 -1
- package/dist/components/authoring.css +332 -1
- package/dist/components/buttons.css +683 -1
- package/dist/components/charts.css +502 -1
- package/dist/components/command.css +521 -1
- package/dist/components/content-blocks.css +944 -1
- package/dist/components/doc-block.css +782 -1
- package/dist/components/feedback.css +657 -1
- package/dist/components/flows.css +1101 -1
- package/dist/components/forms-advanced.css +462 -1
- package/dist/components/forms.css +627 -1
- package/dist/components/forms.min.css +1 -1
- package/dist/components/header-footer.css +348 -1
- package/dist/components/hero.css +498 -1
- package/dist/components/icons.css +937 -1
- package/dist/components/icons.min.css +1 -1
- package/dist/components/navigation.css +900 -1
- package/dist/components/overlays.css +498 -1
- package/dist/components/sections.css +450 -1
- package/dist/components/skeleton.css +385 -1
- package/dist/components/tables.css +591 -1
- package/dist/components/tabs.css +307 -1
- package/dist/components/toasts.css +421 -1
- package/dist/components/tooltips-popovers.css +447 -1
- package/dist/components/typography.css +250 -1
- package/dist/components/utilities.css +3434 -1
- package/dist/core.css +866 -1
- package/dist/identity.css +266 -1
- package/dist/themes/carbon.css +658 -1
- package/dist/themes/graphite.css +658 -1
- package/dist/themes/navy.css +657 -1
- package/dist/themes/slate.css +659 -1
- package/dist/vds.css +19010 -1
- package/dist/vds.min.css +1 -1
- package/package.json +3 -2
|
@@ -1 +1,937 @@
|
|
|
1
|
-
.icon{stroke:currentColor;fill:none;display:inline-block;flex-shrink:0;height:var(--icon-md);width:var(--icon-md)}.icon--xxs{height:var(--icon-xxs);width:var(--icon-xxs)}.icon--xs{height:var(--icon-xs);width:var(--icon-xs)}.icon--sm{height:var(--icon-sm);width:var(--icon-sm)}.icon--md{height:var(--icon-md);width:var(--icon-md)}.icon--lg{height:var(--icon-lg);width:var(--icon-lg)}.icon--xl{height:var(--icon-xl);width:var(--icon-xl)}.icon--filled{fill:currentColor;stroke:none}.icon--mask{stroke:none;fill:none;background-color:currentColor;mask-mode:luminance;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.icon-glyph{display:inline-block;height:var(--icon-md);width:var(--icon-md)}.icon--info{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath fill='%23fff' d='M7.4 7h1.2v3.5H7.4z'/%3E%3Ccircle cx='8' cy='5' r='.7' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath fill='%23fff' d='M7.4 7h1.2v3.5H7.4z'/%3E%3Ccircle cx='8' cy='5' r='.7' fill='%23fff'/%3E%3C/svg%3E")}.icon--success{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m3.2 8.3 3.6 3.1 6-6.8-1.3-1.1-4.7 5.3-2.4-2.1Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m3.2 8.3 3.6 3.1 6-6.8-1.3-1.1-4.7 5.3-2.4-2.1Z'/%3E%3C/svg%3E")}.icon--warning{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m8 2.6 6 10.8H2Z'/%3E%3Cpath d='m8 4 4.2 8.4H3.8Z'/%3E%3Cpath fill='%23fff' d='M7.45 6.3h1v3.2h-1z'/%3E%3Ccircle cx='8' cy='11.1' r='.55' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m8 2.6 6 10.8H2Z'/%3E%3Cpath d='m8 4 4.2 8.4H3.8Z'/%3E%3Cpath fill='%23fff' d='M7.45 6.3h1v3.2h-1z'/%3E%3Ccircle cx='8' cy='11.1' r='.55' fill='%23fff'/%3E%3C/svg%3E")}.icon--danger{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m10.952 4.164.884.884-6.788 6.788-.884-.884z'/%3E%3Cpath fill='%23fff' d='m4.164 5.048.884-.884 6.788 6.788-.884.884z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m10.952 4.164.884.884-6.788 6.788-.884-.884z'/%3E%3Cpath fill='%23fff' d='m4.164 5.048.884-.884 6.788 6.788-.884.884z'/%3E%3C/svg%3E")}.icon--help{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath fill='%23fff' d='M8 4.2c1.4 0 2.3.9 2.3 1.9 0 1-.7 1.6-1.4 2-.7.4-1.1.8-1.1 1.5v.7h-1v-.8c0-1 .7-1.6 1.3-1.9.7-.3 1.2-.8 1.2-1.5 0-.8-.6-1.4-1.3-1.4-.8 0-1.3.5-1.7 1l-.8-.6c.6-.9 1.6-1.4 2.5-1.4 1.6 0 2.8 1.1 2.8 2.4 0 .9-.4 1.6-1.1 2.1-.9.7-1.4 1.1-1.4 2v.1h-1v-.1c0-1.1.6-1.7 1.3-2.2.7-.5 1.2-1 1.2-1.9C9.8 5 9 4.2 8 4.2Z'/%3E%3Ccircle cx='7.8' cy='11.7' r='.7' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath fill='%23fff' d='M8 4.2c1.4 0 2.3.9 2.3 1.9 0 1-.7 1.6-1.4 2-.7.4-1.1.8-1.1 1.5v.7h-1v-.8c0-1 .7-1.6 1.3-1.9.7-.3 1.2-.8 1.2-1.5 0-.8-.6-1.4-1.3-1.4-.8 0-1.3.5-1.7 1l-.8-.6c.6-.9 1.6-1.4 2.5-1.4 1.6 0 2.8 1.1 2.8 2.4 0 .9-.4 1.6-1.1 2.1-.9.7-1.4 1.1-1.4 2v.1h-1v-.1c0-1.1.6-1.7 1.3-2.2.7-.5 1.2-1 1.2-1.9C9.8 5 9 4.2 8 4.2Z'/%3E%3Ccircle cx='7.8' cy='11.7' r='.7' fill='%23fff'/%3E%3C/svg%3E")}.icon--neutral{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3' fill='%23fff'/%3E%3C/svg%3E")}.icon--pending{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath d='m8 8 6.06-2.53a7 7 0 0 0-2.53-3.53Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath d='m8 8 6.06-2.53a7 7 0 0 0-2.53-3.53Z'/%3E%3C/svg%3E")}.icon--online{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='4' fill='%23fff'/%3E%3C/svg%3E")}.icon--offline{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath fill='%23fff' d='m11.235 3.881.884.884-7.354 7.354-.884-.884z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath fill='%23fff' d='m11.235 3.881.884.884-7.354 7.354-.884-.884z'/%3E%3C/svg%3E")}.icon--blocked{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath fill='%23fff' d='m3.881 4.765.884-.884 7.354 7.354-.884.884z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath fill='%23fff' d='m3.881 4.765.884-.884 7.354 7.354-.884.884z'/%3E%3C/svg%3E")}.icon--chevron-left{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3 5 8l5 5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3 5 8l5 5'/%3E%3C/svg%3E")}.icon--chevron-right{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 3 5 5-5 5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 3 5 5-5 5'/%3E%3C/svg%3E")}.icon--chevron-up{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 10 5-5 5 5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 10 5-5 5 5'/%3E%3C/svg%3E")}.icon--chevron-down{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E")}.icon--arrow-left{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 8H3M7 3 3 8l4 5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 8H3M7 3 3 8l4 5'/%3E%3C/svg%3E")}.icon--arrow-right{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8h10M9 3l4 5-4 5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8h10M9 3l4 5-4 5'/%3E%3C/svg%3E")}.icon--arrow-up{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 13V3M3 7l5-4 5 4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 13V3M3 7l5-4 5 4'/%3E%3C/svg%3E")}.icon--arrow-down{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3v10M3 9l5 4 5-4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3v10M3 9l5 4 5-4'/%3E%3C/svg%3E")}.icon--filter{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4h10L9 8.5V12l-2 1V8.5L3 4z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4h10L9 8.5V12l-2 1V8.5L3 4z'/%3E%3C/svg%3E")}.icon--search{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='4' fill='%23fff'/%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Cpath fill='%23fff' d='m11.5 9.096 2.475 2.475-2.121 2.121-2.475-2.475z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='4' fill='%23fff'/%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Cpath fill='%23fff' d='m11.5 9.096 2.475 2.475-2.121 2.121-2.475-2.475z'/%3E%3C/svg%3E")}.icon--menu{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M3 4h10v1.8H3zM3 7.9h10v1.8H3zM3 11.8h10v1.8H3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M3 4h10v1.8H3zM3 7.9h10v1.8H3zM3 11.8h10v1.8H3z'/%3E%3C/svg%3E")}.icon--close{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m10.952 4.164.884.884-6.788 6.788-.884-.884z'/%3E%3Cpath fill='%23fff' d='m4.164 5.048.884-.884 6.788 6.788-.884.884z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m10.952 4.164.884.884-6.788 6.788-.884-.884z'/%3E%3Cpath fill='%23fff' d='m4.164 5.048.884-.884 6.788 6.788-.884.884z'/%3E%3C/svg%3E")}.icon--plus{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M7.375 3h1.25v10h-1.25z'/%3E%3Cpath fill='%23fff' d='M3 7.375h10v1.25H3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M7.375 3h1.25v10h-1.25z'/%3E%3Cpath fill='%23fff' d='M3 7.375h10v1.25H3z'/%3E%3C/svg%3E")}.icon--minus{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M3 7.375h10v1.25H3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M3 7.375h10v1.25H3z'/%3E%3C/svg%3E")}.icon--upload{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M4 11h8v2H4zM7.375 6h1.25v5h-1.25z'/%3E%3Cpath d='M5.5 7.2 8 4l2.5 3.2Z' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M4 11h8v2H4zM7.375 6h1.25v5h-1.25z'/%3E%3Cpath d='M5.5 7.2 8 4l2.5 3.2Z' fill='%23fff'/%3E%3C/svg%3E")}.icon--download{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M4 3h8v2H4zM7.375 5h1.25v5.5h-1.25z'/%3E%3Cpath d='M5.5 9 8 12.2 10.5 9Z' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M4 3h8v2H4zM7.375 5h1.25v5.5h-1.25z'/%3E%3Cpath d='M5.5 9 8 12.2 10.5 9Z' fill='%23fff'/%3E%3C/svg%3E")}.icon--user{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M3 13c1.2-2 2.9-3 5-3s3.8 1 5 3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M3 13c1.2-2 2.9-3 5-3s3.8 1 5 3'/%3E%3C/svg%3E")}.icon--settings{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m9.8 2.1-.3 1.4a4.6 4.6 0 0 1 1 .6l1.3-.7 1.3 1.3-.7 1.3c.3.3.5.7.6 1l1.4.3v1.8l-1.4.3a4.6 4.6 0 0 1-.6 1l.7 1.3-1.3 1.3-1.3-.7c-.3.3-.7.5-1 .6l-.3 1.4h-3l-.3-1.4a4.6 4.6 0 0 1-1-.6l-1.3.7-1.3-2L3 9.7a4.6 4.6 0 0 1-.6-1L1 8.4V6.6l1.4-.3a4.6 4.6 0 0 1 .6-1L2.3 4l1.3-1.3 1.3.7c.3-.3.7-.5 1-.6l.3-1.4h3.6z'/%3E%3Ccircle cx='8' cy='8' r='2.2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m9.8 2.1-.3 1.4a4.6 4.6 0 0 1 1 .6l1.3-.7 1.3 1.3-.7 1.3c.3.3.5.7.6 1l1.4.3v1.8l-1.4.3a4.6 4.6 0 0 1-.6 1l.7 1.3-1.3 1.3-1.3-.7c-.3.3-.7.5-1 .6l-.3 1.4h-3l-.3-1.4a4.6 4.6 0 0 1-1-.6l-1.3.7-1.3-2L3 9.7a4.6 4.6 0 0 1-.6-1L1 8.4V6.6l1.4-.3a4.6 4.6 0 0 1 .6-1L2.3 4l1.3-1.3 1.3.7c.3-.3.7-.5 1-.6l.3-1.4h3.6z'/%3E%3Ccircle cx='8' cy='8' r='2.2'/%3E%3C/svg%3E")}.icon--dashboard{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h4v4H3zM9 3h4v4H9zM3 9h4v4H3zM9 9h4v4H9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3h4v4H3zM9 3h4v4H9zM3 9h4v4H3zM9 9h4v4H9z'/%3E%3C/svg%3E")}.icon--folder{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M2 5h5.2l1.4 2H14v6H2Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M2 5h5.2l1.4 2H14v6H2Z'/%3E%3C/svg%3E")}.icon--file{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 2h4l3 3v9H5z'/%3E%3Cpath d='M9 2v3h3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 2h4l3 3v9H5z'/%3E%3Cpath d='M9 2v3h3'/%3E%3C/svg%3E")}.icon--bell{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 13a1.5 1.5 0 0 1-1.5-1.5h3A1.5 1.5 0 0 1 8 13zM4 10h8l-1-3V5.5A3 3 0 0 0 8 3a3 3 0 0 0-3 2.5V7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 13a1.5 1.5 0 0 1-1.5-1.5h3A1.5 1.5 0 0 1 8 13zM4 10h8l-1-3V5.5A3 3 0 0 0 8 3a3 3 0 0 0-3 2.5V7z'/%3E%3C/svg%3E")}.icon--external-link{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4h5v5M7 9l5-5M4 7v5h5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4h5v5M7 9l5-5M4 7v5h5'/%3E%3C/svg%3E")}.icon--check-circle{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cpath d='M4.5 8 7 10.5l4.5-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cpath d='M4.5 8 7 10.5l4.5-5'/%3E%3C/svg%3E")}.icon--x-circle{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cpath d='m5 5 6 6M11 5l-6 6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cpath d='m5 5 6 6M11 5l-6 6'/%3E%3C/svg%3E")}.icon--home{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5 8 3l5 4.5V13H3z'/%3E%3Cpath d='M6.5 13V9.5h3V13'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5 8 3l5 4.5V13H3z'/%3E%3Cpath d='M6.5 13V9.5h3V13'/%3E%3C/svg%3E")}.icon--edit{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 12 1.5-4.5 5.5-5L13.5 5 8 10.5zM4 12h3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 12 1.5-4.5 5.5-5L13.5 5 8 10.5zM4 12h3'/%3E%3C/svg%3E")}.icon--trash{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M4 4h8v2H4zM6.25 2.5h3.5V4h-3.5zM5 6h6v7c0 1-.5 1.5-1.5 1.5h-3C5.5 14.5 5 14 5 13V6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M4 4h8v2H4zM6.25 2.5h3.5V4h-3.5zM5 6h6v7c0 1-.5 1.5-1.5 1.5h-3C5.5 14.5 5 14 5 13V6z'/%3E%3C/svg%3E")}.icon--eye{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8s2.2-3 6-3 6 3 6 3-2.2 3-6 3-6-3-6-3z'/%3E%3Ccircle cx='8' cy='8' r='1.8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8s2.2-3 6-3 6 3 6 3-2.2 3-6 3-6-3-6-3z'/%3E%3Ccircle cx='8' cy='8' r='1.8'/%3E%3C/svg%3E")}.icon--eye-off{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5 13 13M2.5 7.5S4.5 5 8 5c1 0 1.9.2 2.7.5M13.5 8.5S11.5 11 8 11c-.9 0-1.7-.2-2.5-.4'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5 13 13M2.5 7.5S4.5 5 8 5c1 0 1.9.2 2.7.5M13.5 8.5S11.5 11 8 11c-.9 0-1.7-.2-2.5-.4'/%3E%3C/svg%3E")}.icon--lock{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='7' width='8' height='7' rx='1' fill='%23fff'/%3E%3Ccircle cx='8' cy='10.5' r='1.3'/%3E%3Cpath d='M6 7V5.6a2 2 0 0 1 4 0V7H6' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='7' width='8' height='7' rx='1' fill='%23fff'/%3E%3Ccircle cx='8' cy='10.5' r='1.3'/%3E%3Cpath d='M6 7V5.6a2 2 0 0 1 4 0V7H6' fill='%23fff'/%3E%3C/svg%3E")}.icon--unlock{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='7' width='8' height='7' rx='1' fill='%23fff'/%3E%3Ccircle cx='8' cy='10.5' r='1.3'/%3E%3Cpath d='M10 7V5.6A2 2 0 0 0 6.6 4' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='7' width='8' height='7' rx='1' fill='%23fff'/%3E%3Ccircle cx='8' cy='10.5' r='1.3'/%3E%3Cpath d='M10 7V5.6A2 2 0 0 0 6.6 4' fill='%23fff'/%3E%3C/svg%3E")}.icon--refresh{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M10 3.7V-.5L4.75 4.75 10 10V5.8c2.94 0 5.25 2.31 5.25 5.25S12.94 16.3 10 16.3a5.25 5.25 0 0 1-5.25-5.25h-2.1c0 4.095 3.255 7.35 7.35 7.35s7.35-3.255 7.35-7.35S14.095 3.7 10 3.7z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M10 3.7V-.5L4.75 4.75 10 10V5.8c2.94 0 5.25 2.31 5.25 5.25S12.94 16.3 10 16.3a5.25 5.25 0 0 1-5.25-5.25h-2.1c0 4.095 3.255 7.35 7.35 7.35s7.35-3.255 7.35-7.35S14.095 3.7 10 3.7z'/%3E%3C/svg%3E")}.icon--copy{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='9' height='11' fill='%23fff' rx='1'/%3E%3Crect x='6' y='5' width='9' height='11' fill='%23fff' rx='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='9' height='11' fill='%23fff' rx='1'/%3E%3Crect x='6' y='5' width='9' height='11' fill='%23fff' rx='1'/%3E%3C/svg%3E")}.icon--share{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='9' r='2' fill='%23fff'/%3E%3Ccircle cx='11' cy='5' r='2' fill='%23fff'/%3E%3Ccircle cx='11' cy='13' r='2' fill='%23fff'/%3E%3Cpath fill='%23fff' d='m6.5 7.6 3.079-2.052.554.832-3.078 2.052zM6.66 10.11l3.079 2.052-.555.832-3.079-2.052z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='9' r='2' fill='%23fff'/%3E%3Ccircle cx='11' cy='5' r='2' fill='%23fff'/%3E%3Ccircle cx='11' cy='13' r='2' fill='%23fff'/%3E%3Cpath fill='%23fff' d='m6.5 7.6 3.079-2.052.554.832-3.078 2.052zM6.66 10.11l3.079 2.052-.555.832-3.079-2.052z'/%3E%3C/svg%3E")}.icon--calendar{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='10' rx='1.2' fill='%23fff'/%3E%3Cpath fill='%23fff' d='M2 4h12v3H2z'/%3E%3Cpath fill='%23fff' d='M5 2h2v3H5zM9 2h2v3H9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='10' rx='1.2' fill='%23fff'/%3E%3Cpath fill='%23fff' d='M2 4h12v3H2z'/%3E%3Cpath fill='%23fff' d='M5 2h2v3H5zM9 2h2v3H9z'/%3E%3C/svg%3E")}.icon--clock{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath fill='%23fff' d='M7.4 3.5h1.2v5H7.4z'/%3E%3Cpath fill='%23fff' d='m7.576 7.576.848.848-2.262 2.263-.849-.849z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath fill='%23fff' d='M7.4 3.5h1.2v5H7.4z'/%3E%3Cpath fill='%23fff' d='m7.576 7.576.848.848-2.262 2.263-.849-.849z'/%3E%3C/svg%3E")}.icon--star{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m8 2 1.76 3.55 3.94.6-2.8 2.7.6 3.95L8 10.9l-3.5 1.9.6-3.95-2.8-2.7 3.94-.6Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m8 2 1.76 3.55 3.94.6-2.8 2.7.6 3.95L8 10.9l-3.5 1.9.6-3.95-2.8-2.7 3.94-.6Z'/%3E%3C/svg%3E")}.icon--sort{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M8 3 5.5 6h5ZM4 7h8v1.4H4zM8 13l2.5-3h-5Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M8 3 5.5 6h5ZM4 7h8v1.4H4zM8 13l2.5-3h-5Z'/%3E%3C/svg%3E")}.icon--tag{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m3 6.5 5.8 5.8a1.2 1.2 0 0 0 1.7 0L13 9.8a1.2 1.2 0 0 0 0-1.7L7.2 2.3H3Z'/%3E%3Ccircle cx='5.2' cy='5.2' r='1.2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m3 6.5 5.8 5.8a1.2 1.2 0 0 0 1.7 0L13 9.8a1.2 1.2 0 0 0 0-1.7L7.2 2.3H3Z'/%3E%3Ccircle cx='5.2' cy='5.2' r='1.2'/%3E%3C/svg%3E")}.icon--play{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M3 3h2v10H3zM6 4l6 4-6 4Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M3 3h2v10H3zM6 4l6 4-6 4Z'/%3E%3C/svg%3E")}.icon--pause{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M5 3h2v10H5zM9 3h2v10H9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M5 3h2v10H5zM9 3h2v10H9z'/%3E%3C/svg%3E")}.icon--stop{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M3 3h10v10H3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M3 3h10v10H3z'/%3E%3C/svg%3E")}.icon--more-horizontal{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='8' r='1'/%3E%3Ccircle cx='8' cy='8' r='1'/%3E%3Ccircle cx='13' cy='8' r='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='8' r='1'/%3E%3Ccircle cx='8' cy='8' r='1'/%3E%3Ccircle cx='13' cy='8' r='1'/%3E%3C/svg%3E")}.icon--more-vertical{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='3' r='1'/%3E%3Ccircle cx='8' cy='8' r='1'/%3E%3Ccircle cx='8' cy='13' r='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' fill='%23fff' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='3' r='1'/%3E%3Ccircle cx='8' cy='8' r='1'/%3E%3Ccircle cx='8' cy='13' r='1'/%3E%3C/svg%3E")}.icon--hash{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M5 3h2v10H5zM9 3h2v10H9z'/%3E%3Cpath fill='%23fff' d='M3 5h10v2H3zM3 9h10v2H3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M5 3h2v10H5zM9 3h2v10H9z'/%3E%3Cpath fill='%23fff' d='M3 5h10v2H3zM3 9h10v2H3z'/%3E%3C/svg%3E")}.icon--layers{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M8 2 2 5l6 3 6-3-6-3zM2 9l6 3 6-3M2 13l6 3 6-3' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E%3Cpath d='M8 2 2 5l6 3 6-3-6-3zM2 9l6 3 6-3M2 13l6 3 6-3' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")}.icon--sparkles{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='m8 2 1.2 2.8L12 6 9.2 7.2 8 10 6.8 7.2 4 6l2.8-1.2L8 2zM3 11l.6 1.4L5 13l-1.4.6L3 15l-.6-1.4L1 13l1.4-.6L3 11zM13 9l.6 1.4 1.4.6-1.4.6L13 13l-.6-1.4L11 11l1.4-.6L13 9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='m8 2 1.2 2.8L12 6 9.2 7.2 8 10 6.8 7.2 4 6l2.8-1.2L8 2zM3 11l.6 1.4L5 13l-1.4.6L3 15l-.6-1.4L1 13l1.4-.6L3 11zM13 9l.6 1.4 1.4.6-1.4.6L13 13l-.6-1.4L11 11l1.4-.6L13 9z'/%3E%3C/svg%3E")}.icon--spinner{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M8 1.5A6.5 6.5 0 0 1 14.5 8h-2A4.5 4.5 0 0 0 8 3.5v-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M8 1.5A6.5 6.5 0 0 1 14.5 8h-2A4.5 4.5 0 0 0 8 3.5v-2z'/%3E%3C/svg%3E")}.icon--spinner-dots{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='8' cy='1.5' r='1'/%3E%3Ccircle cx='12.1' cy='3' r='1'/%3E%3Ccircle cx='14.5' cy='7' r='1'/%3E%3Ccircle cx='12.9' cy='11' r='1'/%3E%3Ccircle cx='8' cy='14.5' r='1'/%3E%3Ccircle cx='3.1' cy='13' r='1'/%3E%3Ccircle cx='1.5' cy='9' r='1'/%3E%3Ccircle cx='3' cy='3.1' r='1'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='8' cy='1.5' r='1'/%3E%3Ccircle cx='12.1' cy='3' r='1'/%3E%3Ccircle cx='14.5' cy='7' r='1'/%3E%3Ccircle cx='12.9' cy='11' r='1'/%3E%3Ccircle cx='8' cy='14.5' r='1'/%3E%3Ccircle cx='3.1' cy='13' r='1'/%3E%3Ccircle cx='1.5' cy='9' r='1'/%3E%3Ccircle cx='3' cy='3.1' r='1'/%3E%3C/g%3E%3C/svg%3E")}.icon--pulse{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3' fill='%23fff'/%3E%3C/svg%3E")}.icon--money{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='8' rx='1.5' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='8' rx='1.5' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='%23fff'/%3E%3C/svg%3E")}.icon--coins{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='7' r='3.5' fill='%23fff'/%3E%3Ccircle cx='7' cy='9' r='3.5' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='7' r='3.5' fill='%23fff'/%3E%3Ccircle cx='7' cy='9' r='3.5' fill='%23fff'/%3E%3C/svg%3E")}.icon--check{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 8 4 4 6-8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m3 8 4 4 6-8'/%3E%3C/svg%3E")}.icon--alert{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8 2 6 12H2Z' fill='%23fff'/%3E%3Cpath d='M7.25 6h1.5v5h-1.5z'/%3E%3Ccircle cx='8' cy='12' r='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8 2 6 12H2Z' fill='%23fff'/%3E%3Cpath d='M7.25 6h1.5v5h-1.5z'/%3E%3Ccircle cx='8' cy='12' r='1'/%3E%3C/svg%3E")}.icon--question{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath fill='%23fff' d='M8 4.2c-1.1 0-1.9.7-2.2 1.6l1 .4c.2-.6.6-1 1.2-1 .7 0 1.2.5 1.2 1.1 0 .6-.4.9-.9 1.2-.6.3-1.2.7-1.2 1.6v.5h1v-.4c0-.5.4-.8.9-1.1.7-.4 1.2-1 1.2-1.8 0-1.2-1-2.1-2.2-2.1Z'/%3E%3Ccircle cx='8' cy='11.5' r='.7' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.8'/%3E%3Cpath fill='%23fff' d='M8 4.2c-1.1 0-1.9.7-2.2 1.6l1 .4c.2-.6.6-1 1.2-1 .7 0 1.2.5 1.2 1.1 0 .6-.4.9-.9 1.2-.6.3-1.2.7-1.2 1.6v.5h1v-.4c0-.5.4-.8.9-1.1.7-.4 1.2-1 1.2-1.8 0-1.2-1-2.1-2.2-2.1Z'/%3E%3Ccircle cx='8' cy='11.5' r='.7' fill='%23fff'/%3E%3C/svg%3E")}.icon--flag{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M3 2.5V13h1.4V9.9L9 8.6l3.5 1.3V3.6L9 2.3 4.4 3.6V2.5Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M3 2.5V13h1.4V9.9L9 8.6l3.5 1.3V3.6L9 2.3 4.4 3.6V2.5Z'/%3E%3C/svg%3E")}.icon--shield{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M8 2 4 4.5v3.7c0 2.1 1.3 3.9 4 5 2.7-1.1 4-2.9 4-5V4.5Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M8 2 4 4.5v3.7c0 2.1 1.3 3.9 4 5 2.7-1.1 4-2.9 4-5V4.5Z'/%3E%3C/svg%3E")}.icon--shield-alert{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M8 2 4 4.5v3.7c0 2.1 1.3 3.9 4 5 2.7-1.1 4-2.9 4-5V4.5Z'/%3E%3Ccircle cx='11.3' cy='4' r='1.3' fill='%23fff'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M8 2 4 4.5v3.7c0 2.1 1.3 3.9 4 5 2.7-1.1 4-2.9 4-5V4.5Z'/%3E%3Ccircle cx='11.3' cy='4' r='1.3' fill='%23fff'/%3E%3C/svg%3E")}.icon--ban{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.2'/%3E%3Cpath fill='%23fff' d='m11.394 3.192 1.414 1.414-8.202 8.202-1.414-1.414z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='5.2'/%3E%3Cpath fill='%23fff' d='m11.394 3.192 1.414 1.414-8.202 8.202-1.414-1.414z'/%3E%3C/svg%3E")}.icon--tip{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M8 1.5a4.5 4.5 0 0 0-2.84 7.98c.38.3.84.92.97 1.45l.1.42h3.54l.1-.42c.13-.53.6-1.15.97-1.45A4.5 4.5 0 0 0 8 1.5zM6.75 13a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M8 1.5a4.5 4.5 0 0 0-2.84 7.98c.38.3.84.92.97 1.45l.1.42h3.54l.1-.42c.13-.53.6-1.15.97-1.45A4.5 4.5 0 0 0 8 1.5zM6.75 13a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5z'/%3E%3C/svg%3E")}.icon--email{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm.7 2 7.3 6 7.3-6H4.7Zm7.3 8L4 7.5v9.8c0 .4.3.7.7.7h14.6c.4 0 .7-.3.7-.7V7.5L12 14Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm.7 2 7.3 6 7.3-6H4.7Zm7.3 8L4 7.5v9.8c0 .4.3.7.7.7h14.6c.4 0 .7-.3.7-.7V7.5L12 14Z'/%3E%3C/svg%3E")}.icon--archive{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M4 3h16c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2h-4.7c-.3 0-.5.1-.7.3l-1.9 2c-.4.4-1 .4-1.4 0l-1.9-2c-.2-.2-.4-.3-.7-.3H4c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2Zm7 3v5H8l4 4 4-4h-3V6h-2ZM7 19h10v2H7v-2Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M4 3h16c1.1 0 2 .9 2 2v10c0 1.1-.9 2-2 2h-4.7c-.3 0-.5.1-.7.3l-1.9 2c-.4.4-1 .4-1.4 0l-1.9-2c-.2-.2-.4-.3-.7-.3H4c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2Zm7 3v5H8l4 4 4-4h-3V6h-2ZM7 19h10v2H7v-2Z'/%3E%3C/svg%3E")}.icon--email-open{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m4 10 12-7 12 7v16H4Z'/%3E%3Cpath d='m6 11 10-6 10 6v13H6Z'/%3E%3Cpath fill='%23fff' d='m6 11 10 7 10-7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m4 10 12-7 12 7v16H4Z'/%3E%3Cpath d='m6 11 10-6 10 6v13H6Z'/%3E%3Cpath fill='%23fff' d='m6 11 10 7 10-7'/%3E%3C/svg%3E")}.icon--send{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m3 4 18 8-18 8Z'/%3E%3Cpath d='m3 8 12 4-12 4Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='m3 4 18 8-18 8Z'/%3E%3Cpath d='m3 8 12 4-12 4Z'/%3E%3C/svg%3E")}.icon--inbox{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm.7 2 7.3 6 7.3-6H4.7Zm7.3 8L4 7.5v9.8c0 .4.3.7.7.7h14.6c.4 0 .7-.3.7-.7V7.5L12 14Z'/%3E%3Ccircle fill='%23fff' cx='20' cy='6' r='5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm.7 2 7.3 6 7.3-6H4.7Zm7.3 8L4 7.5v9.8c0 .4.3.7.7.7h14.6c.4 0 .7-.3.7-.7V7.5L12 14Z'/%3E%3Ccircle fill='%23fff' cx='20' cy='6' r='5'/%3E%3C/svg%3E")}.icon--attachment{-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M10.5 6C7 9.5 7 14.5 10.5 18l8 8c3.5 3.5 8.5 3.5 12 0s3.5-8.5 0-12L17 .5C14-2 9-2 5.5 1.5s-3.5 8.5 0 12l12 12c2 2 5 2 7 0s2-5 0-7L13 7c-1-1-2-1-2.5-1Z'/%3E%3Cpath d='M11.5 8c-2.5 2.5-2.5 6 0 8.5l8 8c2.5 2.5 6 2.5 8.5 0s2.5-6 0-8.5L14.5 2.5c-2-2-5-2-7 0s-2 5 0 7l12 12c1 1 2.5 1 3.5 0s1-2.5 0-3.5L11.5 6.5c-.5-.5-.5 1 0 1.5Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M10.5 6C7 9.5 7 14.5 10.5 18l8 8c3.5 3.5 8.5 3.5 12 0s3.5-8.5 0-12L17 .5C14-2 9-2 5.5 1.5s-3.5 8.5 0 12l12 12c2 2 5 2 7 0s2-5 0-7L13 7c-1-1-2-1-2.5-1Z'/%3E%3Cpath d='M11.5 8c-2.5 2.5-2.5 6 0 8.5l8 8c2.5 2.5 6 2.5 8.5 0s2.5-6 0-8.5L14.5 2.5c-2-2-5-2-7 0s-2 5 0 7l12 12c1 1 2.5 1 3.5 0s1-2.5 0-3.5L11.5 6.5c-.5-.5-.5 1 0 1.5Z'/%3E%3C/svg%3E")}@keyframes icon-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.icon--spinning{animation:icon-spin .85s linear infinite}@keyframes icon-pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.25)}to{opacity:1;transform:scale(1)}}.icon--pulsing{animation:icon-pulse 1.2s ease-in-out infinite}.icon--loader.icon--spinner,.icon--loader.icon--spinner-dots{animation:icon-spin .85s linear infinite}.icon--loader.icon--pulse{animation:icon-pulse 1.2s ease-in-out infinite}.icon--loader-fast{animation-duration:.55s!important}.icon--loader-slow{animation-duration:1.8s!important}@media (prefers-reduced-motion:reduce){.icon--loader,.icon--loader-fast,.icon--loader-slow,.icon--pulsing,.icon--spinning{animation:none!important}}.icon-container{align-items:center;background-color:var(--color-surface-subtle);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text);display:inline-flex;height:var(--icon-container-md);justify-content:center;width:var(--icon-container-md)}.icon-container--sm{height:var(--icon-container-sm);width:var(--icon-container-sm)}.icon-container--lg{height:var(--icon-container-lg);width:var(--icon-container-lg)}.icon-container--xl{height:var(--icon-container-xl);width:var(--icon-container-xl)}.icon-container--circle{border-radius:999px}.icon-container--circle-sm{border-radius:999px;height:var(--icon-container-sm);width:var(--icon-container-sm)}.icon-container--circle-lg{border-radius:999px;height:var(--icon-container-lg);width:var(--icon-container-lg)}.icon-container--accent{background-color:var(--accent-soft-surface,var(--color-accent-soft));border-color:var(--accent-soft-border,var(--color-accent));color:var(--accent-soft-on,var(--color-on-accent))}.icon-container--accent-strong{background-color:var(--color-accent-strong);color:var(--color-on-accent)}.icon-container--success{background-color:var(--success-soft-surface,var(--color-success-soft));border-color:var(--success-soft-border,var(--color-success));color:var(--success-soft-on,var(--color-on-success))}.icon-container--info{background-color:var(--info-soft-surface,var(--color-info-soft));border-color:var(--info-soft-border,var(--color-info));color:var(--info-soft-on,var(--color-on-info))}.icon-container--warning{background-color:var(--warning-soft-surface,var(--color-warning-soft));border-color:var(--warning-soft-border,var(--color-warning));color:var(--warning-soft-on,var(--color-on-warning))}.icon-container--danger{background-color:var(--danger-soft-surface,var(--color-danger-soft));border-color:var(--danger-soft-border,var(--color-danger));color:var(--danger-soft-on,var(--color-on-danger))}.icon-container--muted{background-color:var(--color-muted-bg);color:var(--color-text-muted)}.icon-color--accent{color:var(--color-accent)}.icon-color--success{color:var(--color-success)}.icon-color--info{color:var(--color-info)}.icon-color--warning{color:var(--color-warning)}.icon-color--danger{color:var(--color-danger)}.icon-color--muted{color:var(--color-text-muted)}.icon-color--soft{color:var(--color-text-soft)}.icon-color--subtle{color:var(--color-border-subtle)}.icon-color--on-accent{color:var(--color-on-accent)}.icon-color--inverse{color:var(--color-text-on-strong)}.button .icon,.button--icon .icon{height:var(--icon-sm);width:var(--icon-sm)}.button--lg .icon{height:var(--icon-md);width:var(--icon-md)}.button--xl .icon{height:var(--icon-lg);width:var(--icon-lg)}.button--icon{align-items:center;display:inline-flex;gap:0;height:auto;justify-content:center;padding:var(--space-2);width:auto}.button--icon-only{height:var(--icon-container-md);padding:0;width:var(--icon-container-md)}.icon-badge{display:inline-flex;position:relative}.icon-badge__dot{background-color:var(--color-accent);border:1px solid var(--color-surface);border-radius:999px;height:8px;position:absolute;right:-2px;top:-2px;width:8px}.icon-badge__dot--success{background-color:var(--color-success)}.icon-badge__dot--danger{background-color:var(--color-danger)}.icon-badge__dot--warning{background-color:var(--color-warning)}.icon-badge__dot--info{background-color:var(--color-info)}.icon-badge__dot--neutral{background-color:var(--color-muted-bg)}.icon-badge__dot--disabled{background-color:var(--color-border-subtle)}.icon--a{height:var(--icon-lg);width:var(--icon-lg)}.icon-container--a{padding:var(--space-3)}.icon--b{height:var(--icon-md);width:var(--icon-md)}.icon-container--b{padding:var(--space-2)}.icon--c{height:var(--icon-sm);width:var(--icon-sm)}.icon-container--c{padding:var(--space-1)}.icon--d{height:var(--icon-xxs);width:var(--icon-xxs)}.bg-dark .icon,.surface-on-dark .icon{color:var(--color-text-on-strong)}.bg-dark .icon-container,.surface-on-dark .icon-container{background-color:var(--color-bg-soft);border-color:var(--color-border-strong)}.bg-light .icon,.surface-on-light .icon{color:var(--color-text)}.bg-light .icon-container,.surface-on-light .icon-container{background-color:var(--color-surface-subtle);border-color:var(--color-border-subtle)}.list-group__icon,.media__icon svg,.nav__item svg,.steps__bullet svg,.timeline--rich .icon{stroke:currentColor;fill:none;height:var(--icon-sm);width:var(--icon-sm)}.accordion__icon .icon,.alert__icon .icon,.breadcrumb__icon .icon,.chip__icon .icon,.tab__icon .icon,.table__icon .icon,.tree__icon .icon{height:var(--icon-sm);width:var(--icon-sm)}.icon--rotate-90{transform:rotate(90deg)}.icon--rotate-180{transform:rotate(180deg)}.icon--rotate-270{transform:rotate(270deg)}.icon--flip-h{transform:scaleX(-1)}.icon--flip-v{transform:scaleY(-1)}.icon--thin{stroke-width:var(--icon-stroke-thin)}.icon--regular{stroke-width:var(--icon-stroke-regular)}.icon--bold{stroke-width:var(--icon-stroke-bold)}.icon--outline{fill:none;stroke:currentColor}.icon--opacity-25{opacity:.25}.icon--opacity-50{opacity:.5}.icon--opacity-75{opacity:.75}.icon--disabled{opacity:.4;pointer-events:none}
|
|
1
|
+
/************************************************************
|
|
2
|
+
* VLAH DESIGN SYSTEM (VDS) - Icons
|
|
3
|
+
*
|
|
4
|
+
* Responsibilities:
|
|
5
|
+
* - Define all icon sizing primitives (xs → 2xl)
|
|
6
|
+
* - Provide inline icon alignment rules for text, labels, and
|
|
7
|
+
* interactive elements
|
|
8
|
+
* - Supply semantic colour variants for icons (info/success/warning/
|
|
9
|
+
* danger/error/neutral/muted/accent)
|
|
10
|
+
* - Support icon-button patterns with hover, focus, active, and
|
|
11
|
+
* disabled states
|
|
12
|
+
*
|
|
13
|
+
* System Notes:
|
|
14
|
+
* - Fully token-driven: size, stroke width, colours, motion
|
|
15
|
+
* - SVG icons should use currentColor for automatic skinning
|
|
16
|
+
* - Interactive icon buttons rely on layout, focus, and transition
|
|
17
|
+
* primitives defined in base.css and buttons.css
|
|
18
|
+
************************************************************/
|
|
19
|
+
|
|
20
|
+
/* ---------------------------------------------------------
|
|
21
|
+
1. BASE ICON (INLINE SVG)
|
|
22
|
+
--------------------------------------------------------- */
|
|
23
|
+
|
|
24
|
+
.icon {
|
|
25
|
+
display: inline-block;
|
|
26
|
+
width: var(--icon-md);
|
|
27
|
+
height: var(--icon-md);
|
|
28
|
+
flex-shrink: 0;
|
|
29
|
+
stroke: currentColor;
|
|
30
|
+
fill: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.icon--xxs {
|
|
34
|
+
width: var(--icon-xxs);
|
|
35
|
+
height: var(--icon-xxs);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.icon--xs {
|
|
39
|
+
width: var(--icon-xs);
|
|
40
|
+
height: var(--icon-xs);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.icon--sm {
|
|
44
|
+
width: var(--icon-sm);
|
|
45
|
+
height: var(--icon-sm);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.icon--md {
|
|
49
|
+
width: var(--icon-md);
|
|
50
|
+
height: var(--icon-md);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.icon--lg {
|
|
54
|
+
width: var(--icon-lg);
|
|
55
|
+
height: var(--icon-lg);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.icon--xl {
|
|
59
|
+
width: var(--icon-xl);
|
|
60
|
+
height: var(--icon-xl);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.icon--filled {
|
|
64
|
+
fill: currentColor;
|
|
65
|
+
stroke: none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* ---------------------------------------------------------
|
|
69
|
+
2. MASK-BASED ICONS (GLYPHS)
|
|
70
|
+
All .icon--* glyphs assume:
|
|
71
|
+
- used together with .icon
|
|
72
|
+
- colour driven by currentColor
|
|
73
|
+
--------------------------------------------------------- */
|
|
74
|
+
|
|
75
|
+
.icon--mask {
|
|
76
|
+
background-color: currentColor;
|
|
77
|
+
mask-mode: luminance;
|
|
78
|
+
-webkit-mask-repeat: no-repeat;
|
|
79
|
+
mask-repeat: no-repeat;
|
|
80
|
+
-webkit-mask-position: center;
|
|
81
|
+
mask-position: center;
|
|
82
|
+
-webkit-mask-size: contain;
|
|
83
|
+
mask-size: contain;
|
|
84
|
+
stroke: none;
|
|
85
|
+
fill: none;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.icon-glyph {
|
|
89
|
+
display: inline-block;
|
|
90
|
+
width: var(--icon-md);
|
|
91
|
+
height: var(--icon-md);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* ---------------------------------------------------------
|
|
95
|
+
3. CORE STATE ICONS (GLYPHS)
|
|
96
|
+
Usage: <span class="icon icon--mask icon--STATE"></span>
|
|
97
|
+
--------------------------------------------------------- */
|
|
98
|
+
|
|
99
|
+
.icon--info {
|
|
100
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Crect x='7.4' y='7.0' width='1.2' height='3.5' fill='white'/%3E%3Ccircle cx='8' cy='5.0' r='0.70' fill='white'/%3E%3C/svg%3E");
|
|
101
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Crect x='7.4' y='7.0' width='1.2' height='3.5' fill='white'/%3E%3Ccircle cx='8' cy='5.0' r='0.70' fill='white'/%3E%3C/svg%3E");
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.icon--success {
|
|
105
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M3.2 8.3 L6.8 11.4 L12.8 4.6 L11.5 3.5 L6.8 8.8 L4.4 6.7 Z'/%3E%3C/svg%3E");
|
|
106
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M3.2 8.3 L6.8 11.4 L12.8 4.6 L11.5 3.5 L6.8 8.8 L4.4 6.7 Z'/%3E%3C/svg%3E");
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.icon--warning {
|
|
110
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 2.6 L14 13.4 H2 Z'/%3E%3Cpath fill='black' d='M8 4.0 L12.2 12.4 H3.8 Z'/%3E%3Crect x='7.45' y='6.3' width='1' height='3.2' fill='white'/%3E%3Ccircle cx='8' cy='11.1' r='0.55' fill='white'/%3E%3C/svg%3E");
|
|
111
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 2.6 L14 13.4 H2 Z'/%3E%3Cpath fill='black' d='M8 4.0 L12.2 12.4 H3.8 Z'/%3E%3Crect x='7.45' y='6.3' width='1' height='3.2' fill='white'/%3E%3Ccircle cx='8' cy='11.1' r='0.55' fill='white'/%3E%3C/svg%3E");
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.icon--danger {
|
|
115
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7.375' y='3.2' width='1.25' height='9.6' fill='white' transform='rotate(45 8 8)'/%3E%3Crect x='7.375' y='3.2' width='1.25' height='9.6' fill='white' transform='rotate(-45 8 8)'/%3E%3C/svg%3E");
|
|
116
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7.375' y='3.2' width='1.25' height='9.6' fill='white' transform='rotate(45 8 8)'/%3E%3Crect x='7.375' y='3.2' width='1.25' height='9.6' fill='white' transform='rotate(-45 8 8)'/%3E%3C/svg%3E");
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.icon--help {
|
|
120
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Cpath fill='white' d='M8 4.2 C9.4 4.2 10.3 5.1 10.3 6.1 C10.3 7.1 9.6 7.7 8.9 8.1 C8.2 8.5 7.8 8.9 7.8 9.6 V10.3 H6.8 V9.5 C6.8 8.5 7.5 7.9 8.1 7.6 C8.8 7.3 9.3 6.8 9.3 6.1 C9.3 5.3 8.7 4.7 8 4.7 C7.2 4.7 6.7 5.2 6.3 5.7 L5.5 5.1 C6.1 4.2 7.1 3.7 8 3.7 C9.6 3.7 10.8 4.8 10.8 6.1 C10.8 7.0 10.4 7.7 9.7 8.2 C8.8 8.9 8.3 9.3 8.3 10.2 V10.3 H7.3 V10.2 C7.3 9.1 7.9 8.5 8.6 8.0 C9.3 7.5 9.8 7.0 9.8 6.1 C9.8 5.0 9 4.2 8 4.2 Z'/%3E%3Ccircle cx='7.8' cy='11.7' r='0.7' fill='white'/%3E%3C/svg%3E");
|
|
121
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Cpath fill='white' d='M8 4.2 C9.4 4.2 10.3 5.1 10.3 6.1 C10.3 7.1 9.6 7.7 8.9 8.1 C8.2 8.5 7.8 8.9 7.8 9.6 V10.3 H6.8 V9.5 C6.8 8.5 7.5 7.9 8.1 7.6 C8.8 7.3 9.3 6.8 9.3 6.1 C9.3 5.3 8.7 4.7 8 4.7 C7.2 4.7 6.7 5.2 6.3 5.7 L5.5 5.1 C6.1 4.2 7.1 3.7 8 3.7 C9.6 3.7 10.8 4.8 10.8 6.1 C10.8 7.0 10.4 7.7 9.7 8.2 C8.8 8.9 8.3 9.3 8.3 10.2 V10.3 H7.3 V10.2 C7.3 9.1 7.9 8.5 8.6 8.0 C9.3 7.5 9.8 7.0 9.8 6.1 C9.8 5.0 9 4.2 8 4.2 Z'/%3E%3Ccircle cx='7.8' cy='11.7' r='0.7' fill='white'/%3E%3C/svg%3E");
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.icon--neutral {
|
|
125
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3' fill='white'/%3E%3C/svg%3E");
|
|
126
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3' fill='white'/%3E%3C/svg%3E");
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.icon--pending {
|
|
130
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Cpath fill='black' d='M8 8 L14.06 5.47 A7 7 0 0 0 11.53 1.94 Z'/%3E%3C/svg%3E");
|
|
131
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Cpath fill='black' d='M8 8 L14.06 5.47 A7 7 0 0 0 11.53 1.94 Z'/%3E%3C/svg%3E");
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.icon--online {
|
|
135
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='4' fill='white'/%3E%3C/svg%3E");
|
|
136
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='4' fill='white'/%3E%3C/svg%3E");
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.icon--offline {
|
|
140
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Crect x='7.375' y='2.8' width='1.25' height='10.4' fill='white' transform='rotate(45 8 8)'/%3E%3C/svg%3E");
|
|
141
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Crect x='7.375' y='2.8' width='1.25' height='10.4' fill='white' transform='rotate(45 8 8)'/%3E%3C/svg%3E");
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.icon--blocked {
|
|
145
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Crect x='7.375' y='2.8' width='1.25' height='10.4' fill='white' transform='rotate(-45 8 8)'/%3E%3C/svg%3E");
|
|
146
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Crect x='7.375' y='2.8' width='1.25' height='10.4' fill='white' transform='rotate(-45 8 8)'/%3E%3C/svg%3E");
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* ---------------------------------------------------------
|
|
150
|
+
4. GENERAL UI ICONS (GLYPHS)
|
|
151
|
+
--------------------------------------------------------- */
|
|
152
|
+
|
|
153
|
+
.icon--chevron-left {
|
|
154
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='10 3 5 8 10 13'/%3E%3C/svg%3E");
|
|
155
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='10 3 5 8 10 13'/%3E%3C/svg%3E");
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.icon--chevron-right {
|
|
159
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 3 11 8 6 13'/%3E%3C/svg%3E");
|
|
160
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 3 11 8 6 13'/%3E%3C/svg%3E");
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.icon--chevron-up {
|
|
164
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 10 8 5 13 10'/%3E%3C/svg%3E");
|
|
165
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 10 8 5 13 10'/%3E%3C/svg%3E");
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.icon--chevron-down {
|
|
169
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 6 8 11 13 6'/%3E%3C/svg%3E");
|
|
170
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 6 8 11 13 6'/%3E%3C/svg%3E");
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.icon--arrow-left {
|
|
174
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='13' y1='8' x2='3' y2='8'/%3E%3Cpolyline points='7 3 3 8 7 13'/%3E%3C/svg%3E");
|
|
175
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='13' y1='8' x2='3' y2='8'/%3E%3Cpolyline points='7 3 3 8 7 13'/%3E%3C/svg%3E");
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.icon--arrow-right {
|
|
179
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='3' y1='8' x2='13' y2='8'/%3E%3Cpolyline points='9 3 13 8 9 13'/%3E%3C/svg%3E");
|
|
180
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='3' y1='8' x2='13' y2='8'/%3E%3Cpolyline points='9 3 13 8 9 13'/%3E%3C/svg%3E");
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.icon--arrow-up {
|
|
184
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='13' x2='8' y2='3'/%3E%3Cpolyline points='3 7 8 3 13 7'/%3E%3C/svg%3E");
|
|
185
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='13' x2='8' y2='3'/%3E%3Cpolyline points='3 7 8 3 13 7'/%3E%3C/svg%3E");
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.icon--arrow-down {
|
|
189
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='3' x2='8' y2='13'/%3E%3Cpolyline points='3 9 8 13 13 9'/%3E%3C/svg%3E");
|
|
190
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='8' y1='3' x2='8' y2='13'/%3E%3Cpolyline points='3 9 8 13 13 9'/%3E%3C/svg%3E");
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.icon--filter {
|
|
194
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4h10L9 8.5V12l-2 1V8.5L3 4z'/%3E%3C/svg%3E");
|
|
195
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4h10L9 8.5V12l-2 1V8.5L3 4z'/%3E%3C/svg%3E");
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.icon--search {
|
|
199
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='4' fill='white'/%3E%3Ccircle cx='6' cy='6' r='2.5' fill='black'/%3E%3Crect x='9.8' y='9.8' width='3.5' height='3' fill='white' transform='rotate(45 11.5 11.5)'/%3E%3C/svg%3E");
|
|
200
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='4' fill='white'/%3E%3Ccircle cx='6' cy='6' r='2.5' fill='black'/%3E%3Crect x='9.8' y='9.8' width='3.5' height='3' fill='white' transform='rotate(45 11.5 11.5)'/%3E%3C/svg%3E");
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.icon--menu {
|
|
204
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='10' height='1.8' fill='white'/%3E%3Crect x='3' y='7.9' width='10' height='1.8' fill='white'/%3E%3Crect x='3' y='11.8' width='10' height='1.8' fill='white'/%3E%3C/svg%3E");
|
|
205
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='10' height='1.8' fill='white'/%3E%3Crect x='3' y='7.9' width='10' height='1.8' fill='white'/%3E%3Crect x='3' y='11.8' width='10' height='1.8' fill='white'/%3E%3C/svg%3E");
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.icon--close {
|
|
209
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7.375' y='3.2' width='1.25' height='9.6' fill='white' transform='rotate(45 8 8)'/%3E%3Crect x='7.375' y='3.2' width='1.25' height='9.6' fill='white' transform='rotate(-45 8 8)'/%3E%3C/svg%3E");
|
|
210
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7.375' y='3.2' width='1.25' height='9.6' fill='white' transform='rotate(45 8 8)'/%3E%3Crect x='7.375' y='3.2' width='1.25' height='9.6' fill='white' transform='rotate(-45 8 8)'/%3E%3C/svg%3E");
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.icon--plus {
|
|
214
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7.375' y='3' width='1.25' height='10' fill='white'/%3E%3Crect x='3' y='7.375' width='10' height='1.25' fill='white'/%3E%3C/svg%3E");
|
|
215
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7.375' y='3' width='1.25' height='10' fill='white'/%3E%3Crect x='3' y='7.375' width='10' height='1.25' fill='white'/%3E%3C/svg%3E");
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.icon--minus {
|
|
219
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='7.375' width='10' height='1.25' fill='white'/%3E%3C/svg%3E");
|
|
220
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='7.375' width='10' height='1.25' fill='white'/%3E%3C/svg%3E");
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.icon--upload {
|
|
224
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='11' width='8' height='2' fill='white'/%3E%3Crect x='7.375' y='6' width='1.25' height='5' fill='white'/%3E%3Cpath d='M5.5 7.2 L8 4 L10.5 7.2 Z' fill='white'/%3E%3C/svg%3E");
|
|
225
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='11' width='8' height='2' fill='white'/%3E%3Crect x='7.375' y='6' width='1.25' height='5' fill='white'/%3E%3Cpath d='M5.5 7.2 L8 4 L10.5 7.2 Z' fill='white'/%3E%3C/svg%3E");
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.icon--download {
|
|
229
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='3' width='8' height='2' fill='white'/%3E%3Crect x='7.375' y='5' width='1.25' height='5.5' fill='white'/%3E%3Cpath d='M5.5 9 L8 12.2 L10.5 9 Z' fill='white'/%3E%3C/svg%3E");
|
|
230
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='3' width='8' height='2' fill='white'/%3E%3Crect x='7.375' y='5' width='1.25' height='5.5' fill='white'/%3E%3Cpath d='M5.5 9 L8 12.2 L10.5 9 Z' fill='white'/%3E%3C/svg%3E");
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.icon--user {
|
|
234
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M3 13c1.2-2 2.9-3 5-3s3.8 1 5 3'/%3E%3C/svg%3E");
|
|
235
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='5' r='3'/%3E%3Cpath d='M3 13c1.2-2 2.9-3 5-3s3.8 1 5 3'/%3E%3C/svg%3E");
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.icon--settings {
|
|
239
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M9.8 2.1l-.3 1.4a4.6 4.6 0 0 1 1 .6l1.3-.7 1.3 1.3-.7 1.3c.3.3.5.7.6 1l1.4.3v1.8l-1.4.3a4.6 4.6 0 0 1-.6 1l.7 1.3-1.3 1.3-1.3-.7c-.3.3-.7.5-1 .6l-.3 1.4H6.2l-.3-1.4a4.6 4.6 0 0 1-1-.6l-1.3.7L2.3 11l.7-1.3a4.6 4.6 0 0 1-.6-1L1 8.4V6.6l1.4-.3a4.6 4.6 0 0 1 .6-1L2.3 4l1.3-1.3 1.3.7c.3-.3.7-.5 1-.6l.3-1.4h3.6z'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='black'/%3E%3C/svg%3E");
|
|
240
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M9.8 2.1l-.3 1.4a4.6 4.6 0 0 1 1 .6l1.3-.7 1.3 1.3-.7 1.3c.3.3.5.7.6 1l1.4.3v1.8l-1.4.3a4.6 4.6 0 0 1-.6 1l.7 1.3-1.3 1.3-1.3-.7c-.3.3-.7.5-1 .6l-.3 1.4H6.2l-.3-1.4a4.6 4.6 0 0 1-1-.6l-1.3.7L2.3 11l.7-1.3a4.6 4.6 0 0 1-.6-1L1 8.4V6.6l1.4-.3a4.6 4.6 0 0 1 .6-1L2.3 4l1.3-1.3 1.3.7c.3-.3.7-.5 1-.6l.3-1.4h3.6z'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='black'/%3E%3C/svg%3E");
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.icon--dashboard {
|
|
244
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='4' height='4'/%3E%3Crect x='9' y='3' width='4' height='4'/%3E%3Crect x='3' y='9' width='4' height='4'/%3E%3Crect x='9' y='9' width='4' height='4'/%3E%3C/svg%3E");
|
|
245
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='4' height='4'/%3E%3Crect x='9' y='3' width='4' height='4'/%3E%3Crect x='3' y='9' width='4' height='4'/%3E%3Crect x='9' y='9' width='4' height='4'/%3E%3C/svg%3E");
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.icon--folder {
|
|
249
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M2 5 H7.2 L8.6 7 H14 V13 H2 Z'/%3E%3C/svg%3E");
|
|
250
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M2 5 H7.2 L8.6 7 H14 V13 H2 Z'/%3E%3C/svg%3E");
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.icon--file {
|
|
254
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 2h4l3 3v9H5z'/%3E%3Cpath d='M9 2v3h3'/%3E%3C/svg%3E");
|
|
255
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 2h4l3 3v9H5z'/%3E%3Cpath d='M9 2v3h3'/%3E%3C/svg%3E");
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.icon--bell {
|
|
259
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 13a1.5 1.5 0 01-1.5-1.5h3A1.5 1.5 0 018 13z'/%3E%3Cpath d='M4 10h8L11 7V5.5A3 3 0 008 3a3 3 0 00-3 2.5V7z'/%3E%3C/svg%3E");
|
|
260
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 13a1.5 1.5 0 01-1.5-1.5h3A1.5 1.5 0 018 13z'/%3E%3Cpath d='M4 10h8L11 7V5.5A3 3 0 008 3a3 3 0 00-3 2.5V7z'/%3E%3C/svg%3E");
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.icon--external-link {
|
|
264
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4h5v5'/%3E%3Cpath d='M7 9l5-5'/%3E%3Cpath d='M4 7v5h5'/%3E%3C/svg%3E");
|
|
265
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 4h5v5'/%3E%3Cpath d='M7 9l5-5'/%3E%3Cpath d='M4 7v5h5'/%3E%3C/svg%3E");
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.icon--check-circle {
|
|
269
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='4.5 8 7 10.5 11.5 5.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
270
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='4.5 8 7 10.5 11.5 5.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.icon--x-circle {
|
|
274
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cline x1='5' y1='5' x2='11' y2='11'/%3E%3Cline x1='11' y1='5' x2='5' y2='11'/%3E%3C/svg%3E");
|
|
275
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Cline x1='5' y1='5' x2='11' y2='11'/%3E%3Cline x1='11' y1='5' x2='5' y2='11'/%3E%3C/svg%3E");
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.icon--home {
|
|
279
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5L8 3l5 4.5V13H3z'/%3E%3Cpath d='M6.5 13V9.5h3V13'/%3E%3C/svg%3E");
|
|
280
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 7.5L8 3l5 4.5V13H3z'/%3E%3Cpath d='M6.5 13V9.5h3V13'/%3E%3C/svg%3E");
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.icon--edit {
|
|
284
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12l1.5-4.5L11 2.5l2.5 2.5-5.5 5.5z'/%3E%3Cpath d='M4 12h3'/%3E%3C/svg%3E");
|
|
285
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 12l1.5-4.5L11 2.5l2.5 2.5-5.5 5.5z'/%3E%3Cpath d='M4 12h3'/%3E%3C/svg%3E");
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.icon--trash {
|
|
289
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='8' height='2' fill='white'/%3E%3Crect x='6.25' y='2.5' width='3.5' height='1.5' fill='white'/%3E%3Cpath d='M5 6h6v7c0 1-0.5 1.5-1.5 1.5h-3c-1 0-1.5-0.5-1.5-1.5V6z' fill='white'/%3E%3C/svg%3E");
|
|
290
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='8' height='2' fill='white'/%3E%3Crect x='6.25' y='2.5' width='3.5' height='1.5' fill='white'/%3E%3Cpath d='M5 6h6v7c0 1-0.5 1.5-1.5 1.5h-3c-1 0-1.5-0.5-1.5-1.5V6z' fill='white'/%3E%3C/svg%3E");
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.icon--eye {
|
|
294
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8s2.2-3 6-3 6 3 6 3-2.2 3-6 3S2 8 2 8z'/%3E%3Ccircle cx='8' cy='8' r='1.8'/%3E%3C/svg%3E");
|
|
295
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 8s2.2-3 6-3 6 3 6 3-2.2 3-6 3S2 8 2 8z'/%3E%3Ccircle cx='8' cy='8' r='1.8'/%3E%3C/svg%3E");
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.icon--eye-off {
|
|
299
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L13 13'/%3E%3Cpath d='M2.5 7.5S4.5 5 8 5c1 0 1.9.2 2.7.5'/%3E%3Cpath d='M13.5 8.5S11.5 11 8 11c-.9 0-1.7-.2-2.5-.4'/%3E%3C/svg%3E");
|
|
300
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L13 13'/%3E%3Cpath d='M2.5 7.5S4.5 5 8 5c1 0 1.9.2 2.7.5'/%3E%3Cpath d='M13.5 8.5S11.5 11 8 11c-.9 0-1.7-.2-2.5-.4'/%3E%3C/svg%3E");
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.icon--lock {
|
|
304
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='7' width='8' height='7' rx='1' fill='white'/%3E%3Ccircle cx='8' cy='10.5' r='1.3' fill='black'/%3E%3Cpath d='M6 7 V5.6 A2 2 0 0 1 10 5.6 V7 H6' fill='white'/%3E%3C/svg%3E");
|
|
305
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='7' width='8' height='7' rx='1' fill='white'/%3E%3Ccircle cx='8' cy='10.5' r='1.3' fill='black'/%3E%3Cpath d='M6 7 V5.6 A2 2 0 0 1 10 5.6 V7 H6' fill='white'/%3E%3C/svg%3E");
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.icon--unlock {
|
|
309
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='7' width='8' height='7' rx='1' fill='white'/%3E%3Ccircle cx='8' cy='10.5' r='1.3' fill='black'/%3E%3Cpath d='M10 7 V5.6 A2 2 0 0 0 6.6 4.0' fill='white'/%3E%3C/svg%3E");
|
|
310
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='7' width='8' height='7' rx='1' fill='white'/%3E%3Ccircle cx='8' cy='10.5' r='1.3' fill='black'/%3E%3Cpath d='M10 7 V5.6 A2 2 0 0 0 6.6 4.0' fill='white'/%3E%3C/svg%3E");
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.icon--refresh {
|
|
314
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-2.6,-2.6) scale(1.05)'%3E%3Cpath fill='white' d='M12 6V2L7 7l5 5V8c2.8 0 5 2.2 5 5s-2.2 5-5 5a5 5 0 0 1-5-5H5c0 3.9 3.1 7 7 7s7-3.1 7-7-3.1-7-7-7z'/%3E%3C/g%3E%3C/svg%3E");
|
|
315
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-2.6,-2.6) scale(1.05)'%3E%3Cpath fill='white' d='M12 6V2L7 7l5 5V8c2.8 0 5 2.2 5 5s-2.2 5-5 5a5 5 0 0 1-5-5H5c0 3.9 3.1 7 7 7s7-3.1 7-7-3.1-7-7-7z'/%3E%3C/g%3E%3C/svg%3E");
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.icon--copy {
|
|
319
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='9' height='11' fill='white' rx='1'/%3E%3Crect x='6' y='5' width='9' height='11' fill='white' rx='1'/%3E%3C/svg%3E");
|
|
320
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='9' height='11' fill='white' rx='1'/%3E%3Crect x='6' y='5' width='9' height='11' fill='white' rx='1'/%3E%3C/svg%3E");
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.icon--share {
|
|
324
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='9' r='2' fill='white'/%3E%3Ccircle cx='11' cy='5' r='2' fill='white'/%3E%3Ccircle cx='11' cy='13' r='2' fill='white'/%3E%3Crect x='6.50' y='7.60' width='3.70' height='1' transform='rotate(-33.69 6.50 7.60)' fill='white'/%3E%3Crect x='6.66' y='10.11' width='3.70' height='1' transform='rotate(33.69 6.66 10.11)' fill='white'/%3E%3C/svg%3E");
|
|
325
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='9' r='2' fill='white'/%3E%3Ccircle cx='11' cy='5' r='2' fill='white'/%3E%3Ccircle cx='11' cy='13' r='2' fill='white'/%3E%3Crect x='6.50' y='7.60' width='3.70' height='1' transform='rotate(-33.69 6.50 7.60)' fill='white'/%3E%3Crect x='6.66' y='10.11' width='3.70' height='1' transform='rotate(33.69 6.66 10.11)' fill='white'/%3E%3C/svg%3E");
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.icon--calendar {
|
|
329
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='10' rx='1.2' fill='white'/%3E%3Crect x='2' y='4' width='12' height='3' fill='white'/%3E%3Crect x='5' y='2' width='2' height='3' fill='white'/%3E%3Crect x='9' y='2' width='2' height='3' fill='white'/%3E%3C/svg%3E");
|
|
330
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='10' rx='1.2' fill='white'/%3E%3Crect x='2' y='4' width='12' height='3' fill='white'/%3E%3Crect x='5' y='2' width='2' height='3' fill='white'/%3E%3Crect x='9' y='2' width='2' height='3' fill='white'/%3E%3C/svg%3E");
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
.icon--clock {
|
|
334
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.5' fill='black'/%3E%3Crect x='7.4' y='3.5' width='1.2' height='5' fill='white'/%3E%3Crect x='7.4' y='8' width='1.2' height='3.2' fill='white' transform='rotate(45 8 8)'/%3E%3C/svg%3E");
|
|
335
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.5' fill='black'/%3E%3Crect x='7.4' y='3.5' width='1.2' height='5' fill='white'/%3E%3Crect x='7.4' y='8' width='1.2' height='3.2' fill='white' transform='rotate(45 8 8)'/%3E%3C/svg%3E");
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.icon--star {
|
|
339
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 2 L9.76 5.55 L13.7 6.15 L10.9 8.85 L11.5 12.8 L8 10.9 L4.5 12.8 L5.1 8.85 L2.3 6.15 L6.24 5.55 Z'/%3E%3C/svg%3E");
|
|
340
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 2 L9.76 5.55 L13.7 6.15 L10.9 8.85 L11.5 12.8 L8 10.9 L4.5 12.8 L5.1 8.85 L2.3 6.15 L6.24 5.55 Z'/%3E%3C/svg%3E");
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
.icon--sort {
|
|
344
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 3 L5.5 6 H10.5 Z'/%3E%3Crect x='4' y='7' width='8' height='1.4' fill='white'/%3E%3Cpath fill='white' d='M8 13 L10.5 10 H5.5 Z'/%3E%3C/svg%3E");
|
|
345
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 3 L5.5 6 H10.5 Z'/%3E%3Crect x='4' y='7' width='8' height='1.4' fill='white'/%3E%3Cpath fill='white' d='M8 13 L10.5 10 H5.5 Z'/%3E%3C/svg%3E");
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
.icon--tag {
|
|
349
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M3 6.5 L8.8 12.3 A1.2 1.2 0 0 0 10.5 12.3 L13 9.8 A1.2 1.2 0 0 0 13 8.1 L7.2 2.3 H3 Z'/%3E%3Ccircle cx='5.2' cy='5.2' r='1.2' fill='black'/%3E%3C/svg%3E");
|
|
350
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M3 6.5 L8.8 12.3 A1.2 1.2 0 0 0 10.5 12.3 L13 9.8 A1.2 1.2 0 0 0 13 8.1 L7.2 2.3 H3 Z'/%3E%3Ccircle cx='5.2' cy='5.2' r='1.2' fill='black'/%3E%3C/svg%3E");
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.icon--play {
|
|
354
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='2' height='10' fill='white'/%3E%3Cpath d='M6 4 L12 8 L6 12 Z' fill='white'/%3E%3C/svg%3E");
|
|
355
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='2' height='10' fill='white'/%3E%3Cpath d='M6 4 L12 8 L6 12 Z' fill='white'/%3E%3C/svg%3E");
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.icon--pause {
|
|
359
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='3' width='2' height='10' fill='white'/%3E%3Crect x='9' y='3' width='2' height='10' fill='white'/%3E%3C/svg%3E");
|
|
360
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='3' width='2' height='10' fill='white'/%3E%3Crect x='9' y='3' width='2' height='10' fill='white'/%3E%3C/svg%3E");
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.icon--stop {
|
|
364
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='10' height='10' fill='white'/%3E%3C/svg%3E");
|
|
365
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='10' height='10' fill='white'/%3E%3C/svg%3E");
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
.icon--more-horizontal {
|
|
369
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='8' r='1'/%3E%3Ccircle cx='8' cy='8' r='1'/%3E%3Ccircle cx='13' cy='8' r='1'/%3E%3C/svg%3E");
|
|
370
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='8' r='1'/%3E%3Ccircle cx='8' cy='8' r='1'/%3E%3Ccircle cx='13' cy='8' r='1'/%3E%3C/svg%3E");
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
.icon--more-vertical {
|
|
374
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='3' r='1'/%3E%3Ccircle cx='8' cy='8' r='1'/%3E%3Ccircle cx='8' cy='13' r='1'/%3E%3C/svg%3E");
|
|
375
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='3' r='1'/%3E%3Ccircle cx='8' cy='8' r='1'/%3E%3Ccircle cx='8' cy='13' r='1'/%3E%3C/svg%3E");
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.icon--hash {
|
|
379
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='3' width='2' height='10' fill='white'/%3E%3Crect x='9' y='3' width='2' height='10' fill='white'/%3E%3Crect x='3' y='5' width='10' height='2' fill='white'/%3E%3Crect x='3' y='9' width='10' height='2' fill='white'/%3E%3C/svg%3E");
|
|
380
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='3' width='2' height='10' fill='white'/%3E%3Crect x='9' y='3' width='2' height='10' fill='white'/%3E%3Crect x='3' y='5' width='10' height='2' fill='white'/%3E%3Crect x='3' y='9' width='10' height='2' fill='white'/%3E%3C/svg%3E");
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.icon--layers {
|
|
384
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='white'%3E%3Cpath d='M8 2L2 5l6 3 6-3-6-3zM2 9l6 3 6-3M2 13l6 3 6-3' stroke='white' stroke-width='1.6' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
|
|
385
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' fill='white'%3E%3Cpath d='M8 2L2 5l6 3 6-3-6-3zM2 9l6 3 6-3M2 13l6 3 6-3' stroke='white' stroke-width='1.6' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.icon--sparkles {
|
|
389
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M8 2l1.2 2.8L12 6l-2.8 1.2L8 10l-1.2-2.8L4 6l2.8-1.2L8 2z'/%3E%3Cpath d='M3 11l.6 1.4L5 13l-1.4.6L3 15l-.6-1.4L1 13l1.4-.6L3 11z'/%3E%3Cpath d='M13 9l.6 1.4L15 11l-1.4.6L13 13l-.6-1.4L11 11l1.4-.6L13 9z'/%3E%3C/svg%3E");
|
|
390
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E%3Cpath d='M8 2l1.2 2.8L12 6l-2.8 1.2L8 10l-1.2-2.8L4 6l2.8-1.2L8 2z'/%3E%3Cpath d='M3 11l.6 1.4L5 13l-1.4.6L3 15l-.6-1.4L1 13l1.4-.6L3 11z'/%3E%3Cpath d='M13 9l.6 1.4L15 11l-1.4.6L13 13l-.6-1.4L11 11l1.4-.6L13 9z'/%3E%3C/svg%3E");
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
/* ---------------------------------------------------------
|
|
394
|
+
5. LOADER ICONS (GLYPHS ONLY)
|
|
395
|
+
--------------------------------------------------------- */
|
|
396
|
+
|
|
397
|
+
.icon--spinner {
|
|
398
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 1.5a6.5 6.5 0 016.5 6.5h-2A4.5 4.5 0 008 3.5v-2z'/%3E%3C/svg%3E");
|
|
399
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 1.5a6.5 6.5 0 016.5 6.5h-2A4.5 4.5 0 008 3.5v-2z'/%3E%3C/svg%3E");
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.icon--spinner-dots {
|
|
403
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='white'%3E%3Ccircle cx='8' cy='1.5' r='1'/%3E%3Ccircle cx='12.1' cy='3' r='1'/%3E%3Ccircle cx='14.5' cy='7' r='1'/%3E%3Ccircle cx='12.9' cy='11' r='1'/%3E%3Ccircle cx='8' cy='14.5' r='1'/%3E%3Ccircle cx='3.1' cy='13' r='1'/%3E%3Ccircle cx='1.5' cy='9' r='1'/%3E%3Ccircle cx='3' cy='3.1' r='1'/%3E%3C/g%3E%3C/svg%3E");
|
|
404
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='white'%3E%3Ccircle cx='8' cy='1.5' r='1'/%3E%3Ccircle cx='12.1' cy='3' r='1'/%3E%3Ccircle cx='14.5' cy='7' r='1'/%3E%3Ccircle cx='12.9' cy='11' r='1'/%3E%3Ccircle cx='8' cy='14.5' r='1'/%3E%3Ccircle cx='3.1' cy='13' r='1'/%3E%3Ccircle cx='1.5' cy='9' r='1'/%3E%3Ccircle cx='3' cy='3.1' r='1'/%3E%3C/g%3E%3C/svg%3E");
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.icon--pulse {
|
|
408
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3' fill='white'/%3E%3C/svg%3E");
|
|
409
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3' fill='white'/%3E%3C/svg%3E");
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
/* ---------------------------------------------------------
|
|
413
|
+
5.1 MONEY
|
|
414
|
+
--------------------------------------------------------- */
|
|
415
|
+
|
|
416
|
+
.icon--money {
|
|
417
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='8' rx='1.5' fill='white'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='white'/%3E%3C/svg%3E");
|
|
418
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='4' width='12' height='8' rx='1.5' fill='white'/%3E%3Ccircle cx='8' cy='8' r='2.2' fill='white'/%3E%3C/svg%3E");
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.icon--coins {
|
|
422
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='7' r='3.5' fill='white'/%3E%3Ccircle cx='7' cy='9' r='3.5' fill='white'/%3E%3C/svg%3E");
|
|
423
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='7' r='3.5' fill='white'/%3E%3Ccircle cx='7' cy='9' r='3.5' fill='white'/%3E%3C/svg%3E");
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
/* ---------------------------------------------------------
|
|
427
|
+
5.2 STATUS
|
|
428
|
+
--------------------------------------------------------- */
|
|
429
|
+
|
|
430
|
+
.icon--check {
|
|
431
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
432
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 7 12 13 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.icon--alert {
|
|
436
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2 L14 14 H2 Z' fill='white'/%3E%3Crect x='7.25' y='6' width='1.5' height='5' fill='black'/%3E%3Ccircle cx='8' cy='12' r='1' fill='black'/%3E%3C/svg%3E");
|
|
437
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 2 L14 14 H2 Z' fill='white'/%3E%3Crect x='7.25' y='6' width='1.5' height='5' fill='black'/%3E%3Ccircle cx='8' cy='12' r='1' fill='black'/%3E%3C/svg%3E");
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
.icon--question {
|
|
441
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Cpath fill='white' d='M8 4.2 C6.9 4.2 6.1 4.9 5.8 5.8 L6.8 6.2 C7.0 5.6 7.4 5.2 8.0 5.2 C8.7 5.2 9.2 5.7 9.2 6.3 C9.2 6.9 8.8 7.2 8.3 7.5 C7.7 7.8 7.1 8.2 7.1 9.1 V9.6 H8.1 V9.2 C8.1 8.7 8.5 8.4 9.0 8.1 C9.7 7.7 10.2 7.1 10.2 6.3 C10.2 5.1 9.2 4.2 8 4.2 Z'/%3E%3Ccircle cx='8' cy='11.5' r='0.7' fill='white'/%3E%3C/svg%3E");
|
|
442
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.8' fill='black'/%3E%3Cpath fill='white' d='M8 4.2 C6.9 4.2 6.1 4.9 5.8 5.8 L6.8 6.2 C7.0 5.6 7.4 5.2 8.0 5.2 C8.7 5.2 9.2 5.7 9.2 6.3 C9.2 6.9 8.8 7.2 8.3 7.5 C7.7 7.8 7.1 8.2 7.1 9.1 V9.6 H8.1 V9.2 C8.1 8.7 8.5 8.4 9.0 8.1 C9.7 7.7 10.2 7.1 10.2 6.3 C10.2 5.1 9.2 4.2 8 4.2 Z'/%3E%3Ccircle cx='8' cy='11.5' r='0.7' fill='white'/%3E%3C/svg%3E");
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.icon--flag {
|
|
446
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M3 2.5 V13 H4.4 V9.9 L9 8.6 L12.5 9.9 V3.6 L9 2.3 L4.4 3.6 V2.5 Z'/%3E%3C/svg%3E");
|
|
447
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M3 2.5 V13 H4.4 V9.9 L9 8.6 L12.5 9.9 V3.6 L9 2.3 L4.4 3.6 V2.5 Z'/%3E%3C/svg%3E");
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.icon--shield {
|
|
451
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 2 L4 4.5 V8.2 C4 10.3 5.3 12.1 8 13.2 C10.7 12.1 12 10.3 12 8.2 V4.5 Z'/%3E%3C/svg%3E");
|
|
452
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 2 L4 4.5 V8.2 C4 10.3 5.3 12.1 8 13.2 C10.7 12.1 12 10.3 12 8.2 V4.5 Z'/%3E%3C/svg%3E");
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
.icon--shield-alert {
|
|
456
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 2 L4 4.5 V8.2 C4 10.3 5.3 12.1 8 13.2 C10.7 12.1 12 10.3 12 8.2 V4.5 Z'/%3E%3Ccircle cx='11.3' cy='4.0' r='1.3' fill='white'/%3E%3C/svg%3E");
|
|
457
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 2 L4 4.5 V8.2 C4 10.3 5.3 12.1 8 13.2 C10.7 12.1 12 10.3 12 8.2 V4.5 Z'/%3E%3Ccircle cx='11.3' cy='4.0' r='1.3' fill='white'/%3E%3C/svg%3E");
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.icon--ban {
|
|
461
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.2' fill='black'/%3E%3Crect x='7' y='2.2' width='2' height='11.6' fill='white' transform='rotate(45 8 8)'/%3E%3C/svg%3E");
|
|
462
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' fill='white'/%3E%3Ccircle cx='8' cy='8' r='5.2' fill='black'/%3E%3Crect x='7' y='2.2' width='2' height='11.6' fill='white' transform='rotate(45 8 8)'/%3E%3C/svg%3E");
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.icon--tip {
|
|
466
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 1.5a4.5 4.5 0 0 0-2.84 7.98c.38.3.84.92.97 1.45l.1.42h3.54l.1-.42c.13-.53.6-1.15.97-1.45A4.5 4.5 0 0 0 8 1.5zM6.75 13a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5z'/%3E%3C/svg%3E");
|
|
467
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M8 1.5a4.5 4.5 0 0 0-2.84 7.98c.38.3.84.92.97 1.45l.1.42h3.54l.1-.42c.13-.53.6-1.15.97-1.45A4.5 4.5 0 0 0 8 1.5zM6.75 13a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5z'/%3E%3C/svg%3E");
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
/* ---------------------------------------------------------
|
|
471
|
+
5.3 EMAIL
|
|
472
|
+
--------------------------------------------------------- */
|
|
473
|
+
|
|
474
|
+
.icon--email {
|
|
475
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M4 4 H20 A2 2 0 0 1 22 6 V18 A2 2 0 0 1 20 20 H4 A2 2 0 0 1 2 18 V6 A2 2 0 0 1 4 4 Z M4.7 6 L12 12 L19.3 6 H4.7 Z M12 14 L4 7.5 V17.3 C4 17.7 4.3 18 4.7 18 H19.3 C19.7 18 20 17.7 20 17.3 V7.5 L12 14 Z'/%3E%3C/svg%3E");
|
|
476
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M4 4 H20 A2 2 0 0 1 22 6 V18 A2 2 0 0 1 20 20 H4 A2 2 0 0 1 2 18 V6 A2 2 0 0 1 4 4 Z M4.7 6 L12 12 L19.3 6 H4.7 Z M12 14 L4 7.5 V17.3 C4 17.7 4.3 18 4.7 18 H19.3 C19.7 18 20 17.7 20 17.3 V7.5 L12 14 Z'/%3E%3C/svg%3E");
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
.icon--archive {
|
|
480
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M4 3 H20 C21.1 3 22 3.9 22 5 V15 C22 16.1 21.1 17 20 17 H15.3 C15 17 14.8 17.1 14.6 17.3 L12.7 19.3 C12.3 19.7 11.7 19.7 11.3 19.3 L9.4 17.3 C9.2 17.1 9 17 8.7 17 H4 C2.9 17 2 16.1 2 15 V5 C2 3.9 2.9 3 4 3 Z M11 6 V11 H8 L12 15 L16 11 H13 V6 H11 Z M7 19 H17 V21 H7 V19 Z'/%3E%3C/svg%3E");
|
|
481
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M4 3 H20 C21.1 3 22 3.9 22 5 V15 C22 16.1 21.1 17 20 17 H15.3 C15 17 14.8 17.1 14.6 17.3 L12.7 19.3 C12.3 19.7 11.7 19.7 11.3 19.3 L9.4 17.3 C9.2 17.1 9 17 8.7 17 H4 C2.9 17 2 16.1 2 15 V5 C2 3.9 2.9 3 4 3 Z M11 6 V11 H8 L12 15 L16 11 H13 V6 H11 Z M7 19 H17 V21 H7 V19 Z'/%3E%3C/svg%3E");
|
|
482
|
+
}
|
|
483
|
+
|
|
484
|
+
.icon--email-open {
|
|
485
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M4 10 L16 3 L28 10 V26 H4 Z'/%3E%3Cpath fill='black' d='M6 11 L16 5 L26 11 V24 H6 Z'/%3E%3Cpath fill='white' d='M6 11 L16 18 L26 11'/%3E%3C/svg%3E");
|
|
486
|
+
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M4 10 L16 3 L28 10 V26 H4 Z'/%3E%3Cpath fill='black' d='M6 11 L16 5 L26 11 V24 H6 Z'/%3E%3Cpath fill='white' d='M6 11 L16 18 L26 11'/%3E%3C/svg%3E");
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.icon--send {
|
|
490
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M3 4 L21 12 L3 20 Z'/%3E%3Cpath fill='black' d='M3 8 L15 12 L3 16 Z'/%3E%3C/svg%3E");
|
|
491
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M3 4 L21 12 L3 20 Z'/%3E%3Cpath fill='black' d='M3 8 L15 12 L3 16 Z'/%3E%3C/svg%3E");
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
.icon--inbox {
|
|
495
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M4 4 H20 A2 2 0 0 1 22 6 V18 A2 2 0 0 1 20 20 H4 A2 2 0 0 1 2 18 V6 A2 2 0 0 1 4 4 Z M4.7 6 L12 12 L19.3 6 H4.7 Z M12 14 L4 7.5 V17.3 C4 17.7 4.3 18 4.7 18 H19.3 C19.7 18 20 17.7 20 17.3 V7.5 L12 14 Z'/%3E%3Ccircle fill='white' cx='20' cy='6' r='5'/%3E%3C/svg%3E");
|
|
496
|
+
mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M4 4 H20 A2 2 0 0 1 22 6 V18 A2 2 0 0 1 20 20 H4 A2 2 0 0 1 2 18 V6 A2 2 0 0 1 4 4 Z M4.7 6 L12 12 L19.3 6 H4.7 Z M12 14 L4 7.5 V17.3 C4 17.7 4.3 18 4.7 18 H19.3 C19.7 18 20 17.7 20 17.3 V7.5 L12 14 Z'/%3E%3Ccircle fill='white' cx='20' cy='6' r='5'/%3E%3C/svg%3E");
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
.icon--attachment {
|
|
500
|
+
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M10.5 6 C7 9.5 7 14.5 10.5 18 L18.5 26 C22 29.5 27 29.5 30.5 26 C34 22.5 34 17.5 30.5 14 L17 0.5 C14 -2 9 -2 5.5 1.5 C2 5 2 10 5.5 13.5 L17.5 25.5 C19.5 27.5 22.5 27.5 24.5 25.5 C26.5 23.5 26.5 20.5 24.5 18.5 L13 7 C12 6 11 6 10.5 6 Z'/%3E%3Cpath fill='black' d='M11.5 8 C9 10.5 9 14 11.5 16.5 L19.5 24.5 C22 27 25.5 27 28 24.5 C30.5 22 30.5 18.5 28 16 L14.5 2.5 C12.5 0.5 9.5 0.5 7.5 2.5 C5.5 4.5 5.5 7.5 7.5 9.5 L19.5 21.5 C20.5 22.5 22 22.5 23 21.5 C24 20.5 24 19 23 18 L11.5 6.5 C11 6 11 7.5 11.5 8 Z'/%3E%3C/svg%3E");
|
|
501
|
+
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M10.5 6 C7 9.5 7 14.5 10.5 18 L18.5 26 C22 29.5 27 29.5 30.5 26 C34 22.5 34 17.5 30.5 14 L17 0.5 C14 -2 9 -2 5.5 1.5 C2 5 2 10 5.5 13.5 L17.5 25.5 C19.5 27.5 22.5 27.5 24.5 25.5 C26.5 23.5 26.5 20.5 24.5 18.5 L13 7 C12 6 11 6 10.5 6 Z'/%3E%3Cpath fill='black' d='M11.5 8 C9 10.5 9 14 11.5 16.5 L19.5 24.5 C22 27 25.5 27 28 24.5 C30.5 22 30.5 18.5 28 16 L14.5 2.5 C12.5 0.5 9.5 0.5 7.5 2.5 C5.5 4.5 5.5 7.5 7.5 9.5 L19.5 21.5 C20.5 22.5 22 22.5 23 21.5 C24 20.5 24 19 23 18 L11.5 6.5 C11 6 11 7.5 11.5 8 Z'/%3E%3C/svg%3E");
|
|
502
|
+
}
|
|
503
|
+
|
|
504
|
+
/* ---------------------------------------------------------
|
|
505
|
+
5A. LOADER ANIMATION - ROTATION (SPINNER)
|
|
506
|
+
--------------------------------------------------------- */
|
|
507
|
+
|
|
508
|
+
@keyframes icon-spin {
|
|
509
|
+
from {
|
|
510
|
+
transform: rotate(0deg);
|
|
511
|
+
}
|
|
512
|
+
to {
|
|
513
|
+
transform: rotate(360deg);
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.icon--spinning {
|
|
518
|
+
animation: icon-spin 0.85s linear infinite;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
/* ---------------------------------------------------------
|
|
522
|
+
5B. LOADER ANIMATION - PULSE (DOT / icon--pulse)
|
|
523
|
+
--------------------------------------------------------- */
|
|
524
|
+
|
|
525
|
+
@keyframes icon-pulse {
|
|
526
|
+
0% {
|
|
527
|
+
transform: scale(1);
|
|
528
|
+
opacity: 1;
|
|
529
|
+
}
|
|
530
|
+
50% {
|
|
531
|
+
transform: scale(1.25);
|
|
532
|
+
opacity: 0.55;
|
|
533
|
+
}
|
|
534
|
+
100% {
|
|
535
|
+
transform: scale(1);
|
|
536
|
+
opacity: 1;
|
|
537
|
+
}
|
|
538
|
+
}
|
|
539
|
+
|
|
540
|
+
.icon--pulsing {
|
|
541
|
+
animation: icon-pulse 1.2s ease-in-out infinite;
|
|
542
|
+
}
|
|
543
|
+
|
|
544
|
+
/* ---------------------------------------------------------
|
|
545
|
+
5C. UNIFIED LOADER SYSTEM
|
|
546
|
+
--------------------------------------------------------- */
|
|
547
|
+
|
|
548
|
+
.icon--loader.icon--spinner,
|
|
549
|
+
.icon--loader.icon--spinner-dots {
|
|
550
|
+
animation: icon-spin 0.85s linear infinite;
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
.icon--loader.icon--pulse {
|
|
554
|
+
animation: icon-pulse 1.2s ease-in-out infinite;
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
.icon--loader-fast {
|
|
558
|
+
animation-duration: 0.55s !important;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
.icon--loader-slow {
|
|
562
|
+
animation-duration: 1.8s !important;
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
@media (prefers-reduced-motion: reduce) {
|
|
566
|
+
.icon--spinning,
|
|
567
|
+
.icon--pulsing,
|
|
568
|
+
.icon--loader,
|
|
569
|
+
.icon--loader-fast,
|
|
570
|
+
.icon--loader-slow {
|
|
571
|
+
animation: none !important;
|
|
572
|
+
}
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
/* ---------------------------------------------------------
|
|
576
|
+
6. ICON CONTAINERS
|
|
577
|
+
--------------------------------------------------------- */
|
|
578
|
+
|
|
579
|
+
.icon-container {
|
|
580
|
+
display: inline-flex;
|
|
581
|
+
align-items: center;
|
|
582
|
+
justify-content: center;
|
|
583
|
+
|
|
584
|
+
width: var(--icon-container-md);
|
|
585
|
+
height: var(--icon-container-md);
|
|
586
|
+
|
|
587
|
+
border-radius: var(--radius-md);
|
|
588
|
+
background-color: var(--color-surface-subtle);
|
|
589
|
+
color: var(--color-text);
|
|
590
|
+
|
|
591
|
+
border: 1px solid var(--color-border-subtle);
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
.icon-container--sm {
|
|
595
|
+
width: var(--icon-container-sm);
|
|
596
|
+
height: var(--icon-container-sm);
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
.icon-container--lg {
|
|
600
|
+
width: var(--icon-container-lg);
|
|
601
|
+
height: var(--icon-container-lg);
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
.icon-container--xl {
|
|
605
|
+
width: var(--icon-container-xl);
|
|
606
|
+
height: var(--icon-container-xl);
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
.icon-container--circle {
|
|
610
|
+
border-radius: 999px;
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
.icon-container--circle-sm {
|
|
614
|
+
width: var(--icon-container-sm);
|
|
615
|
+
height: var(--icon-container-sm);
|
|
616
|
+
border-radius: 999px;
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
.icon-container--circle-lg {
|
|
620
|
+
width: var(--icon-container-lg);
|
|
621
|
+
height: var(--icon-container-lg);
|
|
622
|
+
border-radius: 999px;
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.icon-container--accent {
|
|
626
|
+
background-color: var(--accent-soft-surface, var(--color-accent-soft));
|
|
627
|
+
border-color: var(--accent-soft-border, var(--color-accent));
|
|
628
|
+
color: var(--accent-soft-on, var(--color-on-accent));
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
.icon-container--accent-strong {
|
|
632
|
+
background-color: var(--color-accent-strong);
|
|
633
|
+
color: var(--color-on-accent);
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
.icon-container--success {
|
|
637
|
+
background-color: var(--success-soft-surface, var(--color-success-soft));
|
|
638
|
+
border-color: var(--success-soft-border, var(--color-success));
|
|
639
|
+
color: var(--success-soft-on, var(--color-on-success));
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
.icon-container--info {
|
|
643
|
+
background-color: var(--info-soft-surface, var(--color-info-soft));
|
|
644
|
+
border-color: var(--info-soft-border, var(--color-info));
|
|
645
|
+
color: var(--info-soft-on, var(--color-on-info));
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
.icon-container--warning {
|
|
649
|
+
background-color: var(--warning-soft-surface, var(--color-warning-soft));
|
|
650
|
+
border-color: var(--warning-soft-border, var(--color-warning));
|
|
651
|
+
color: var(--warning-soft-on, var(--color-on-warning));
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
.icon-container--danger {
|
|
655
|
+
background-color: var(--danger-soft-surface, var(--color-danger-soft));
|
|
656
|
+
border-color: var(--danger-soft-border, var(--color-danger));
|
|
657
|
+
color: var(--danger-soft-on, var(--color-on-danger));
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
.icon-container--muted {
|
|
661
|
+
background-color: var(--color-muted-bg);
|
|
662
|
+
color: var(--color-text-muted);
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
/* ---------------------------------------------------------
|
|
666
|
+
7. ICON COLOUR UTILITIES
|
|
667
|
+
--------------------------------------------------------- */
|
|
668
|
+
|
|
669
|
+
.icon-color--accent {
|
|
670
|
+
color: var(--color-accent);
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
.icon-color--success {
|
|
674
|
+
color: var(--color-success);
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
.icon-color--info {
|
|
678
|
+
color: var(--color-info);
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
.icon-color--warning {
|
|
682
|
+
color: var(--color-warning);
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
.icon-color--danger {
|
|
686
|
+
color: var(--color-danger);
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
.icon-color--muted {
|
|
690
|
+
color: var(--color-text-muted);
|
|
691
|
+
}
|
|
692
|
+
|
|
693
|
+
.icon-color--soft {
|
|
694
|
+
color: var(--color-text-soft);
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
.icon-color--subtle {
|
|
698
|
+
color: var(--color-border-subtle);
|
|
699
|
+
}
|
|
700
|
+
|
|
701
|
+
.icon-color--on-accent {
|
|
702
|
+
color: var(--color-on-accent);
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
.icon-color--inverse {
|
|
706
|
+
color: var(--color-text-on-strong);
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
/* ---------------------------------------------------------
|
|
710
|
+
8. ICON IN BUTTONS
|
|
711
|
+
--------------------------------------------------------- */
|
|
712
|
+
|
|
713
|
+
.button .icon,
|
|
714
|
+
.button--icon .icon {
|
|
715
|
+
width: var(--icon-sm);
|
|
716
|
+
height: var(--icon-sm);
|
|
717
|
+
}
|
|
718
|
+
|
|
719
|
+
.button--lg .icon {
|
|
720
|
+
width: var(--icon-md);
|
|
721
|
+
height: var(--icon-md);
|
|
722
|
+
}
|
|
723
|
+
|
|
724
|
+
.button--xl .icon {
|
|
725
|
+
width: var(--icon-lg);
|
|
726
|
+
height: var(--icon-lg);
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
.button--icon {
|
|
730
|
+
display: inline-flex;
|
|
731
|
+
align-items: center;
|
|
732
|
+
justify-content: center;
|
|
733
|
+
|
|
734
|
+
padding: var(--space-2);
|
|
735
|
+
width: auto;
|
|
736
|
+
height: auto;
|
|
737
|
+
|
|
738
|
+
gap: 0;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
.button--icon-only {
|
|
742
|
+
width: var(--icon-container-md);
|
|
743
|
+
height: var(--icon-container-md);
|
|
744
|
+
padding: 0;
|
|
745
|
+
}
|
|
746
|
+
|
|
747
|
+
/* ---------------------------------------------------------
|
|
748
|
+
9. ICON BADGES (NOTIFICATION DOTS)
|
|
749
|
+
--------------------------------------------------------- */
|
|
750
|
+
|
|
751
|
+
.icon-badge {
|
|
752
|
+
position: relative;
|
|
753
|
+
display: inline-flex;
|
|
754
|
+
}
|
|
755
|
+
|
|
756
|
+
.icon-badge__dot {
|
|
757
|
+
position: absolute;
|
|
758
|
+
top: -2px;
|
|
759
|
+
right: -2px;
|
|
760
|
+
|
|
761
|
+
width: 8px;
|
|
762
|
+
height: 8px;
|
|
763
|
+
border-radius: 999px;
|
|
764
|
+
|
|
765
|
+
background-color: var(--color-accent);
|
|
766
|
+
border: 1px solid var(--color-surface);
|
|
767
|
+
}
|
|
768
|
+
|
|
769
|
+
.icon-badge__dot--success {
|
|
770
|
+
background-color: var(--color-success);
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
.icon-badge__dot--danger {
|
|
774
|
+
background-color: var(--color-danger);
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
.icon-badge__dot--warning {
|
|
778
|
+
background-color: var(--color-warning);
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
.icon-badge__dot--info {
|
|
782
|
+
background-color: var(--color-info);
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
.icon-badge__dot--neutral {
|
|
786
|
+
background-color: var(--color-muted-bg);
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
.icon-badge__dot--disabled {
|
|
790
|
+
background-color: var(--color-border-subtle);
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
/* ---------------------------------------------------------
|
|
794
|
+
10. ICON DENSITY LAYERS (A/B/C)
|
|
795
|
+
--------------------------------------------------------- */
|
|
796
|
+
|
|
797
|
+
.icon--a {
|
|
798
|
+
width: var(--icon-lg);
|
|
799
|
+
height: var(--icon-lg);
|
|
800
|
+
}
|
|
801
|
+
|
|
802
|
+
.icon-container--a {
|
|
803
|
+
padding: var(--space-3);
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
.icon--b {
|
|
807
|
+
width: var(--icon-md);
|
|
808
|
+
height: var(--icon-md);
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
.icon-container--b {
|
|
812
|
+
padding: var(--space-2);
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
.icon--c {
|
|
816
|
+
width: var(--icon-sm);
|
|
817
|
+
height: var(--icon-sm);
|
|
818
|
+
}
|
|
819
|
+
|
|
820
|
+
.icon-container--c {
|
|
821
|
+
padding: var(--space-1);
|
|
822
|
+
}
|
|
823
|
+
|
|
824
|
+
.icon--d {
|
|
825
|
+
width: var(--icon-xxs);
|
|
826
|
+
height: var(--icon-xxs);
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
/* ---------------------------------------------------------
|
|
830
|
+
11. AUTO-CONTRAST ON DARK/LIGHT SURFACES
|
|
831
|
+
--------------------------------------------------------- */
|
|
832
|
+
|
|
833
|
+
.surface-on-dark .icon,
|
|
834
|
+
.bg-dark .icon {
|
|
835
|
+
color: var(--color-text-on-strong);
|
|
836
|
+
}
|
|
837
|
+
|
|
838
|
+
.surface-on-dark .icon-container,
|
|
839
|
+
.bg-dark .icon-container {
|
|
840
|
+
background-color: var(--color-bg-soft);
|
|
841
|
+
border-color: var(--color-border-strong);
|
|
842
|
+
}
|
|
843
|
+
|
|
844
|
+
.surface-on-light .icon,
|
|
845
|
+
.bg-light .icon {
|
|
846
|
+
color: var(--color-text);
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
.surface-on-light .icon-container,
|
|
850
|
+
.bg-light .icon-container {
|
|
851
|
+
background-color: var(--color-surface-subtle);
|
|
852
|
+
border-color: var(--color-border-subtle);
|
|
853
|
+
}
|
|
854
|
+
|
|
855
|
+
/* ---------------------------------------------------------
|
|
856
|
+
12. INTEGRATION WITH OTHER COMPONENTS
|
|
857
|
+
--------------------------------------------------------- */
|
|
858
|
+
|
|
859
|
+
.list-group__icon,
|
|
860
|
+
.media__icon svg,
|
|
861
|
+
.steps__bullet svg,
|
|
862
|
+
.timeline--rich .icon,
|
|
863
|
+
.nav__item svg {
|
|
864
|
+
width: var(--icon-sm);
|
|
865
|
+
height: var(--icon-sm);
|
|
866
|
+
stroke: currentColor;
|
|
867
|
+
fill: none;
|
|
868
|
+
}
|
|
869
|
+
|
|
870
|
+
.alert__icon .icon,
|
|
871
|
+
.chip__icon .icon,
|
|
872
|
+
.tab__icon .icon,
|
|
873
|
+
.breadcrumb__icon .icon,
|
|
874
|
+
.accordion__icon .icon,
|
|
875
|
+
.tree__icon .icon,
|
|
876
|
+
.table__icon .icon {
|
|
877
|
+
width: var(--icon-sm);
|
|
878
|
+
height: var(--icon-sm);
|
|
879
|
+
}
|
|
880
|
+
|
|
881
|
+
/* ---------------------------------------------------------
|
|
882
|
+
13. ICON UTILITIES
|
|
883
|
+
--------------------------------------------------------- */
|
|
884
|
+
|
|
885
|
+
.icon--rotate-90 {
|
|
886
|
+
transform: rotate(90deg);
|
|
887
|
+
}
|
|
888
|
+
|
|
889
|
+
.icon--rotate-180 {
|
|
890
|
+
transform: rotate(180deg);
|
|
891
|
+
}
|
|
892
|
+
|
|
893
|
+
.icon--rotate-270 {
|
|
894
|
+
transform: rotate(270deg);
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
.icon--flip-h {
|
|
898
|
+
transform: scaleX(-1);
|
|
899
|
+
}
|
|
900
|
+
|
|
901
|
+
.icon--flip-v {
|
|
902
|
+
transform: scaleY(-1);
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
.icon--thin {
|
|
906
|
+
stroke-width: var(--icon-stroke-thin);
|
|
907
|
+
}
|
|
908
|
+
|
|
909
|
+
.icon--regular {
|
|
910
|
+
stroke-width: var(--icon-stroke-regular);
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
.icon--bold {
|
|
914
|
+
stroke-width: var(--icon-stroke-bold);
|
|
915
|
+
}
|
|
916
|
+
|
|
917
|
+
.icon--outline {
|
|
918
|
+
fill: none;
|
|
919
|
+
stroke: currentColor;
|
|
920
|
+
}
|
|
921
|
+
|
|
922
|
+
.icon--opacity-25 {
|
|
923
|
+
opacity: 0.25;
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
.icon--opacity-50 {
|
|
927
|
+
opacity: 0.5;
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
.icon--opacity-75 {
|
|
931
|
+
opacity: 0.75;
|
|
932
|
+
}
|
|
933
|
+
|
|
934
|
+
.icon--disabled {
|
|
935
|
+
opacity: 0.4;
|
|
936
|
+
pointer-events: none;
|
|
937
|
+
}
|