├── .gitignore
├── LICENSE
├── README.md
├── images
    ├── hero.jpg
    └── usage.gif
├── manifest.json
├── package.json
├── src
    ├── code.ts
    └── ui
    │   ├── App.svelte
    │   ├── assets
    │       ├── figma.css
    │       └── tailwind.css
    │   ├── index.html
    │   └── index.js
├── tsconfig.json
├── webpack.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 | 
3 | Copyright (c) 2019 Kazushi Kawamura
4 | 
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6 | 
7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8 | 
9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Figma Format
 2 | 
 3 | Figma Format let's you format your canvas by grouping them by the names.
 4 | 
 5 | [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](LICENSE)
 6 | 
 7 | ![hero](images/hero.jpg)
 8 | 
 9 | ## Usage
10 | 
11 | It will check the names of each layer and group them by the text before the separator (/) and layout nicely by their groups.
12 | 
13 | ![usage](images/usage.gif)
14 | 
15 | ## Installation
16 | 
17 | https://www.figma.com/c/plugin/732774680197470712/Figma-Format
18 | 
19 | ## Contributing
20 | 
21 | Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
22 | 
23 | #### Development
24 | 
25 | ```bash
26 | yarn watch
27 | ```
28 | 
29 | ## Licence
30 | MIT


--------------------------------------------------------------------------------
/images/hero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kawamurakazushi/figma-format/4d6fde38774eea15cd4559a01ac9dcb223831338/images/hero.jpg


--------------------------------------------------------------------------------
/images/usage.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kawamurakazushi/figma-format/4d6fde38774eea15cd4559a01ac9dcb223831338/images/usage.gif


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Figma Format",
 3 |   "id": "732774680197470712",
 4 |   "api": "1.0.0",
 5 |   "main": "dist/code.js",
 6 |   "ui": "dist/ui.html",
 7 |   "menu": [
 8 |     {
 9 |       "name": "Format",
10 |       "command": "format"
11 |     },
12 |     {
13 |       "separator": true
14 |     },
15 |     {
16 |       "name": "Configure Settings",
17 |       "command": "configure"
18 |     }
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "figma-format",
 3 |   "version": "1.0.0",
 4 |   "main": "index.js",
 5 |   "license": "MIT",
 6 |   "devDependencies": {
 7 |     "css-loader": "^3.2.0",
 8 |     "figma-plugin-types": "^0.1.3",
 9 |     "html-webpack-inline-source-plugin": "^0.0.10",
10 |     "html-webpack-plugin": "^3.2.0",
11 |     "style-loader": "^1.0.0",
12 |     "svelte": "^3.9.1",
13 |     "svelte-loader": "^2.13.6",
14 |     "ts-loader": "^6.0.4",
15 |     "typescript": "^3.5.3",
16 |     "webpack": "^4.39.3",
17 |     "webpack-cli": "^3.3.7"
18 |   },
19 |   "scripts": {
20 |     "build": "webpack --production",
21 |     "watch": "webpack -w"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/code.ts:
--------------------------------------------------------------------------------
  1 | import "figma-plugin-types";
  2 | 
  3 | const key = "settings";
  4 | 
  5 | interface Group {
  6 |   category: string;
  7 |   items: BaseNode[];
  8 | }
  9 | 
 10 | interface Settings {
 11 |   separator?: string;
 12 |   xSpacing?: number;
 13 |   ySpacing?: number;
 14 |   wrapCount?: number;
 15 |   layoutDirection?: "vertical" | "horizontal";
 16 | }
 17 | 
 18 | interface DefaultSettings {
 19 |   separator: string;
 20 |   xSpacing: number;
 21 |   ySpacing: number;
 22 |   wrapCount: number;
 23 |   layoutDirection: "vertical" | "horizontal";
 24 | }
 25 | 
 26 | const defaultSettings: DefaultSettings = {
 27 |   separator: "/",
 28 |   xSpacing: 32,
 29 |   ySpacing: 32,
 30 |   wrapCount: 10,
 31 |   layoutDirection: "horizontal"
 32 | };
 33 | 
 34 | const format = (settings: Settings | undefined) => {
 35 |   const d = settings ? settings : defaultSettings;
 36 |   const xSpacing = d.xSpacing ? d.xSpacing : defaultSettings.xSpacing;
 37 |   const ySpacing = d.ySpacing ? d.ySpacing : defaultSettings.ySpacing;
 38 |   const separator = d.separator ? d.separator : defaultSettings.separator;
 39 |   const wrapCount = d.wrapCount ? d.wrapCount : defaultSettings.wrapCount;
 40 |   const layoutDirection = d.layoutDirection
 41 |     ? d.layoutDirection
 42 |     : defaultSettings.layoutDirection;
 43 | 
 44 |   figma.currentPage.children
 45 |     .map(node => {
 46 |       return node;
 47 |     })
 48 |     // Group each node
 49 |     .reduce<Group[]>((groups, node) => {
 50 |       const [category, _] = node.name.split(separator);
 51 | 
 52 |       if (
 53 |         groups.filter(g => {
 54 |           return g.category === category;
 55 |         }).length === 0
 56 |       ) {
 57 |         groups.push({ category, items: [node] });
 58 |       } else {
 59 |         groups = groups.map(g => {
 60 |           return g.category === category
 61 |             ? { ...g, items: [...g.items, node] }
 62 |             : g;
 63 |         });
 64 |       }
 65 | 
 66 |       return groups;
 67 |     }, [])
 68 |     // Reorder groups
 69 |     .sort((a, b) => {
 70 |       return a.category.toLocaleLowerCase().localeCompare(b.category.toLocaleLowerCase(), undefined, { numeric: true });
 71 |     })
 72 |     // Reorder items inside group
 73 |     .map(group => {
 74 |       const items = group.items.reverse().sort((a, b) => {
 75 |         return a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase(), undefined, { numeric: true });
 76 |       });
 77 |       return { ...group, items };
 78 |     })
 79 |     // Move the nodes, depending on the layout direction
 80 |     .reduce<{ crossAxis: number; groups: Group[] }>(
 81 |       ({ crossAxis, groups }, group) => {
 82 |         let mainAxis = 0;
 83 |         let maxHeight = 0;
 84 |         let maxWidth = 0;
 85 | 
 86 |         const items = group.items.map((item, j) => {
 87 |           if (item.type !== "PAGE" && item.type !== "DOCUMENT") {
 88 |             const newItem = item;
 89 | 
 90 |             if (layoutDirection === "horizontal") {
 91 |               newItem.x = mainAxis;
 92 |               newItem.y = crossAxis;
 93 | 
 94 |               maxHeight = Math.max(maxHeight, item.height);
 95 |               mainAxis += item.width + xSpacing;
 96 | 
 97 |               if (j !== 0 && (j + 1) % wrapCount === 0) {
 98 |                 mainAxis = 0;
 99 |                 crossAxis += maxHeight + ySpacing;
100 |                 maxHeight = 0;
101 |               }
102 | 
103 |               return newItem;
104 |             }
105 | 
106 |             if (layoutDirection === "vertical") {
107 |               newItem.x = crossAxis;
108 |               newItem.y = mainAxis;
109 | 
110 |               maxWidth = Math.max(maxWidth, item.width);
111 |               mainAxis += item.height + ySpacing;
112 | 
113 |               if (j !== 0 && (j + 1) % wrapCount === 0) {
114 |                 mainAxis = 0;
115 |                 crossAxis += maxWidth + xSpacing;
116 |                 maxWidth = 0;
117 |               }
118 | 
119 |               return newItem;
120 |             }
121 |           }
122 | 
123 |           return item;
124 |         });
125 | 
126 |         if (layoutDirection === "horizontal") {
127 |           crossAxis += maxHeight + ySpacing;
128 |         } else if (layoutDirection === "vertical") {
129 |           crossAxis += maxWidth + xSpacing;
130 |         }
131 | 
132 |         const newGroup: Group = { items, ...group };
133 | 
134 |         return { crossAxis, groups: [newGroup, ...groups] };
135 |       },
136 |       { groups: [], crossAxis: 0 }
137 |     )
138 |     .groups.forEach(group => {
139 |       // Append every items
140 |       group.items.reverse().forEach(item => {
141 |         if (item.type !== "DOCUMENT" && item.type !== "PAGE") {
142 |           figma.currentPage.appendChild(item);
143 |         }
144 |       });
145 |     });
146 | };
147 | 
148 | if (figma.command === "configure") {
149 |   figma.showUI(__html__, { width: 400, height: 250 });
150 |   figma.clientStorage.getAsync(key).then(settings => {
151 |     figma.ui.postMessage({ settings });
152 |   });
153 | }
154 | 
155 | if (figma.command === "format") {
156 |   figma.clientStorage.getAsync(key).then(settings => {
157 |     format(settings);
158 |     figma.closePlugin("Successfully Formatted!");
159 |   });
160 | }
161 | 
162 | figma.ui.onmessage = msg => {
163 |   if (msg.type === "format") {
164 |     figma.clientStorage.setAsync(key, msg.settings).then(() => {
165 |       format(msg.settings);
166 |       figma.closePlugin("Successfully Formatted!");
167 |     });
168 |   }
169 | };
170 | 


--------------------------------------------------------------------------------
/src/ui/App.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import "./assets/figma.css";
  3 | 
  4 |   let separator = "/";
  5 |   let xSpacing = 32;
  6 |   let ySpacing = 32;
  7 |   let wrapCount = 10;
  8 |   let layoutDirection = "horizontal";
  9 | 
 10 |   // Initialize Input
 11 |   onmessage = e => {
 12 |     const settings = e.data.pluginMessage.settings;
 13 |     if (settings) {
 14 |       if (settings.separator) {
 15 |         separator = settings.separator;
 16 |       }
 17 | 
 18 |       if (settings.xSpacing) {
 19 |         xSpacing = settings.xSpacing;
 20 |       }
 21 | 
 22 |       if (settings.ySpacing) {
 23 |         ySpacing = settings.ySpacing;
 24 |       }
 25 | 
 26 |       if (settings.wrapCount) {
 27 |         wrapCount = settings.wrapCount;
 28 |       }
 29 | 
 30 |       if (settings.layoutDirection) {
 31 |         layoutDirection = settings.layoutDirection;
 32 |       }
 33 |     }
 34 |   };
 35 | 
 36 |   const handleClick = () => {
 37 |     parent.postMessage(
 38 |       {
 39 |         pluginMessage: {
 40 |           type: "format",
 41 |           settings: {
 42 |             separator,
 43 |             xSpacing,
 44 |             ySpacing,
 45 |             wrapCount,
 46 |             layoutDirection
 47 |           }
 48 |         }
 49 |       },
 50 |       "*"
 51 |     );
 52 |   };
 53 | </script>
 54 | 
 55 | <style>
 56 |   .app {
 57 |     display: flex;
 58 |     flex-direction: column;
 59 |     height: 100%;
 60 |   }
 61 | 
 62 |   .description {
 63 |     margin: 16px;
 64 |   }
 65 | 
 66 |   .form {
 67 |     flex: 1;
 68 |   }
 69 | 
 70 |   .label {
 71 |     width: 120px;
 72 |   }
 73 | 
 74 |   .block {
 75 |     display: flex;
 76 |     align-items: center;
 77 |     margin: 0 8px;
 78 |   }
 79 | 
 80 |   .spacing {
 81 |     display: flex;
 82 |     align-items: center;
 83 |   }
 84 | 
 85 |   .spacingInput {
 86 |     width: 70px;
 87 |   }
 88 | 
 89 |   .spacingLabel {
 90 |     margin: 0 4px;
 91 |   }
 92 | 
 93 |   .footer {
 94 |     display: flex;
 95 |     padding: 16px;
 96 |     border-top: 1px solid rgba(0, 0, 0, 0.1);
 97 |     flex-direction: row-reverse;
 98 |   }
 99 | 
100 |   .mr {
101 |     margin-right: 8px;
102 |   }
103 | </style>
104 | 
105 | <div class="app">
106 |   <div class="form">
107 |     <div class="description type--11-pos-bold">Configure your Settings</div>
108 |     <div class="block">
109 |       <div class="label">Group separator</div>
110 |       <div class="spacing">
111 |         <input class="input" bind:value={separator} placeholder="/" />
112 |       </div>
113 |     </div>
114 |     <div class="block">
115 |       <div class="label">Spacing</div>
116 |       <div class="spacing">
117 |         <input
118 |           class="input spacingInput"
119 |           type="number"
120 |           bind:value={xSpacing}
121 |           placeholder="X" />
122 |         <div class="type type--11-pos spacingLabel">X</div>
123 |         <input
124 |           class="input spacingInput"
125 |           type="number"
126 |           bind:value={ySpacing}
127 |           placeholder="Y" />
128 |         <div class="type type--11-pos spacingLabel">Y</div>
129 |       </div>
130 |     </div>
131 |     <div class="block">
132 |       <div class="label">Wrap count</div>
133 |       <div class="spacing">
134 |         <input
135 |           class="input"
136 |           type="number"
137 |           bind:value={wrapCount}
138 |           placeholder="Wrap Count" />
139 |       </div>
140 |     </div>
141 |     <div class="block">
142 |       <div class="label">Layout Direction</div>
143 |       <div class="spacing">
144 |         <label class="type type--11-pos mr">
145 |           <input type="radio" bind:group={layoutDirection} value="horizontal" />
146 |           Horizontal
147 |         </label>
148 |         <label class="type type--11-pos">
149 |           <input type="radio" bind:group={layoutDirection} value="vertical" />
150 |           Vertical
151 |         </label>
152 |       </div>
153 |     </div>
154 |   </div>
155 |   <div class="footer">
156 |     <button class="button button--primary" on:click|once={handleClick}>
157 |       Save Settings & Format
158 |     </button>
159 |   </div>
160 | </div>
161 | 


--------------------------------------------------------------------------------
/src/ui/assets/figma.css:
--------------------------------------------------------------------------------
   1 | * {
   2 |   -webkit-box-sizing: border-box;
   3 |   box-sizing: border-box;
   4 | }
   5 | 
   6 | /*  Typography */
   7 | @font-face {
   8 |   font-family: "Inter";
   9 |   font-style: normal;
  10 |   font-weight: 400;
  11 |   src: url("https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.7")
  12 |       format("woff2"),
  13 |     url("https://rsms.me/inter/font-files/Inter-Regular.woff?v=3.7")
  14 |       format("woff");
  15 | }
  16 | 
  17 | @font-face {
  18 |   font-family: "Inter";
  19 |   font-style: normal;
  20 |   font-weight: 500;
  21 |   src: url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.7")
  22 |       format("woff2"),
  23 |     url("https://rsms.me/inter/font-files/Inter-Medium.woff2?v=3.7")
  24 |       format("woff");
  25 | }
  26 | 
  27 | @font-face {
  28 |   font-family: "Inter";
  29 |   font-style: normal;
  30 |   font-weight: 600;
  31 |   src: url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.7")
  32 |       format("woff2"),
  33 |     url("https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.7")
  34 |       format("woff");
  35 | }
  36 | 
  37 | .icon {
  38 |   width: 32px;
  39 |   height: 32px;
  40 |   cursor: default;
  41 |   color: #000000;
  42 |   background-repeat: no-repeat;
  43 |   background-position: 0 0;
  44 | }
  45 | 
  46 | .icon--blue {
  47 |   color: #18a0fb;
  48 |   background-position: 0 -64px;
  49 | }
  50 | 
  51 | .icon--black-3 {
  52 |   color: rgba(0, 0, 0, 0.3);
  53 |   background-position: 0 -32px;
  54 | }
  55 | 
  56 | .icon--button {
  57 |   border: 2px solid transparent;
  58 |   border-radius: 2px;
  59 |   outline: none;
  60 |   background-position: -2px -2px;
  61 | }
  62 | 
  63 | .icon--button:hover {
  64 |   background-color: rgba(0, 0, 0, 0.06);
  65 | }
  66 | 
  67 | .icon--button:active {
  68 |   border: 2px solid #18a0fb;
  69 |   background-color: rgba(0, 0, 0, 0.06);
  70 | }
  71 | 
  72 | .icon--button:disabled {
  73 |   opacity: 0.37;
  74 | }
  75 | 
  76 | .icon--text {
  77 |   display: -webkit-box;
  78 |   display: -ms-flexbox;
  79 |   display: flex;
  80 |   -webkit-box-align: center;
  81 |   -ms-flex-align: center;
  82 |   align-items: center;
  83 |   -webkit-box-pack: center;
  84 |   -ms-flex-pack: center;
  85 |   justify-content: center;
  86 |   font-family: "Inter", sans-serif;
  87 |   font-size: 11px;
  88 | }
  89 | 
  90 | .icon--adjust {
  91 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m12%2016.05v-7.05h1v7.05c1.1411.2316%202%201.2405%202%202.45s-.8589%202.2184-2%202.45v2.05h-1v-2.05c-1.1411-.2316-2-1.2405-2-2.45s.8589-2.2184%202-2.45zm2%202.45c0%20.8284-.6716%201.5-1.5%201.5s-1.5-.6716-1.5-1.5.6716-1.5%201.5-1.5%201.5.6716%201.5%201.5zm5%204.5h1v-7.05c1.1411-.2316%202-1.2405%202-2.45s-.8589-2.2184-2-2.45v-2.05h-1v2.05c-1.1411.2316-2%201.2405-2%202.45s.8589%202.2184%202%202.45zm2-9.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5%201.5.6716%201.5%201.5%201.5%201.5-.6716%201.5-1.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m12%2048.05v-7.05h1v7.05c1.1411.2316%202%201.2405%202%202.45s-.8589%202.2184-2%202.45v2.05h-1v-2.05c-1.1411-.2316-2-1.2405-2-2.45s.8589-2.2184%202-2.45zm2%202.45c0%20.8284-.6716%201.5-1.5%201.5s-1.5-.6716-1.5-1.5.6716-1.5%201.5-1.5%201.5.6716%201.5%201.5zm5%204.5h1v-7.05c1.1411-.2316%202-1.2405%202-2.45s-.8589-2.2184-2-2.45v-2.05h-1v2.05c-1.1411.2316-2%201.2405-2%202.45s.8589%202.2184%202%202.45zm2-9.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5%201.5.6716%201.5%201.5%201.5%201.5-.6716%201.5-1.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m12%2080.05v-7.05h1v7.05c1.1411.2316%202%201.2405%202%202.45s-.8589%202.2184-2%202.45v2.05h-1v-2.05c-1.1411-.2316-2-1.2405-2-2.45s.8589-2.2184%202-2.45zm2%202.45c0%20.8284-.6716%201.5-1.5%201.5s-1.5-.6716-1.5-1.5.6716-1.5%201.5-1.5%201.5.6716%201.5%201.5zm5%204.5h1v-7.05c1.1411-.2316%202-1.2405%202-2.45s-.8589-2.2184-2-2.45v-2.05h-1v2.05c-1.1411.2316-2%201.2405-2%202.45s.8589%202.2184%202%202.45zm2-9.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5%201.5.6716%201.5%201.5%201.5%201.5-.6716%201.5-1.5z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  92 | }
  93 | 
  94 | .icon--angle {
  95 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m12%2012v7.5.5h.5%207.5v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1%204v3h3c0-1.6569-1.3431-3-3-3z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m12%2044v7.5.5h.5%207.5v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1%204v3h3c0-1.6569-1.3431-3-3-3z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m12%2076v7.5.5h.5%207.5v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1%204v3h3c0-1.6569-1.3431-3-3-3z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  96 | }
  97 | 
  98 | .icon--break {
  99 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m13.0002%209v3h1v-3zm9.1031.89644c-1.1617-1.16176-3.0453-1.16176-4.2071.00002l-2.7499%202.74994.7071.7071%202.7499-2.7499c.7712-.77128%202.0217-.77129%202.7929%200%20.7712.7712.7713%202.0216%200%202.7928l-2.7499%202.75.7071.7071%202.7499-2.75c1.1618-1.1617%201.1618-3.0453%200-4.20706zm-12.20691%2012.20706c-1.16176-1.1617-1.16177-3.0453-.00001-4.2071l2.75002-2.75.7071.7071-2.75%202.75c-.77124.7713-.77124%202.0217%200%202.7929.7712.7713%202.0216.7713%202.7929%200l2.75-2.75.7071.7071-2.75%202.75c-1.1618%201.1618-3.0454%201.1618-4.20711%200zm13.10341-3.1035h-3v-1h3zm-3.9994%201v3h-1v-3zm-7.0006-7h-3.00004v1h3.00004z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%20opacity%3D%22.9%22%2F%3E%3Cpath%20d%3D%22m13.0002%2041v3h1v-3zm9.1031.8964c-1.1617-1.1617-3.0453-1.1617-4.2071.0001l-2.7499%202.7499.7071.7071%202.7499-2.7499c.7712-.7713%202.0217-.7713%202.7929%200%20.7712.7712.7713%202.0216%200%202.7928l-2.7499%202.75.7071.7071%202.7499-2.75c1.1618-1.1617%201.1618-3.0453%200-4.2071zm-12.20691%2012.2071c-1.16176-1.1617-1.16177-3.0453-.00001-4.2071l2.75002-2.75.7071.7071-2.75%202.75c-.77124.7713-.77124%202.0217%200%202.7929.7712.7713%202.0216.7713%202.7929%200l2.75-2.75.7071.7071-2.75%202.75c-1.1618%201.1618-3.0454%201.1618-4.20711%200zm13.10341-3.1035h-3v-1h3zm-3.9994%201v3h-1v-3zm-7.0006-7h-3.00004v1h3.00004z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%20opacity%3D%22.9%22%2F%3E%3Cpath%20d%3D%22m13.0002%2073v3h1v-3zm9.1031.8965c-1.1617-1.1618-3.0453-1.1618-4.2071%200l-2.7499%202.7499.7071.7071%202.7499-2.7499c.7712-.7713%202.0217-.7713%202.7929%200%20.7712.7712.7713%202.0216%200%202.7928l-2.7499%202.75.7071.7071%202.7499-2.7499c1.1618-1.1618%201.1618-3.0454%200-4.2071zm-12.20691%2012.207c-1.16176-1.1617-1.16177-3.0453-.00001-4.2071l2.75002-2.75.7071.7071-2.75%202.75c-.77124.7713-.77124%202.0217%200%202.7929.7712.7713%202.0216.7713%202.7929%200l2.75-2.75.7071.7071-2.75%202.75c-1.1618%201.1618-3.0454%201.1618-4.20711%200zm13.10341-3.1035h-3v-1h3zm-3.9994%201v3h-1v-3zm-7.0006-7h-3.00004v1h3.00004z%22%20fill%3D%22%2318a0fb%22%20opacity%3D%22.9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 100 | }
 101 | 
 102 | .icon--close {
 103 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m16%2015.293%204.6465-4.6464.7071.7071-4.6465%204.6464%204.6465%204.6465-.7071.7071-4.6465-4.6464-4.6464%204.6464-.7071-.7071%204.6464-4.6465-4.6464-4.6463.7071-.7071z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m16%2047.293%204.6465-4.6464.7071.7071-4.6465%204.6464%204.6465%204.6465-.7071.7071-4.6465-4.6464-4.6464%204.6464-.7071-.7071%204.6464-4.6465-4.6464-4.6463.7071-.7071z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m16%2079.293%204.6465-4.6464.7071.7071-4.6465%204.6464%204.6465%204.6465-.7071.7071-4.6465-4.6464-4.6464%204.6464-.7071-.7071%204.6464-4.6465-4.6464-4.6463.7071-.7071z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 104 | }
 105 | 
 106 | .icon--ellipses {
 107 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m11.5%2016c0%20.8284-.6716%201.5-1.5%201.5-.82843%200-1.5-.6716-1.5-1.5s.67157-1.5%201.5-1.5c.8284%200%201.5.6716%201.5%201.5zm6%200c0%20.8284-.6716%201.5-1.5%201.5s-1.5-.6716-1.5-1.5.6716-1.5%201.5-1.5%201.5.6716%201.5%201.5zm4.5%201.5c.8284%200%201.5-.6716%201.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5%201.5.6716%201.5%201.5%201.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m11.5%2048c0%20.8284-.6716%201.5-1.5%201.5-.82843%200-1.5-.6716-1.5-1.5s.67157-1.5%201.5-1.5c.8284%200%201.5.6716%201.5%201.5zm6%200c0%20.8284-.6716%201.5-1.5%201.5s-1.5-.6716-1.5-1.5.6716-1.5%201.5-1.5%201.5.6716%201.5%201.5zm4.5%201.5c.8284%200%201.5-.6716%201.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5%201.5.6716%201.5%201.5%201.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m11.5%2080c0%20.8284-.6716%201.5-1.5%201.5-.82843%200-1.5-.6716-1.5-1.5s.67157-1.5%201.5-1.5c.8284%200%201.5.6716%201.5%201.5zm6%200c0%20.8284-.6716%201.5-1.5%201.5s-1.5-.6716-1.5-1.5.6716-1.5%201.5-1.5%201.5.6716%201.5%201.5zm4.5%201.5c.8284%200%201.5-.6716%201.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5%201.5.6716%201.5%201.5%201.5z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 108 | }
 109 | 
 110 | .icon--eyedropper {
 111 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m22.4473%209.6c-.8-.8-2-.8-2.8%200l-2.8001%202.8-.8-.7c-.4-.4-1-.4-1.4%200s-.4%201%200%201.4l.7.7-5.79995%205.8c-.4.4-1%201.9%200%202.9.99995%201%202.49995.4%202.89995%200l5.8-5.8.7001.7c.4.4%201%20.4%201.4%200s.4-1%200-1.4l-.7-.7%202.8-2.8c.8-.9.8-2.1%200-2.9zm-10.9001%2011.9h-1v-1l5.8-5.8%201%201c-.1%200-5.8%205.8-5.8%205.8z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m22.4473%2041.6c-.8-.8-2-.8-2.8%200l-2.8001%202.8-.8-.7c-.4-.4-1-.4-1.4%200s-.4%201%200%201.4l.7.7-5.79995%205.8c-.4.4-1%201.9%200%202.9.99995%201%202.49995.4%202.89995%200l5.8-5.8.7001.7c.4.4%201%20.4%201.4%200s.4-1%200-1.4l-.7-.7%202.8-2.8c.8-.9.8-2.1%200-2.9zm-10.9001%2011.9h-1v-1l5.8-5.8%201%201c-.1%200-5.8%205.8-5.8%205.8z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m22.4473%2073.6c-.8-.8-2-.8-2.8%200l-2.8001%202.8-.8-.7c-.4-.4-1-.4-1.4%200s-.4%201%200%201.4l.7.7-5.79995%205.8c-.4.4-1%201.9%200%202.9.99995%201%202.49995.4%202.89995%200l5.8-5.8.7001.7c.4.4%201%20.4%201.4%200s.4-1%200-1.4l-.7-.7%202.8-2.8c.8-.9.8-2.1%200-2.9zm-10.9001%2011.9h-1v-1l5.8-5.8%201%201c-.1%200-5.8%205.8-5.8%205.8z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fsvg%3E");
 112 | }
 113 | 
 114 | .icon--hidden {
 115 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m21.5085%2015.8012c.5554-.5276%201.0351-1.134%201.421-1.8012h-1.1842c-1.2655%201.8142-3.3673%203-5.7454%203-2.3782%200-4.48-1.1858-5.7454-3h-1.18428c.38597.6673.86567%201.2737%201.42108%201.8013l-1.59482%201.5949.70712.7071%201.6573-1.6574c.7108.5234%201.5112.9321%202.3742%201.1988l-.6171%202.2213.9636.2676.6262-2.2543c.452.0793.9172.1207%201.3921.1207.4748%200%20.9399-.0414%201.392-.1207l.6261%202.2543.9636-.2676-.617-2.2213c.863-.2666%201.6635-.6754%202.3743-1.1989l1.6576%201.6575.7071-.7071z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m21.5085%2047.8012c.5554-.5276%201.0351-1.134%201.421-1.8012h-1.1842c-1.2655%201.8142-3.3673%203-5.7454%203-2.3782%200-4.48-1.1858-5.7454-3h-1.18428c.38597.6673.86567%201.2737%201.42108%201.8013l-1.59482%201.5949.70712.7071%201.6573-1.6574c.7108.5234%201.5112.9321%202.3742%201.1988l-.6171%202.2213.9636.2676.6262-2.2543c.452.0793.9172.1207%201.3921.1207.4748%200%20.9399-.0414%201.392-.1207l.6261%202.2543.9636-.2676-.617-2.2213c.863-.2666%201.6635-.6754%202.3743-1.1989l1.6576%201.6575.7071-.7071z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m21.5085%2079.8012c.5554-.5276%201.0351-1.134%201.421-1.8012h-1.1842c-1.2655%201.8142-3.3673%203-5.7454%203-2.3782%200-4.48-1.1858-5.7454-3h-1.18428c.38597.6673.86567%201.2737%201.42108%201.8013l-1.59482%201.5949.70712.7071%201.6573-1.6574c.7108.5234%201.5112.9321%202.3742%201.1988l-.6171%202.2213.9636.2676.6262-2.2543c.452.0793.9172.1207%201.3921.1207.4748%200%20.9399-.0414%201.392-.1207l.6261%202.2543.9636-.2676-.617-2.2213c.863-.2666%201.6635-.6754%202.3743-1.1989l1.6576%201.6575.7071-.7071z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 116 | }
 117 | 
 118 | .icon--hyperlink {
 119 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m13.5%2018c1.9593%200%203.6262-1.2522%204.2439-3h1.0491c-.653%202.3085-2.7754%204-5.293%204-3.0376%200-5.5-2.4624-5.5-5.5s2.4624-5.5%205.5-5.5c2.5176%200%204.64%201.6915%205.293%204h-1.0491c-.6177-1.7478-2.2846-3-4.2439-3-2.4853%200-4.5%202.0147-4.5%204.5s2.0147%204.5%204.5%204.5zm5%205c2.4853%200%204.5-2.0147%204.5-4.5s-2.0147-4.5-4.5-4.5c-1.9593%200-3.6262%201.2522-4.2439%203h-1.0491c.653-2.3085%202.7754-4%205.293-4%203.0376%200%205.5%202.4624%205.5%205.5s-2.4624%205.5-5.5%205.5c-2.5176%200-4.64-1.6915-5.293-4h1.0491c.6177%201.7478%202.2846%203%204.2439%203z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m13.5%2050c1.9593%200%203.6262-1.2522%204.2439-3h1.0491c-.653%202.3085-2.7754%204-5.293%204-3.0376%200-5.5-2.4624-5.5-5.5s2.4624-5.5%205.5-5.5c2.5176%200%204.64%201.6915%205.293%204h-1.0491c-.6177-1.7478-2.2846-3-4.2439-3-2.4853%200-4.5%202.0147-4.5%204.5s2.0147%204.5%204.5%204.5zm5%205c2.4853%200%204.5-2.0147%204.5-4.5s-2.0147-4.5-4.5-4.5c-1.9593%200-3.6262%201.2522-4.2439%203h-1.0491c.653-2.3085%202.7754-4%205.293-4%203.0376%200%205.5%202.4624%205.5%205.5s-2.4624%205.5-5.5%205.5c-2.5176%200-4.64-1.6915-5.293-4h1.0491c.6177%201.7478%202.2846%203%204.2439%203z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m13.5%2082c1.9593%200%203.6262-1.2522%204.2439-3h1.0491c-.653%202.3085-2.7754%204-5.293%204-3.0376%200-5.5-2.4624-5.5-5.5s2.4624-5.5%205.5-5.5c2.5176%200%204.64%201.6915%205.293%204h-1.0491c-.6177-1.7478-2.2846-3-4.2439-3-2.4853%200-4.5%202.0147-4.5%204.5s2.0147%204.5%204.5%204.5zm5%205c2.4853%200%204.5-2.0147%204.5-4.5s-2.0147-4.5-4.5-4.5c-1.9593%200-3.6262%201.2522-4.2439%203h-1.0491c.653-2.3085%202.7754-4%205.293-4%203.0376%200%205.5%202.4624%205.5%205.5s-2.4624%205.5-5.5%205.5c-2.5176%200-4.64-1.6915-5.293-4h1.0491c.6177%201.7478%202.2846%203%204.2439%203z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 120 | }
 121 | 
 122 | .icon--link-broken {
 123 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m18%2014v-2c0-1.1046-.8954-2-2-2s-2%20.8954-2%202v2h-1v-2c0-1.6569%201.3431-3%203-3s3%201.3431%203%203v2zm1%204h-1v2c0%201.1046-.8954%202-2%202s-2-.8954-2-2v-2h-1v2c0%201.6569%201.3431%203%203%203s3-1.3431%203-3z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m18%2046v-2c0-1.1046-.8954-2-2-2s-2%20.8954-2%202v2h-1v-2c0-1.6569%201.3431-3%203-3s3%201.3431%203%203v2zm1%204h-1v2c0%201.1046-.8954%202-2%202s-2-.8954-2-2v-2h-1v2c0%201.6569%201.3431%203%203%203s3-1.3431%203-3z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m18%2078v-2c0-1.1046-.8954-2-2-2s-2%20.8954-2%202v2h-1v-2c0-1.6569%201.3431-3%203-3s3%201.3431%203%203v2zm1%204h-1v2c0%201.1046-.8954%202-2%202s-2-.8954-2-2v-2h-1v2c0%201.6569%201.3431%203%203%203s3-1.3431%203-3z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 124 | }
 125 | 
 126 | .icon--link {
 127 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m16%2010c1.1046%200%202%20.8954%202%202v2h1v-2c0-1.6569-1.3431-3-3-3s-3%201.3431-3%203v2h1v-2c0-1.1046.8954-2%202-2zm2%208h1v2c0%201.6569-1.3431%203-3%203s-3-1.3431-3-3v-2h1v2c0%201.1046.8954%202%202%202s2-.8954%202-2zm-2.5-5v6h1v-6z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m16%2042c1.1046%200%202%20.8954%202%202v2h1v-2c0-1.6569-1.3431-3-3-3s-3%201.3431-3%203v2h1v-2c0-1.1046.8954-2%202-2zm2%208h1v2c0%201.6569-1.3431%203-3%203s-3-1.3431-3-3v-2h1v2c0%201.1046.8954%202%202%202s2-.8954%202-2zm-2.5-5v6h1v-6z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m16%2074c1.1046%200%202%20.8954%202%202v2h1v-2c0-1.6569-1.3431-3-3-3s-3%201.3431-3%203v2h1v-2c0-1.1046.8954-2%202-2zm2%208h1v2c0%201.6569-1.3431%203-3%203s-3-1.3431-3-3v-2h1v2c0%201.1046.8954%202%202%202s2-.8954%202-2zm-2.5-5v6h1v-6z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 128 | }
 129 | 
 130 | .icon--lock {
 131 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m17.5%2013.5v1.5h-3v-1.5c0-.8284.6716-1.5%201.5-1.5s1.5.6716%201.5%201.5zm-4%201.5v-1.5c0-1.3807%201.1193-2.5%202.5-2.5s2.5%201.1193%202.5%202.5v1.5h.5c.2761%200%20.5.2239.5.5v5c0%20.2761-.2239.5-.5.5h-6c-.2761%200-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m17.5%2045.5v1.5h-3v-1.5c0-.8284.6716-1.5%201.5-1.5s1.5.6716%201.5%201.5zm-4%201.5v-1.5c0-1.3807%201.1193-2.5%202.5-2.5s2.5%201.1193%202.5%202.5v1.5h.5c.2761%200%20.5.2239.5.5v5c0%20.2761-.2239.5-.5.5h-6c-.2761%200-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m17.5%2077.5v1.5h-3v-1.5c0-.8284.6716-1.5%201.5-1.5s1.5.6716%201.5%201.5zm-4%201.5v-1.5c0-1.3807%201.1193-2.5%202.5-2.5s2.5%201.1193%202.5%202.5v1.5h.5c.2761%200%20.5.2239.5.5v5c0%20.2761-.2239.5-.5.5h-6c-.2761%200-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 132 | }
 133 | 
 134 | .icon--minus {
 135 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m21.5%2016.5h-11v-1h11z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m21.5%2048.5h-11v-1h11z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m21.5%2080.5h-11v-1h11z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 136 | }
 137 | 
 138 | .icon--play {
 139 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m13%2010.0979.765.4781%208%205%20.6784.424-.6784.424-8%205-.765.4781v-.9021-10zm1%201.8042v8.1958l6.5566-4.0979z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m13%2042.0979.765.4781%208%205%20.6784.424-.6784.424-8%205-.765.4781v-.9021-10zm1%201.8042v8.1958l6.5566-4.0979z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m13%2074.0979.765.4781%208%205%20.6784.424-.6784.424-8%205-.765.4781v-.9021-10zm1%201.8042v8.1958l6.5566-4.0979z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 140 | }
 141 | 
 142 | .icon--plus {
 143 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m15.5%2015.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m15.5%2047.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m15.5%2079.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 144 | }
 145 | 
 146 | .icon--recent {
 147 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m23%2016c0%203.866-3.134%207-7%207s-7-3.134-7-7%203.134-7%207-7%207%203.134%207%207zm1%200c0%204.4183-3.5817%208-8%208s-8-3.5817-8-8%203.5817-8%208-8%208%203.5817%208%208zm-9-4v4.5.5h.5%204.5v-1h-4v-4z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m23%2048c0%203.866-3.134%207-7%207s-7-3.134-7-7%203.134-7%207-7%207%203.134%207%207zm1%200c0%204.4183-3.5817%208-8%208s-8-3.5817-8-8%203.5817-8%208-8%208%203.5817%208%208zm-9-4v4.5.5h.5%204.5v-1h-4v-4z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m23%2080c0%203.866-3.134%207-7%207s-7-3.134-7-7%203.134-7%207-7%207%203.134%207%207zm1%200c0%204.4183-3.5817%208-8%208s-8-3.5817-8-8%203.5817-8%208-8%208%203.5817%208%208zm-9-4v4.5.5h.5%204.5v-1h-4v-4z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 148 | }
 149 | 
 150 | .icon--recent {
 151 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m16%2023.9999c4.4183%200%208-3.5817%208-8s-3.5817-8.00002-8-8.00002-8%203.58172-8%208.00002%203.5817%208%208%208zm-.0889-5.1346%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m16%2055.9999c4.4183%200%208-3.5817%208-8s-3.5817-8-8-8-8%203.5817-8%208%203.5817%208%208%208zm-.0889-5.1346%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m16%2087.9999c4.4183%200%208-3.5817%208-8s-3.5817-8-8-8-8%203.5817-8%208%203.5817%208%208%208zm-.0889-5.1346%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 152 | }
 153 | 
 154 | .icon--resolve-filled {
 155 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m16%2023.9999c4.4183%200%208-3.5817%208-8s-3.5817-8.00002-8-8.00002-8%203.58172-8%208.00002%203.5817%208%208%208zm-.0889-5.1346%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m16%2055.9999c4.4183%200%208-3.5817%208-8s-3.5817-8-8-8-8%203.5817-8%208%203.5817%208%208%208zm-.0889-5.1346%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m16%2087.9999c4.4183%200%208-3.5817%208-8s-3.5817-8-8-8-8%203.5817-8%208%203.5817%208%208%208zm-.0889-5.1346%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 156 | }
 157 | 
 158 | .icon--resolve {
 159 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m23%2015.9999c0%203.866-3.134%207-7%207s-7-3.134-7-7%203.134-7.00002%207-7.00002%207%203.13402%207%207.00002zm1%200c0%204.4183-3.5817%208-8%208s-8-3.5817-8-8%203.5817-8.00002%208-8.00002%208%203.58172%208%208.00002zm-8.0889%202.8654%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m23%2047.9999c0%203.866-3.134%207-7%207s-7-3.134-7-7%203.134-7%207-7%207%203.134%207%207zm1%200c0%204.4183-3.5817%208-8%208s-8-3.5817-8-8%203.5817-8%208-8%208%203.5817%208%208zm-8.0889%202.8654%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m23%2079.9999c0%203.866-3.134%207-7%207s-7-3.134-7-7%203.134-7%207-7%207%203.134%207%207zm1%200c0%204.4183-3.5817%208-8%208s-8-3.5817-8-8%203.5817-8%208-8%208%203.5817%208%208zm-8.0889%202.8654%204-4.4999-.8222-.7308-3.6125%204.0639-2.5875-2.5874-.7778.7778%203%202.9999.4125.4124z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 160 | }
 161 | 
 162 | .icon--search {
 163 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m20%2015c0%202.7614-2.2386%205-5%205s-5-2.2386-5-5%202.2386-5%205-5%205%202.2386%205%205zm-1.1256%204.5815c-1.0453.8849-2.3975%201.4185-3.8744%201.4185-3.3137%200-6-2.6863-6-6s2.6863-6%206-6%206%202.6863%206%206c0%201.4769-.5336%202.8291-1.4185%203.8744l4.2721%204.272-.7072.7072z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m20%2047c0%202.7614-2.2386%205-5%205s-5-2.2386-5-5%202.2386-5%205-5%205%202.2386%205%205zm-1.1256%204.5815c-1.0453.8849-2.3975%201.4185-3.8744%201.4185-3.3137%200-6-2.6863-6-6s2.6863-6%206-6%206%202.6863%206%206c0%201.4769-.5336%202.8291-1.4185%203.8744l4.2721%204.272-.7072.7072z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m20%2079c0%202.7614-2.2386%205-5%205s-5-2.2386-5-5%202.2386-5%205-5%205%202.2386%205%205zm-1.1256%204.5815c-1.0453.8849-2.3975%201.4185-3.8744%201.4185-3.3137%200-6-2.6863-6-6s2.6863-6%206-6%206%202.6863%206%206c0%201.4769-.5336%202.8291-1.4185%203.8744l4.2721%204.272-.7072.7072z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 164 | }
 165 | 
 166 | .icon--trash {
 167 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m15%209.5c-.5523%200-1%20.44772-1%201h4c0-.55228-.4477-1-1-1zm4%201c0-1.10457-.8954-2-2-2h-2c-1.1046%200-2%20.89543-2%202h-1.5-1.5v1h1v10c0%201.1046.8954%202%202%202h6c1.1046%200%202-.8954%202-2v-10h1v-1h-1.5zm1%201h-1.5-5-1.5v10c0%20.5523.4477%201%201%201h6c.5523%200%201-.4477%201-1zm-6%207v-4h1v4zm3%200v-4h1v4z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m15%2041.5c-.5523%200-1%20.4477-1%201h4c0-.5523-.4477-1-1-1zm4%201c0-1.1046-.8954-2-2-2h-2c-1.1046%200-2%20.8954-2%202h-1.5-1.5v1h1v10c0%201.1046.8954%202%202%202h6c1.1046%200%202-.8954%202-2v-10h1v-1h-1.5zm1%201h-1.5-5-1.5v10c0%20.5523.4477%201%201%201h6c.5523%200%201-.4477%201-1zm-6%207v-4h1v4zm3%200v-4h1v4z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m15%2073.5c-.5523%200-1%20.4477-1%201h4c0-.5523-.4477-1-1-1zm4%201c0-1.1046-.8954-2-2-2h-2c-1.1046%200-2%20.8954-2%202h-1.5-1.5v1h1v10c0%201.1046.8954%202%202%202h6c1.1046%200%202-.8954%202-2v-10h1v-1h-1.5zm1%201h-1.5-5-1.5v10c0%20.5523.4477%201%201%201h6c.5523%200%201-.4477%201-1zm-6%207v-4h1v4zm3%200v-4h1v4z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 168 | }
 169 | 
 170 | .icon--unlock {
 171 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m18%2014v1h.5c.2761%200%20.5.2239.5.5v5c0%20.2761-.2239.5-.5.5h-6c-.2761%200-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5h4.5v-2.5c0-1.3807%201.1193-2.5%202.5-2.5s2.5%201.1193%202.5%202.5v1.5h-1v-1.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5%201.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m18%2046v1h.5c.2761%200%20.5.2239.5.5v5c0%20.2761-.2239.5-.5.5h-6c-.2761%200-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5h4.5v-2.5c0-1.3807%201.1193-2.5%202.5-2.5s2.5%201.1193%202.5%202.5v1.5h-1v-1.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5%201.5z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m18%2078v1h.5c.2761%200%20.5.2239.5.5v5c0%20.2761-.2239.5-.5.5h-6c-.2761%200-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5h4.5v-2.5c0-1.3807%201.1193-2.5%202.5-2.5s2.5%201.1193%202.5%202.5v1.5h-1v-1.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5%201.5z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 172 | }
 173 | 
 174 | .icon--visible {
 175 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2296%22%20viewBox%3D%220%200%2032%2096%22%20width%3D%2232%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-rule%3D%22evenodd%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22m16.0001%2019c-2.2999%200-4.3222-1.1942-5.4784-3%201.1562-1.8058%203.1785-3%205.4784-3%202.2998%200%204.3221%201.1942%205.4783%203-1.1562%201.8058-3.1785%203-5.4783%203zm0-7c2.878%200%205.3774%201.6211%206.6349%204-1.2575%202.3789-3.7569%204-6.6349%204-2.8781%200-5.3775-1.6211-6.63499-4%201.25749-2.3789%203.75689-4%206.63499-4zm.0003%206c1.1045%200%202-.8954%202-2s-.8955-2-2-2c-1.1046%200-2%20.8954-2%202s.8954%202%202%202z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20d%3D%22m16.0001%2051c-2.2999%200-4.3222-1.1942-5.4784-3%201.1562-1.8058%203.1785-3%205.4784-3%202.2998%200%204.3221%201.1942%205.4783%203-1.1562%201.8058-3.1785%203-5.4783%203zm0-7c2.878%200%205.3774%201.6211%206.6349%204-1.2575%202.3789-3.7569%204-6.6349%204-2.8781%200-5.3775-1.6211-6.63499-4%201.25749-2.3789%203.75689-4%206.63499-4zm.0003%206c1.1045%200%202-.8954%202-2s-.8955-2-2-2c-1.1046%200-2%20.8954-2%202s.8954%202%202%202z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%2F%3E%3Cpath%20d%3D%22m16.0001%2083c-2.2999%200-4.3222-1.1942-5.4784-3%201.1562-1.8058%203.1785-3%205.4784-3%202.2998%200%204.3221%201.1942%205.4783%203-1.1562%201.8058-3.1785%203-5.4783%203zm0-7c2.878%200%205.3774%201.6211%206.6349%204-1.2575%202.3789-3.7569%204-6.6349%204-2.8781%200-5.3775-1.6211-6.63499-4%201.25749-2.3789%203.75689-4%206.63499-4zm.0003%206c1.1045%200%202-.8954%202-2s-.8955-2-2-2c-1.1046%200-2%20.8954-2%202s.8954%202%202%202z%22%20fill%3D%22%2318a0fb%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 176 | }
 177 | 
 178 | .label {
 179 |   display: -webkit-box;
 180 |   display: -ms-flexbox;
 181 |   display: flex;
 182 |   -webkit-box-align: center;
 183 |   -ms-flex-align: center;
 184 |   align-items: center;
 185 |   height: 32px;
 186 |   padding: 8px 4px 8px 8px;
 187 |   color: rgba(0, 0, 0, 0.3);
 188 |   background-color: #ffffff;
 189 |   font-family: "Inter", sans-serif;
 190 |   font-weight: 400;
 191 |   font-size: 11px;
 192 |   line-height: 16px;
 193 |   letter-spacing: 0.005em;
 194 | }
 195 | 
 196 | .section-title {
 197 |   display: -webkit-box;
 198 |   display: -ms-flexbox;
 199 |   display: flex;
 200 |   -webkit-box-align: center;
 201 |   -ms-flex-align: center;
 202 |   align-items: center;
 203 |   height: 32px;
 204 |   padding: 8px 4px 8px 8px;
 205 |   color: rgba(0, 0, 0, 0.8);
 206 |   background-color: #ffffff;
 207 |   font-family: "Inter", sans-serif;
 208 |   font-weight: 600;
 209 |   font-size: 11px;
 210 |   line-height: 16px;
 211 |   letter-spacing: 0.005em;
 212 | }
 213 | 
 214 | .type {
 215 |   margin: 0;
 216 |   padding: 0;
 217 | }
 218 | 
 219 | .type--11-pos {
 220 |   color: rgba(0, 0, 0, 0.8);
 221 |   font-family: "Inter", sans-serif;
 222 |   font-weight: 400;
 223 |   font-size: 11px;
 224 |   line-height: 16px;
 225 |   letter-spacing: 0.005em;
 226 | }
 227 | 
 228 | .type--11-pos-medium {
 229 |   color: rgba(0, 0, 0, 0.8);
 230 |   font-family: "Inter", sans-serif;
 231 |   font-weight: 500;
 232 |   font-size: 11px;
 233 |   line-height: 16px;
 234 |   letter-spacing: 0.005em;
 235 | }
 236 | 
 237 | .type--11-pos-bold {
 238 |   color: rgba(0, 0, 0, 0.8);
 239 |   font-family: "Inter", sans-serif;
 240 |   font-weight: 600;
 241 |   font-size: 11px;
 242 |   line-height: 16px;
 243 |   letter-spacing: 0.005em;
 244 | }
 245 | 
 246 | .type--12-pos {
 247 |   color: rgba(0, 0, 0, 0.8);
 248 |   font-family: "Inter", sans-serif;
 249 |   font-weight: 400;
 250 |   font-size: 12px;
 251 |   line-height: 16px;
 252 |   letter-spacing: 0;
 253 | }
 254 | 
 255 | .type--12-pos-medium {
 256 |   color: rgba(0, 0, 0, 0.8);
 257 |   font-family: "Inter", sans-serif;
 258 |   font-weight: 500;
 259 |   font-size: 12px;
 260 |   line-height: 16px;
 261 |   letter-spacing: 0;
 262 | }
 263 | 
 264 | .type--12-pos-bold {
 265 |   font-family: "Inter", sans-serif;
 266 |   font-weight: 600;
 267 |   font-size: 12px;
 268 |   line-height: 16px;
 269 |   letter-spacing: 0;
 270 | }
 271 | 
 272 | .type--11-neg {
 273 |   color: #ffffff;
 274 |   font-family: "Inter", sans-serif;
 275 |   font-weight: 400;
 276 |   font-size: 11px;
 277 |   line-height: 16px;
 278 |   letter-spacing: 0.01em;
 279 | }
 280 | 
 281 | .type--11-neg-medium {
 282 |   color: #ffffff;
 283 |   font-family: "Inter", sans-serif;
 284 |   font-weight: 500;
 285 |   font-size: 11px;
 286 |   line-height: 16px;
 287 |   letter-spacing: 0.01em;
 288 | }
 289 | 
 290 | .type--11-neg-bold {
 291 |   color: #ffffff;
 292 |   font-family: "Inter", sans-serif;
 293 |   font-weight: 600;
 294 |   font-size: 11px;
 295 |   line-height: 16px;
 296 |   letter-spacing: 0.01em;
 297 | }
 298 | 
 299 | .type--12-neg {
 300 |   color: #ffffff;
 301 |   font-family: "Inter", sans-serif;
 302 |   font-weight: 400;
 303 |   font-size: 12px;
 304 |   line-height: 16px;
 305 |   letter-spacing: 0.005em;
 306 | }
 307 | 
 308 | .type--12-neg-medium {
 309 |   color: #ffffff;
 310 |   font-family: "Inter", sans-serif;
 311 |   font-weight: 500;
 312 |   font-size: 12px;
 313 |   line-height: 16px;
 314 |   letter-spacing: 0.005em;
 315 | }
 316 | 
 317 | .type--12-neg-bold {
 318 |   color: #ffffff;
 319 |   font-family: "Inter", sans-serif;
 320 |   font-weight: 600;
 321 |   font-size: 12px;
 322 |   line-height: 16px;
 323 |   letter-spacing: 0.005em;
 324 | }
 325 | 
 326 | .button {
 327 |   display: inline-block;
 328 |   -ms-flex-negative: 0;
 329 |   flex-shrink: 0;
 330 |   margin: 1px 0 1px 0;
 331 |   padding: 5px 16px 5px 16px;
 332 |   border: 2px solid transparent;
 333 |   border-radius: 6px;
 334 |   outline: none;
 335 | }
 336 | 
 337 | .button--primary {
 338 |   color: #ffffff;
 339 |   background-color: #18a0fb;
 340 |   font-family: "Inter", sans-serif;
 341 |   font-weight: 500;
 342 |   font-size: 11px;
 343 |   line-height: 16px;
 344 |   letter-spacing: 0.01em;
 345 | }
 346 | 
 347 | .button--primary:active,
 348 | .button--primary:focus {
 349 |   border: 2px solid rgba(0, 0, 0, 0.3);
 350 | }
 351 | 
 352 | .button--primary:disabled {
 353 |   background-color: rgba(0, 0, 0, 0.3);
 354 | }
 355 | 
 356 | .button--primary-destructive {
 357 |   color: #ffffff;
 358 |   background-color: #f24822;
 359 | }
 360 | 
 361 | .button--primary-destructive:active,
 362 | .button--primary-destructive:focus {
 363 |   border: 2px solid rgba(0, 0, 0, 0.3);
 364 | }
 365 | 
 366 | .button--primary-destructive:disabled {
 367 |   opacity: 0.4;
 368 | }
 369 | 
 370 | .button--secondary {
 371 |   color: rgba(0, 0, 0, 0.8);
 372 |   border: 1px solid rgba(0, 0, 0, 0.8);
 373 |   background-color: #ffffff;
 374 |   font-family: "Inter", sans-serif;
 375 |   font-weight: 500;
 376 |   font-size: 11px;
 377 |   line-height: 16px;
 378 |   letter-spacing: 0.005em;
 379 | }
 380 | 
 381 | .button--secondary:active,
 382 | .button--secondary:focus {
 383 |   padding: 4px 15px 4px 15px;
 384 |   border: 2px solid #18a0fb;
 385 | }
 386 | 
 387 | .button--secondary:disabled {
 388 |   color: rgba(0, 0, 0, 0.3);
 389 |   border: 1px solid rgba(0, 0, 0, 0.3);
 390 | }
 391 | 
 392 | .button--secondary-destructive {
 393 |   color: #f24822;
 394 |   border: 1px solid #f24822;
 395 |   background-color: #ffffff;
 396 |   font-family: "Inter", sans-serif;
 397 |   font-weight: 500;
 398 |   font-size: 11px;
 399 |   line-height: 16px;
 400 |   letter-spacing: 0.005em;
 401 | }
 402 | 
 403 | .button--secondary-destructive:active,
 404 | .button--secondary-destructive:focus {
 405 |   padding: 4px 15px 4px 15px;
 406 |   border: 2px solid #f24822;
 407 | }
 408 | 
 409 | .button--secondary-destructive:disabled {
 410 |   opacity: 0.4;
 411 | }
 412 | 
 413 | .input {
 414 |   font-family: "Inter", sans-serif;
 415 |   font-weight: 400;
 416 |   font-size: 11px;
 417 |   line-height: 16px;
 418 |   letter-spacing: 0.005em;
 419 |   position: relative;
 420 |   display: -webkit-box;
 421 |   display: -ms-flexbox;
 422 |   display: flex;
 423 |   overflow: visible;
 424 |   -webkit-box-align: center;
 425 |   -ms-flex-align: center;
 426 |   align-items: center;
 427 |   width: 100%;
 428 |   height: 30px;
 429 |   margin: 1px 0 1px 0;
 430 |   padding: 8px 4px 8px 7px;
 431 |   color: rgba(0, 0, 0, 0.8);
 432 |   border: 1px solid transparent;
 433 |   border-radius: 2px;
 434 |   outline: none;
 435 |   background-color: #ffffff;
 436 | }
 437 | 
 438 | .input:hover {
 439 |   color: rgba(0, 0, 0, 0.8);
 440 |   border: 1px solid rgba(0, 0, 0, 0.1);
 441 | }
 442 | 
 443 | .input:active,
 444 | .input:focus {
 445 |   padding: 8px 4px 8px 6px;
 446 |   color: #000000;
 447 |   border: 2px solid #18a0fb;
 448 |   border-radius: 2px;
 449 | }
 450 | 
 451 | .input::-moz-selection {
 452 |   color: #000000;
 453 |   background-color: rgba(24, 145, 251, 0.3);
 454 | }
 455 | 
 456 | .input::selection {
 457 |   color: #000000;
 458 |   background-color: rgba(24, 145, 251, 0.3);
 459 | }
 460 | 
 461 | .input::-webkit-input-placeholder {
 462 |   color: rgba(0, 0, 0, 0.3);
 463 | }
 464 | 
 465 | .input:-ms-input-placeholder {
 466 |   color: rgba(0, 0, 0, 0.3);
 467 | }
 468 | 
 469 | .input::-ms-input-placeholder {
 470 |   color: rgba(0, 0, 0, 0.3);
 471 | }
 472 | 
 473 | .input::placeholder {
 474 |   color: rgba(0, 0, 0, 0.3);
 475 | }
 476 | 
 477 | .input:not(:disabled):not(:hover):placeholder-shown {
 478 |   background: linear-gradient(90deg, transparent 6px, rgba(0, 0, 0, 0.1) 0);
 479 |   background-repeat: repeat-x;
 480 |   background-position: left bottom -1px;
 481 |   background-size: calc(100% - 6px) 1px;
 482 | }
 483 | 
 484 | .input:disabled {
 485 |   color: rgba(0, 0, 0, 0.3);
 486 | }
 487 | 
 488 | .input:disabled:hover {
 489 |   border: 1px solid transparent;
 490 | }
 491 | 
 492 | .input-icon {
 493 |   position: relative;
 494 |   width: 100%;
 495 | }
 496 | 
 497 | .input-icon__icon {
 498 |   position: absolute;
 499 |   top: -1px;
 500 |   left: 0;
 501 |   width: 32px;
 502 |   height: 32px;
 503 | }
 504 | 
 505 | .input-icon__input {
 506 |   font-family: "Inter", sans-serif;
 507 |   font-weight: 400;
 508 |   font-size: 11px;
 509 |   line-height: 16px;
 510 |   letter-spacing: 0.005em;
 511 |   display: -webkit-box;
 512 |   display: -ms-flexbox;
 513 |   display: flex;
 514 |   -webkit-box-align: center;
 515 |   -ms-flex-align: center;
 516 |   align-items: center;
 517 |   width: 100%;
 518 |   height: 30px;
 519 |   margin: 1px 0 1px 0;
 520 |   padding: 8px 4px 8px 0;
 521 |   text-indent: 32px;
 522 |   color: rgba(0, 0, 0, 0.8);
 523 |   border: 1px solid transparent;
 524 |   border-radius: 2px;
 525 |   outline: none;
 526 |   background-color: #ffffff;
 527 | }
 528 | 
 529 | .input-icon__input:hover {
 530 |   color: rgba(0, 0, 0, 0.8);
 531 |   border: 1px solid rgba(0, 0, 0, 0.1);
 532 | }
 533 | 
 534 | .input-icon__input:active,
 535 | .input-icon__input:focus {
 536 |   margin-left: -1px;
 537 |   padding: 8px 4px 8px 0;
 538 |   color: #000000;
 539 |   border: 2px solid #18a0fb;
 540 |   border-radius: 2px;
 541 | }
 542 | 
 543 | .input-icon__input::-moz-selection {
 544 |   color: #000000;
 545 |   background-color: rgba(24, 145, 251, 0.3);
 546 | }
 547 | 
 548 | .input-icon__input::selection {
 549 |   color: #000000;
 550 |   background-color: rgba(24, 145, 251, 0.3);
 551 | }
 552 | 
 553 | .input-icon__input::-webkit-input-placeholder {
 554 |   color: rgba(0, 0, 0, 0.3);
 555 | }
 556 | 
 557 | .input-icon__input:-ms-input-placeholder {
 558 |   color: rgba(0, 0, 0, 0.3);
 559 | }
 560 | 
 561 | .input-icon__input::-ms-input-placeholder {
 562 |   color: rgba(0, 0, 0, 0.3);
 563 | }
 564 | 
 565 | .input-icon__input::placeholder {
 566 |   color: rgba(0, 0, 0, 0.3);
 567 | }
 568 | 
 569 | .input-icon__input:not(:disabled):not(:hover):placeholder-shown {
 570 |   background: linear-gradient(90deg, transparent 6px, rgba(0, 0, 0, 0.1) 0);
 571 |   background-repeat: repeat-x;
 572 |   background-position: left bottom -1px;
 573 |   background-size: calc(100% - 6px) 1px;
 574 | }
 575 | 
 576 | .input-icon__input:disabled {
 577 |   color: rgba(0, 0, 0, 0.3);
 578 | }
 579 | 
 580 | .input-icon__input:disabled:hover {
 581 |   border: 1px solid transparent;
 582 | }
 583 | 
 584 | .textarea {
 585 |   font-family: "Inter", sans-serif;
 586 |   font-weight: 400;
 587 |   font-size: 11px;
 588 |   line-height: 16px;
 589 |   letter-spacing: 0.005em;
 590 |   display: -webkit-box;
 591 |   display: -ms-flexbox;
 592 |   display: flex;
 593 |   overflow: hidden;
 594 |   -webkit-box-align: center;
 595 |   -ms-flex-align: center;
 596 |   align-items: center;
 597 |   width: calc(100% - 16px);
 598 |   min-height: 62px;
 599 |   margin: 1px 8px 1px 8px;
 600 |   padding: 7px 4px 7px 7px;
 601 |   resize: none;
 602 |   color: rgba(0, 0, 0, 0.8);
 603 |   border: 1px solid rgba(0, 0, 0, 0.1);
 604 |   border-radius: 2px;
 605 |   outline: none;
 606 |   background-color: #ffffff;
 607 | }
 608 | 
 609 | .textarea:active,
 610 | .textarea:focus {
 611 |   padding: 6px 4px 6px 6px;
 612 |   color: #000000;
 613 |   border: 2px solid #18a0fb;
 614 |   border-radius: 2px;
 615 | }
 616 | 
 617 | .textarea::-moz-selection {
 618 |   color: #000000;
 619 |   background-color: rgba(24, 145, 251, 0.3);
 620 | }
 621 | 
 622 | .textarea::selection {
 623 |   color: #000000;
 624 |   background-color: rgba(24, 145, 251, 0.3);
 625 | }
 626 | 
 627 | .textarea::-webkit-input-placeholder {
 628 |   color: rgba(0, 0, 0, 0.3);
 629 | }
 630 | 
 631 | .textarea:-ms-input-placeholder {
 632 |   color: rgba(0, 0, 0, 0.3);
 633 | }
 634 | 
 635 | .textarea::-ms-input-placeholder {
 636 |   color: rgba(0, 0, 0, 0.3);
 637 | }
 638 | 
 639 | .textarea::placeholder {
 640 |   color: rgba(0, 0, 0, 0.3);
 641 | }
 642 | 
 643 | .textarea:disabled {
 644 |   color: rgba(0, 0, 0, 0.3);
 645 | }
 646 | 
 647 | .textarea:disabled:focus {
 648 |   border: 1px solid rgba(0, 0, 0, 0.1);
 649 | }
 650 | 
 651 | .select-menu {
 652 |   position: relative;
 653 |   display: block;
 654 |   -webkit-box-sizing: border-box;
 655 |   box-sizing: border-box;
 656 |   width: 100%;
 657 |   cursor: default;
 658 | }
 659 | 
 660 | .select-menu__button {
 661 |   position: relative;
 662 |   display: -webkit-box;
 663 |   display: -ms-flexbox;
 664 |   display: flex;
 665 |   -webkit-box-pack: justify;
 666 |   -ms-flex-pack: justify;
 667 |   justify-content: space-between;
 668 |   width: 100%;
 669 |   height: 30px;
 670 |   margin: 1px 0 1px 0;
 671 |   padding: 6px 0 6px 8px;
 672 |   cursor: default;
 673 |   color: rgba(0, 0, 0, 0.8);
 674 |   border: 1px solid transparent;
 675 |   border-radius: 2px;
 676 |   background-color: #ffffff;
 677 |   font-family: "Inter", sans-serif;
 678 |   font-weight: 400;
 679 |   font-size: 11px;
 680 |   line-height: 16px;
 681 |   letter-spacing: 0.005em;
 682 | }
 683 | 
 684 | .select-menu__button:hover {
 685 |   border: 1px solid rgba(0, 0, 0, 0.1);
 686 | }
 687 | 
 688 | .select-menu__button:hover span:after {
 689 |   opacity: 0;
 690 | }
 691 | 
 692 | .select-menu__button:hover .select-menu__icon {
 693 |   opacity: 1;
 694 | }
 695 | 
 696 | .select-menu__button:focus,
 697 | .select-menu__button:active {
 698 |   width: 100%;
 699 |   padding: 5px 0 5px 7px;
 700 |   border: 2px solid #18a0fb;
 701 |   outline: none;
 702 | }
 703 | 
 704 | .select-menu__button:focus span:after,
 705 | .select-menu__button:active span:after {
 706 |   opacity: 0;
 707 | }
 708 | 
 709 | .select-menu__button:focus .select-menu__icon,
 710 | .select-menu__button:active .select-menu__icon {
 711 |   opacity: 1;
 712 | }
 713 | 
 714 | .select-menu__button--active:hover {
 715 |   width: 100%;
 716 |   padding: 5px 0 5px 7px;
 717 |   border: 2px solid #18a0fb;
 718 |   outline: none;
 719 | }
 720 | 
 721 | .select-menu__button-label {
 722 |   display: inline-block;
 723 |   text-align: left;
 724 | }
 725 | 
 726 | .select-menu__button-label:after {
 727 |   display: inline-block;
 728 |   width: 7px;
 729 |   height: 5px;
 730 |   margin-top: 6px;
 731 |   margin-left: 6px;
 732 |   content: "";
 733 |   background-color: transparent;
 734 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%225%22%20viewBox%3D%220%200%207%205%22%20width%3D%227%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m3%203.70711-3-3.000003.707107-.707107%202.646443%202.64645%202.64645-2.64645.70711.707107-3%203.000003-.35356.35355z%22%20fill%3D%22%23000%22%20fill-opacity%3D%22.3%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
 735 | }
 736 | 
 737 | .select-menu__icon {
 738 |   position: absolute;
 739 |   top: 0;
 740 |   right: 0;
 741 |   width: 30px;
 742 |   height: 30px;
 743 |   opacity: 0;
 744 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20width%3D%2230%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m15%2016.7071-3-3%20.7071-.7071%202.6465%202.6464%202.6464-2.6464.7071.7071-3%203-.3535.3536z%22%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
 745 |   background-repeat: no-repeat;
 746 |   background-position: center center;
 747 | }
 748 | 
 749 | .select-menu__list {
 750 |   position: absolute;
 751 |   z-index: 2;
 752 |   display: none;
 753 |   -webkit-box-orient: vertical;
 754 |   -webkit-box-direction: normal;
 755 |   -ms-flex-direction: column;
 756 |   flex-direction: column;
 757 |   width: 100%;
 758 |   margin: 0;
 759 |   padding: 8px 0 8px 0;
 760 |   border-radius: 2px;
 761 |   background-color: #222222;
 762 |   -webkit-box-shadow: 0 5px 17px rgba(0, 0, 0, 0.2),
 763 |     0 2px 7px rgba(0, 0, 0, 0.15);
 764 |   box-shadow: 0 5px 17px rgba(0, 0, 0, 0.2), 0 2px 7px rgba(0, 0, 0, 0.15);
 765 | }
 766 | 
 767 | .select-menu__list--active {
 768 |   display: -webkit-box;
 769 |   display: -ms-flexbox;
 770 |   display: flex;
 771 | }
 772 | 
 773 | .select-menu__list-item {
 774 |   display: -webkit-box;
 775 |   display: -ms-flexbox;
 776 |   display: flex;
 777 |   -webkit-box-align: center;
 778 |   -ms-flex-align: center;
 779 |   align-items: center;
 780 |   width: 100%;
 781 |   height: 24px;
 782 |   padding: 0 8px 0 4px;
 783 |   color: #ffffff;
 784 |   font-family: "Inter", sans-serif;
 785 |   font-weight: 400;
 786 |   font-size: 12px;
 787 |   line-height: 16px;
 788 |   letter-spacing: 0.005em;
 789 | }
 790 | 
 791 | .select-menu__list-item--active .select-menu__list-item-icon {
 792 |   opacity: 1 !important;
 793 | }
 794 | 
 795 | .select-menu__list-item:hover {
 796 |   background-color: #18a0fb;
 797 | }
 798 | 
 799 | .select-menu__list-item-text {
 800 |   display: -webkit-box;
 801 |   display: -ms-flexbox;
 802 |   display: flex;
 803 |   -webkit-box-align: center;
 804 |   -ms-flex-align: center;
 805 |   align-items: center;
 806 |   width: 100%;
 807 |   height: 100%;
 808 |   padding: 0 0 0 4px;
 809 | }
 810 | 
 811 | .select-menu__list-item-icon {
 812 |   display: block;
 813 |   -ms-flex-negative: 0;
 814 |   flex-shrink: 0;
 815 |   width: 24px;
 816 |   height: 24px;
 817 |   opacity: 0;
 818 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m13.2069%205.20724-5.50002%205.49996-.70711.7072-.70711-.7072-3-2.99996%201.41422-1.41421%202.29289%202.29289%204.79293-4.79289z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
 819 |   background-repeat: no-repeat;
 820 |   background-position: center center;
 821 | }
 822 | 
 823 | .select-menu__divider {
 824 |   margin: 0;
 825 | }
 826 | 
 827 | .select-menu__divider-line {
 828 |   display: block;
 829 |   height: 1px;
 830 |   margin: 8px 0 7px;
 831 |   background-color: rgba(255, 255, 255, 0.2);
 832 | }
 833 | 
 834 | .select-menu__divider-label {
 835 |   display: -webkit-box;
 836 |   display: -ms-flexbox;
 837 |   display: flex;
 838 |   -webkit-box-align: center;
 839 |   -ms-flex-align: center;
 840 |   align-items: center;
 841 |   height: 32px;
 842 |   margin-top: 8px;
 843 |   padding: 8px 8px 0 32px;
 844 |   color: rgba(255, 255, 255, 0.4);
 845 |   border-top: 1px solid rgba(255, 255, 255, 0.2);
 846 |   font-family: "Inter", sans-serif;
 847 |   font-weight: 400;
 848 |   font-size: 12px;
 849 |   line-height: 16px;
 850 |   letter-spacing: 0.005em;
 851 | }
 852 | 
 853 | .select-menu__divider-label--first {
 854 |   height: 24px;
 855 |   margin-top: 0;
 856 |   padding: 0 8px 0 32px;
 857 |   border-top: none;
 858 | }
 859 | 
 860 | .switch {
 861 |   position: relative;
 862 |   display: -webkit-box;
 863 |   display: -ms-flexbox;
 864 |   display: flex;
 865 |   -webkit-box-align: center;
 866 |   -ms-flex-align: center;
 867 |   align-items: center;
 868 |   -ms-flex-item-align: 1;
 869 |   align-self: 1;
 870 |   -webkit-box-orient: horizontal;
 871 |   -webkit-box-direction: normal;
 872 |   -ms-flex-direction: row;
 873 |   flex-direction: row;
 874 |   cursor: default;
 875 | }
 876 | 
 877 | .switch__container {
 878 |   position: relative;
 879 |   width: 24px;
 880 |   height: 12px;
 881 |   margin: 10px 16px 10px 8px;
 882 | }
 883 | 
 884 | .switch__label {
 885 |   font-family: "Inter", sans-serif;
 886 |   font-weight: 400;
 887 |   font-size: 11px;
 888 |   line-height: 16px;
 889 |   letter-spacing: 0.005em;
 890 | }
 891 | 
 892 | .switch__checkbox {
 893 |   width: 0;
 894 |   height: 0;
 895 |   opacity: 0;
 896 | }
 897 | 
 898 | .switch__checkbox:checked + .switch__slider {
 899 |   background-color: #000000;
 900 | }
 901 | 
 902 | .switch__checkbox:focus + .switch__slider {
 903 |   outline: none;
 904 |   -webkit-box-shadow: 0 0 1px #2196f3;
 905 |   box-shadow: 0 0 1px #2196f3;
 906 | }
 907 | 
 908 | .switch__checkbox:checked + .switch__slider:before {
 909 |   -webkit-transform: translateX(12px);
 910 |   transform: translateX(12px);
 911 | }
 912 | 
 913 | .switch__slider {
 914 |   position: absolute;
 915 |   top: 0;
 916 |   right: 0;
 917 |   bottom: 0;
 918 |   left: 0;
 919 |   -webkit-transition: -webkit-transform 0.2s;
 920 |   transition: -webkit-transform 0.2s;
 921 |   transition: transform 0.2s;
 922 |   transition: transform 0.2s, -webkit-transform 0.2s;
 923 |   -webkit-transition: background-color 0 0.2s;
 924 |   transition: background-color 0 0.2s;
 925 |   border: 1px solid #000000;
 926 |   border-radius: 12px;
 927 |   background-color: #ffffff;
 928 | }
 929 | 
 930 | .switch__slider::before {
 931 |   position: absolute;
 932 |   top: -1px;
 933 |   left: -1px;
 934 |   width: 10px;
 935 |   height: 10px;
 936 |   content: "";
 937 |   -webkit-transition: -webkit-transform 0.2s;
 938 |   transition: -webkit-transform 0.2s;
 939 |   transition: transform 0.2s;
 940 |   transition: transform 0.2s, -webkit-transform 0.2s;
 941 |   -webkit-transition: background-color 0 0.2s;
 942 |   transition: background-color 0 0.2s;
 943 |   border: 1px solid #000000;
 944 |   border-radius: 50%;
 945 |   background-color: white;
 946 | }
 947 | 
 948 | .checkbox {
 949 |   display: -webkit-box;
 950 |   display: -ms-flexbox;
 951 |   display: flex;
 952 |   -webkit-box-orient: horizontal;
 953 |   -webkit-box-direction: normal;
 954 |   -ms-flex-direction: row;
 955 |   flex-direction: row;
 956 |   height: 28px;
 957 |   cursor: default;
 958 | }
 959 | 
 960 | .checkbox__container {
 961 |   position: relative;
 962 |   width: 32px;
 963 |   height: 32px;
 964 | }
 965 | 
 966 | .checkbox__label {
 967 |   display: -webkit-box;
 968 |   display: -ms-flexbox;
 969 |   display: flex;
 970 |   -webkit-box-align: center;
 971 |   -ms-flex-align: center;
 972 |   align-items: center;
 973 |   padding-top: 4px;
 974 |   font-family: "Inter", sans-serif;
 975 |   font-weight: 400;
 976 |   font-size: 11px;
 977 |   line-height: 16px;
 978 |   letter-spacing: 0.005em;
 979 | }
 980 | 
 981 | .checkbox__box {
 982 |   position: absolute;
 983 |   width: 0;
 984 |   height: 0;
 985 |   opacity: 0;
 986 | }
 987 | 
 988 | .checkbox__box:checked ~ .checkbox__mark {
 989 |   border: 1px solid #18a0fb;
 990 |   background-color: #18a0fb;
 991 | }
 992 | 
 993 | .checkbox__box:checked ~ .checkbox__mark:after {
 994 |   display: block;
 995 | }
 996 | 
 997 | .checkbox__mark {
 998 |   position: absolute;
 999 |   top: 10px;
1000 |   left: 10px;
1001 |   width: 12px;
1002 |   height: 12px;
1003 |   border: 1px solid #000000;
1004 |   border-radius: 2px;
1005 |   background-color: #ffffff;
1006 | }
1007 | 
1008 | .checkbox__mark:after {
1009 |   position: absolute;
1010 |   width: 12px;
1011 |   height: 12px;
1012 |   content: "";
1013 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%227%22%20viewBox%3D%220%200%208%207%22%20width%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m1.17647%201.88236%201.88235%201.88236%203.76471-3.76472%201.17647%201.17648-4.94118%204.9412-3.05882-3.05884z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
1014 |   background-repeat: no-repeat;
1015 |   background-position: 1px 2px;
1016 | }
1017 | 
1018 | .divider {
1019 |   display: block;
1020 |   width: 100%;
1021 |   height: 1px;
1022 |   margin: 8px 0 8px 0;
1023 |   padding: 0;
1024 |   background-color: #e5e5e5;
1025 | }
1026 | 
1027 | .visual-bell {
1028 |   display: -webkit-box;
1029 |   display: -ms-flexbox;
1030 |   display: flex;
1031 |   -webkit-box-align: center;
1032 |   -ms-flex-align: center;
1033 |   align-items: center;
1034 |   -ms-flex-item-align: start;
1035 |   align-self: flex-start;
1036 |   -ms-flex-negative: 1;
1037 |   flex-shrink: 1;
1038 |   height: 36px;
1039 |   padding: 0 16px 0 16px;
1040 |   -webkit-transition: all 0.3s ease-out;
1041 |   transition: all 0.3s ease-out;
1042 |   border: 1px solid rgba(0, 0, 0, 0.1);
1043 |   border-radius: 5px;
1044 |   background-color: #222222;
1045 |   -webkit-box-shadow: 0 5px 17px rgba(0, 0, 0, 0.2),
1046 |     0 2px 7px rgba(0, 0, 0, 0.15);
1047 |   box-shadow: 0 5px 17px rgba(0, 0, 0, 0.2), 0 2px 7px rgba(0, 0, 0, 0.15);
1048 | }
1049 | 
1050 | .visual-bell__msg {
1051 |   font-family: "Inter", sans-serif;
1052 |   font-weight: 400;
1053 |   font-size: 14px;
1054 |   line-height: 24px;
1055 |   letter-spacing: -0.001em;
1056 |   display: block;
1057 |   color: #ffffff;
1058 | }
1059 | 
1060 | .visual-bell__spinner-container {
1061 |   display: none;
1062 |   overflow: hidden;
1063 |   width: 24px;
1064 |   height: 24px;
1065 |   margin-right: 8px;
1066 |   margin-left: -4px;
1067 | }
1068 | 
1069 | .visual-bell__spinner {
1070 |   display: block;
1071 |   width: 24px;
1072 |   height: 24px;
1073 |   -webkit-animation: rotating 1s linear infinite;
1074 |   animation: rotating 1s linear infinite;
1075 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M4.848%209.74l.477.15-.477-.15zm2.622-3.08a.5.5%200%200%200-.617-.787l.617.787zm10.677%201.99a7%207%200%200%201%20.838%203.803l.998.065a8%208%200%200%200-.958-4.346l-.878.478zm.838%203.803a7%207%200%200%201-1.324%203.662l.81.588a8%208%200%200%200%201.513-4.186l-.998-.065zm-1.324%203.662a7%207%200%200%201-3.076%202.388l.37.93a8%208%200%200%200%203.515-2.729l-.81-.588zm-3.076%202.388a7%207%200%200%201-3.876.375l-.184.983a8%208%200%200%200%204.43-.428l-.37-.93zm-3.876.375a7%207%200%200%201-3.477-1.755l-.68.732a8%208%200%200%200%203.973%202.005l.184-.983zm-3.477-1.755a7%207%200%200%201-2.001-3.341l-.967.255a8%208%200%200%200%202.287%203.818l.68-.732zm-2-3.34a7%207%200%200%201%20.094-3.893l-.954-.3a8%208%200%200%200-.107%204.449l.967-.255zm.094-3.893c.323-1.024.863-1.835%201.326-2.394.23-.278.44-.49.6-.632l.175-.157.044-.037c.01-.008.01-.008-.298-.402l-.31-.393-.026.02-.06.05-.21.2c-.175.165-.413.407-.674.722-.52.627-1.137%201.55-1.5%202.73l.954.3z%22%20fill%3D%22%23a5a5a5%22%2F%3E%3C%2Fsvg%3E");
1076 |   background-repeat: none;
1077 | }
1078 | 
1079 | .visual-bell--loading .visual-bell__spinner-container {
1080 |   display: block;
1081 | }
1082 | 
1083 | .visual-bell--hidden {
1084 |   margin-top: 8px;
1085 |   opacity: 0;
1086 | }
1087 | 
1088 | .visual-bell--error {
1089 |   border: 1px solid #f24822;
1090 |   background-color: #f24822;
1091 | }
1092 | 
1093 | @-webkit-keyframes rotating {
1094 |   from {
1095 |     -webkit-transform: rotate(0deg);
1096 |     transform: rotate(0deg);
1097 |   }
1098 |   to {
1099 |     -webkit-transform: rotate(360deg);
1100 |     transform: rotate(360deg);
1101 |   }
1102 | }
1103 | 
1104 | @keyframes rotating {
1105 |   from {
1106 |     -webkit-transform: rotate(0deg);
1107 |     transform: rotate(0deg);
1108 |   }
1109 |   to {
1110 |     -webkit-transform: rotate(360deg);
1111 |     transform: rotate(360deg);
1112 |   }
1113 | }
1114 | 
1115 | .onboarding-tip {
1116 |   display: -webkit-box;
1117 |   display: -ms-flexbox;
1118 |   display: flex;
1119 |   -webkit-box-align: top;
1120 |   -ms-flex-align: top;
1121 |   align-items: top;
1122 |   -webkit-box-orient: horizontal;
1123 |   -webkit-box-direction: normal;
1124 |   -ms-flex-direction: row;
1125 |   flex-direction: row;
1126 |   padding: 0 16px 0 0;
1127 | }
1128 | 
1129 | .onboarding-tip__icon {
1130 |   width: 32px;
1131 |   height: 32px;
1132 |   margin-right: 8px;
1133 | }
1134 | 
1135 | .onboarding-tip__msg {
1136 |   padding: 8px 0 8px 0;
1137 |   color: rgba(0, 0, 0, 0.8);
1138 |   font-family: "Inter", sans-serif;
1139 |   font-weight: 400;
1140 |   font-size: 11px;
1141 |   line-height: 16px;
1142 |   letter-spacing: 0.005em;
1143 | }
1144 | 
1145 | .onboarding-tip__msg a:link,
1146 | .onboarding-tip__msg a:hover,
1147 | .onboarding-tip__msg a:active,
1148 | .onboarding-tip__msg a:visited {
1149 |   text-decoration: none;
1150 |   color: #18a0fb;
1151 | }
1152 | 
1153 | .onboarding-tip--hidden {
1154 |   display: none;
1155 | }
1156 | 
1157 | .onboarding-tip--light {
1158 |   color: rgba(0, 0, 0, 0.3);
1159 | }
1160 | 
1161 | .onboarding-tip--pt5 {
1162 |   padding-top: 8px;
1163 | }
1164 | 
1165 | .disclosure {
1166 |   position: relative;
1167 |   display: block;
1168 |   width: 100%;
1169 |   margin: 0;
1170 |   padding: 0;
1171 |   list-style-type: none;
1172 | }
1173 | 
1174 | .disclosure__item {
1175 |   display: -webkit-box;
1176 |   display: -ms-flexbox;
1177 |   display: flex;
1178 |   -webkit-box-orient: vertical;
1179 |   -webkit-box-direction: normal;
1180 |   -ms-flex-direction: column;
1181 |   flex-direction: column;
1182 |   border-bottom: 1px solid #e5e5e5;
1183 |   background-color: #ffffff;
1184 |   font-family: "Inter", sans-serif;
1185 |   font-weight: 400;
1186 |   font-size: 11px;
1187 |   line-height: 16px;
1188 |   letter-spacing: 0.005em;
1189 | }
1190 | 
1191 | .disclosure__item:last-child {
1192 |   border-bottom: 1px solid transparent;
1193 | }
1194 | 
1195 | .disclosure__label {
1196 |   position: relative;
1197 |   display: -webkit-box;
1198 |   display: -ms-flexbox;
1199 |   display: flex;
1200 |   -webkit-box-align: center;
1201 |   -ms-flex-align: center;
1202 |   align-items: center;
1203 |   height: 32px;
1204 |   padding: 0 8px 0 24px;
1205 |   cursor: default;
1206 |   color: rgba(0, 0, 0, 0.8);
1207 |   font-family: "Inter", sans-serif;
1208 |   font-weight: 400;
1209 |   font-size: 11px;
1210 |   line-height: 16px;
1211 |   letter-spacing: 0.005em;
1212 | }
1213 | 
1214 | .disclosure__label:before {
1215 |   position: absolute;
1216 |   top: 8px;
1217 |   left: 4px;
1218 |   display: block;
1219 |   width: 16px;
1220 |   height: 16px;
1221 |   content: "";
1222 |   opacity: 0.3;
1223 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m11%208-4-3v6z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
1224 |   background-repeat: no-repeat;
1225 |   background-position: center center;
1226 | }
1227 | 
1228 | .disclosure__label:hover:before {
1229 |   opacity: 0.8;
1230 | }
1231 | 
1232 | .disclosure__content {
1233 |   display: none;
1234 |   padding: 8px 8px 8px 24px;
1235 |   color: rgba(0, 0, 0, 0.8);
1236 |   font-family: "Inter", sans-serif;
1237 |   font-weight: 400;
1238 |   font-size: 11px;
1239 |   line-height: 16px;
1240 |   letter-spacing: 0.005em;
1241 | }
1242 | 
1243 | .disclosure--section .disclosure__label {
1244 |   font-family: "Inter", sans-serif;
1245 |   font-weight: 600;
1246 |   font-size: 11px;
1247 |   line-height: 16px;
1248 |   letter-spacing: 0.005em;
1249 | }
1250 | 
1251 | .disclosure--expanded .disclosure__content {
1252 |   display: block;
1253 | }
1254 | 
1255 | .disclosure--expanded .disclosure__label:before {
1256 |   opacity: 0.8;
1257 |   background-image: url("data:image/svg+xml;utf8,%3Csvg%20fill%3D%22none%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20width%3D%2216%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m9%2010%203-4h-6z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
1258 | }
1259 | 


--------------------------------------------------------------------------------
/src/ui/assets/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | 
3 | @tailwind components;
4 | 
5 | @tailwind utilities;
6 | 


--------------------------------------------------------------------------------
/src/ui/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Figma Format</title>
 8 |     <style>
 9 |       html,
10 |       body {
11 |         height: 100%;
12 |       }
13 |       * {
14 |         margin: 0;
15 |         padding: 0;
16 |       }
17 |     </style>
18 |   </head>
19 |   <body></body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/src/ui/index.js:
--------------------------------------------------------------------------------
1 | import App from "./App.svelte";
2 | 
3 | const app = new App({
4 |   target: document.body,
5 |   props: {}
6 | });
7 | 
8 | export default app;
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const HtmlWebpackPlugin = require("html-webpack-plugin");
 2 | const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
 3 | const path = require("path");
 4 | 
 5 | const mode = process.env.NODE_ENV || "development";
 6 | const prod = mode === "production";
 7 | 
 8 | module.exports = {
 9 |   entry: {
10 |     // bundle: ["./src/main.js"]
11 |     ui: "./src/ui/index.js",
12 |     code: "./src/code.ts"
13 |   },
14 |   output: {
15 |     filename: "[name].js",
16 |     path: path.resolve(__dirname, "dist/")
17 |     // chunkFilename: "[name].[id].js"
18 |   },
19 |   resolve: {
20 |     alias: {
21 |       svelte: path.resolve("node_modules", "svelte")
22 |     },
23 |     extensions: [".mjs", ".js", ".svelte", "ts"],
24 |     mainFields: ["svelte", "browser", "module", "main"]
25 |   },
26 | 
27 |   module: {
28 |     rules: [
29 |       {
30 |         test: /\.svelte$/,
31 |         use: {
32 |           loader: "svelte-loader",
33 |           options: {
34 |             emitCss: true,
35 |             hotReload: true
36 |           }
37 |         }
38 |       },
39 |       {
40 |         test: /\.ts?$/,
41 |         use: [{ loader: "ts-loader" }],
42 |         exclude: /node_modules/
43 |       },
44 |       {
45 |         test: /\.css$/,
46 |         use: ["style-loader", "css-loader"]
47 |       }
48 |     ]
49 |   },
50 |   mode,
51 |   plugins: [
52 |     new HtmlWebpackPlugin({
53 |       template: "./src/ui/index.html",
54 |       filename: "ui.html",
55 |       inlineSource: ".(js|css)$",
56 |       chunks: ["ui"]
57 |     }),
58 |     new HtmlWebpackInlineSourcePlugin()
59 |   ],
60 |   devtool: prod ? false : "source-map"
61 | };
62 | 


--------------------------------------------------------------------------------