├── LICENSE ├── README.md ├── figma.d.ts ├── manifest.json ├── package.json ├── src ├── app │ ├── assets │ │ ├── logo.svg │ │ ├── plugin-banner-for-publishing.png │ │ ├── plugin-banner.png │ │ └── plugin-icon.png │ ├── components │ │ └── App.tsx │ ├── index.html │ ├── index.tsx │ └── styles │ │ ├── custom-ui.css │ │ ├── figma.ds.css │ │ └── plugin-styles.css └── plugin │ └── controller.ts ├── tsconfig.json ├── tslint.json ├── webpack.config.js └── yarn.lock /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Daniel Destefanis 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Table of Contents Figma Plugin 2 | 3 | ![Table of Contents Plugin Banner](https://github.com/destefanis/figma-table-of-contents/blob/master/src/app/assets/plugin-banner.png) 4 | 5 | Direct people to the pages in your project that matter the most. 6 | 7 | This Table of contents plugin for Figma generates a table of contents page and frame for your project. This is intended to: 8 | * Help non-designers in your organization find the important pages in your file. 9 | * Provide other designers context with links to important related documents. 10 | * Help make all of your projects look consistent. 11 | 12 | This plugin can be adjusted to fit your company's brand and can then be used as an internal plugin for your org. 13 | 14 | ## Install from the Figma Plugin Page 15 | Although this plugin is open source, for most users you'll want to install from the Figma plugin community page. 16 | [View Plugin Page](https://www.figma.com/community/plugin/865650075456407958/Table-of-Contents) 17 | 18 | ## Use the template instead 19 | This file is also [published on the Figma community pages](https://www.figma.com/community/file/865646511096801223/Table-of-Contents) if you'd rather just duplicate the design. 20 | 21 | ## To Run Locally 22 | * Run `yarn` to install dependencies. 23 | * Run `yarn build:watch` to start webpack in watch mode. 24 | * Open `Figma` -> `Plugins` -> `Development` -> `New Plugin...` and choose `manifest.json` file from this repo. 25 | 26 | ### To Edit 27 | What this plugin generates and its appearance can be edited in [controller.ts](./src/plugin/controller.ts). 28 | The react code, components, and UI can be found here [App.tsx](./src/app/components/App.tsx). 29 | Read more on the [Figma API Overview](https://www.figma.com/plugin-docs/api/api-overview/). 30 | 31 | ### How do I make this match my design brand 32 | Update the font this plugin uses [here](./src/plugin/controller.ts#L10) 33 | ```javascript 34 | // Set the name of the font you want to use. 35 | let fontName = "Inter"; 36 | ``` 37 | you can also adjust the right hand side color [here](./src/plugin/controller.ts#L137) 38 | ```javascript 39 | const fills = clone(imageFrame.fills); 40 | fills[0].color.r = 0.9764705896377563; 41 | fills[0].color.b = 0.9764705896377563; 42 | fills[0].color.g = 0.9764705896377563; 43 | ``` 44 | 45 | ### Large Files 46 | This plugin doesn't scale very well to very large projects but if this is a common enough request I'll add it in the future! 47 | 48 | ## Toolings 49 | This repo is using: 50 | * React + Webpack 51 | * TypeScript 52 | * TSLint 53 | * Prettier precommit hook 54 | -------------------------------------------------------------------------------- /figma.d.ts: -------------------------------------------------------------------------------- 1 | // https://www.figma.com/plugin-docs/api/typings/ 2 | // Figma Plugin API version 1, update 14 3 | 4 | declare global { 5 | // Global variable with Figma's plugin API. 6 | const figma: PluginAPI 7 | const __html__: string 8 | 9 | interface PluginAPI { 10 | readonly apiVersion: "1.0.0" 11 | readonly command: string 12 | readonly viewport: ViewportAPI 13 | closePlugin(message?: string): void 14 | 15 | notify(message: string, options?: NotificationOptions): NotificationHandler 16 | 17 | showUI(html: string, options?: ShowUIOptions): void 18 | readonly ui: UIAPI 19 | 20 | readonly clientStorage: ClientStorageAPI 21 | 22 | getNodeById(id: string): BaseNode | null 23 | getStyleById(id: string): BaseStyle | null 24 | 25 | readonly root: DocumentNode 26 | currentPage: PageNode 27 | 28 | on(type: "selectionchange" | "currentpagechange" | "close", callback: () => void): void 29 | once(type: "selectionchange" | "currentpagechange" | "close", callback: () => void): void 30 | off(type: "selectionchange" | "currentpagechange" | "close", callback: () => void): void 31 | 32 | readonly mixed: unique symbol 33 | 34 | createRectangle(): RectangleNode 35 | createLine(): LineNode 36 | createEllipse(): EllipseNode 37 | createPolygon(): PolygonNode 38 | createStar(): StarNode 39 | createVector(): VectorNode 40 | createText(): TextNode 41 | createFrame(): FrameNode 42 | createComponent(): ComponentNode 43 | createPage(): PageNode 44 | createSlice(): SliceNode 45 | /** 46 | * [DEPRECATED]: This API often fails to create a valid boolean operation. Use figma.union, figma.subtract, figma.intersect and figma.exclude instead. 47 | */ 48 | createBooleanOperation(): BooleanOperationNode 49 | 50 | createPaintStyle(): PaintStyle 51 | createTextStyle(): TextStyle 52 | createEffectStyle(): EffectStyle 53 | createGridStyle(): GridStyle 54 | 55 | // The styles are returned in the same order as displayed in the UI. Only 56 | // local styles are returned. Never styles from team library. 57 | getLocalPaintStyles(): PaintStyle[] 58 | getLocalTextStyles(): TextStyle[] 59 | getLocalEffectStyles(): EffectStyle[] 60 | getLocalGridStyles(): GridStyle[] 61 | 62 | importComponentByKeyAsync(key: string): Promise 63 | importStyleByKeyAsync(key: string): Promise 64 | 65 | listAvailableFontsAsync(): Promise 66 | loadFontAsync(fontName: FontName): Promise 67 | readonly hasMissingFont: boolean 68 | 69 | createNodeFromSvg(svg: string): FrameNode 70 | 71 | createImage(data: Uint8Array): Image 72 | getImageByHash(hash: string): Image 73 | 74 | group(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): GroupNode 75 | flatten(nodes: ReadonlyArray, parent?: BaseNode & ChildrenMixin, index?: number): VectorNode 76 | 77 | union(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode 78 | subtract(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode 79 | intersect(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode 80 | exclude(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): BooleanOperationNode 81 | } 82 | 83 | interface ClientStorageAPI { 84 | getAsync(key: string): Promise 85 | setAsync(key: string, value: any): Promise 86 | } 87 | 88 | interface NotificationOptions { 89 | timeout?: number 90 | } 91 | 92 | interface NotificationHandler { 93 | cancel: () => void 94 | } 95 | 96 | interface ShowUIOptions { 97 | visible?: boolean 98 | width?: number 99 | height?: number 100 | } 101 | 102 | interface UIPostMessageOptions { 103 | origin?: string 104 | } 105 | 106 | interface OnMessageProperties { 107 | origin: string 108 | } 109 | 110 | type MessageEventHandler = (pluginMessage: any, props: OnMessageProperties) => void 111 | 112 | interface UIAPI { 113 | show(): void 114 | hide(): void 115 | resize(width: number, height: number): void 116 | close(): void 117 | 118 | postMessage(pluginMessage: any, options?: UIPostMessageOptions): void 119 | onmessage: MessageEventHandler | undefined 120 | on(type: "message", callback: MessageEventHandler): void 121 | once(type: "message", callback: MessageEventHandler): void 122 | off(type: "message", callback: MessageEventHandler): void 123 | } 124 | 125 | interface ViewportAPI { 126 | center: Vector 127 | zoom: number 128 | scrollAndZoomIntoView(nodes: ReadonlyArray): void 129 | readonly bounds: Rect 130 | } 131 | 132 | //////////////////////////////////////////////////////////////////////////////// 133 | // Datatypes 134 | 135 | type Transform = [ 136 | [number, number, number], 137 | [number, number, number] 138 | ] 139 | 140 | interface Vector { 141 | readonly x: number 142 | readonly y: number 143 | } 144 | 145 | interface Rect { 146 | readonly x: number 147 | readonly y: number 148 | readonly width: number 149 | readonly height: number 150 | } 151 | 152 | interface RGB { 153 | readonly r: number 154 | readonly g: number 155 | readonly b: number 156 | } 157 | 158 | interface RGBA { 159 | readonly r: number 160 | readonly g: number 161 | readonly b: number 162 | readonly a: number 163 | } 164 | 165 | interface FontName { 166 | readonly family: string 167 | readonly style: string 168 | } 169 | 170 | type TextCase = "ORIGINAL" | "UPPER" | "LOWER" | "TITLE" 171 | 172 | type TextDecoration = "NONE" | "UNDERLINE" | "STRIKETHROUGH" 173 | 174 | interface ArcData { 175 | readonly startingAngle: number 176 | readonly endingAngle: number 177 | readonly innerRadius: number 178 | } 179 | 180 | interface ShadowEffect { 181 | readonly type: "DROP_SHADOW" | "INNER_SHADOW" 182 | readonly color: RGBA 183 | readonly offset: Vector 184 | readonly radius: number 185 | readonly visible: boolean 186 | readonly blendMode: BlendMode 187 | } 188 | 189 | interface BlurEffect { 190 | readonly type: "LAYER_BLUR" | "BACKGROUND_BLUR" 191 | readonly radius: number 192 | readonly visible: boolean 193 | } 194 | 195 | type Effect = ShadowEffect | BlurEffect 196 | 197 | type ConstraintType = "MIN" | "CENTER" | "MAX" | "STRETCH" | "SCALE" 198 | 199 | interface Constraints { 200 | readonly horizontal: ConstraintType 201 | readonly vertical: ConstraintType 202 | } 203 | 204 | interface ColorStop { 205 | readonly position: number 206 | readonly color: RGBA 207 | } 208 | 209 | interface ImageFilters { 210 | readonly exposure?: number 211 | readonly contrast?: number 212 | readonly saturation?: number 213 | readonly temperature?: number 214 | readonly tint?: number 215 | readonly highlights?: number 216 | readonly shadows?: number 217 | } 218 | 219 | interface SolidPaint { 220 | readonly type: "SOLID" 221 | readonly color: RGB 222 | 223 | readonly visible?: boolean 224 | readonly opacity?: number 225 | readonly blendMode?: BlendMode 226 | } 227 | 228 | interface GradientPaint { 229 | readonly type: "GRADIENT_LINEAR" | "GRADIENT_RADIAL" | "GRADIENT_ANGULAR" | "GRADIENT_DIAMOND" 230 | readonly gradientTransform: Transform 231 | readonly gradientStops: ReadonlyArray 232 | 233 | readonly visible?: boolean 234 | readonly opacity?: number 235 | readonly blendMode?: BlendMode 236 | } 237 | 238 | interface ImagePaint { 239 | readonly type: "IMAGE" 240 | readonly scaleMode: "FILL" | "FIT" | "CROP" | "TILE" 241 | readonly imageHash: string | null 242 | readonly imageTransform?: Transform // setting for "CROP" 243 | readonly scalingFactor?: number // setting for "TILE" 244 | readonly filters?: ImageFilters 245 | 246 | readonly visible?: boolean 247 | readonly opacity?: number 248 | readonly blendMode?: BlendMode 249 | } 250 | 251 | type Paint = SolidPaint | GradientPaint | ImagePaint 252 | 253 | interface Guide { 254 | readonly axis: "X" | "Y" 255 | readonly offset: number 256 | } 257 | 258 | interface RowsColsLayoutGrid { 259 | readonly pattern: "ROWS" | "COLUMNS" 260 | readonly alignment: "MIN" | "MAX" | "STRETCH" | "CENTER" 261 | readonly gutterSize: number 262 | 263 | readonly count: number // Infinity when "Auto" is set in the UI 264 | readonly sectionSize?: number // Not set for alignment: "STRETCH" 265 | readonly offset?: number // Not set for alignment: "CENTER" 266 | 267 | readonly visible?: boolean 268 | readonly color?: RGBA 269 | } 270 | 271 | interface GridLayoutGrid { 272 | readonly pattern: "GRID" 273 | readonly sectionSize: number 274 | 275 | readonly visible?: boolean 276 | readonly color?: RGBA 277 | } 278 | 279 | type LayoutGrid = RowsColsLayoutGrid | GridLayoutGrid 280 | 281 | interface ExportSettingsConstraints { 282 | readonly type: "SCALE" | "WIDTH" | "HEIGHT" 283 | readonly value: number 284 | } 285 | 286 | interface ExportSettingsImage { 287 | readonly format: "JPG" | "PNG" 288 | readonly contentsOnly?: boolean // defaults to true 289 | readonly suffix?: string 290 | readonly constraint?: ExportSettingsConstraints 291 | } 292 | 293 | interface ExportSettingsSVG { 294 | readonly format: "SVG" 295 | readonly contentsOnly?: boolean // defaults to true 296 | readonly suffix?: string 297 | readonly svgOutlineText?: boolean // defaults to true 298 | readonly svgIdAttribute?: boolean // defaults to false 299 | readonly svgSimplifyStroke?: boolean // defaults to true 300 | } 301 | 302 | interface ExportSettingsPDF { 303 | readonly format: "PDF" 304 | readonly contentsOnly?: boolean // defaults to true 305 | readonly suffix?: string 306 | } 307 | 308 | type ExportSettings = ExportSettingsImage | ExportSettingsSVG | ExportSettingsPDF 309 | 310 | type WindingRule = "NONZERO" | "EVENODD" 311 | 312 | interface VectorVertex { 313 | readonly x: number 314 | readonly y: number 315 | readonly strokeCap?: StrokeCap 316 | readonly strokeJoin?: StrokeJoin 317 | readonly cornerRadius?: number 318 | readonly handleMirroring?: HandleMirroring 319 | } 320 | 321 | interface VectorSegment { 322 | readonly start: number 323 | readonly end: number 324 | readonly tangentStart?: Vector // Defaults to { x: 0, y: 0 } 325 | readonly tangentEnd?: Vector // Defaults to { x: 0, y: 0 } 326 | } 327 | 328 | interface VectorRegion { 329 | readonly windingRule: WindingRule 330 | readonly loops: ReadonlyArray> 331 | } 332 | 333 | interface VectorNetwork { 334 | readonly vertices: ReadonlyArray 335 | readonly segments: ReadonlyArray 336 | readonly regions?: ReadonlyArray // Defaults to [] 337 | } 338 | 339 | interface VectorPath { 340 | readonly windingRule: WindingRule | "NONE" 341 | readonly data: string 342 | } 343 | 344 | type VectorPaths = ReadonlyArray 345 | 346 | interface LetterSpacing { 347 | readonly value: number 348 | readonly unit: "PIXELS" | "PERCENT" 349 | } 350 | 351 | type LineHeight = { 352 | readonly value: number 353 | readonly unit: "PIXELS" | "PERCENT" 354 | } | { 355 | readonly unit: "AUTO" 356 | } 357 | 358 | type BlendMode = 359 | "PASS_THROUGH" | 360 | "NORMAL" | 361 | "DARKEN" | 362 | "MULTIPLY" | 363 | "LINEAR_BURN" | 364 | "COLOR_BURN" | 365 | "LIGHTEN" | 366 | "SCREEN" | 367 | "LINEAR_DODGE" | 368 | "COLOR_DODGE" | 369 | "OVERLAY" | 370 | "SOFT_LIGHT" | 371 | "HARD_LIGHT" | 372 | "DIFFERENCE" | 373 | "EXCLUSION" | 374 | "HUE" | 375 | "SATURATION" | 376 | "COLOR" | 377 | "LUMINOSITY" 378 | 379 | interface Font { 380 | fontName: FontName 381 | } 382 | 383 | type Reaction = { action: Action, trigger: Trigger } 384 | 385 | type Action = 386 | { readonly type: "BACK" | "CLOSE" } | 387 | { readonly type: "URL", url: string } | 388 | { readonly type: "NODE" 389 | readonly destinationId: string | null 390 | readonly navigation: Navigation 391 | readonly transition: Transition | null 392 | readonly preserveScrollPosition: boolean 393 | 394 | // Only present if navigation == "OVERLAY" and the destination uses 395 | // overlay position type "RELATIVE" 396 | readonly overlayRelativePosition?: Vector 397 | } 398 | 399 | interface SimpleTransition { 400 | readonly type: "DISSOLVE" | "SMART_ANIMATE" 401 | readonly easing: Easing 402 | readonly duration: number 403 | } 404 | 405 | interface DirectionalTransition { 406 | readonly type: "MOVE_IN" | "MOVE_OUT" | "PUSH" | "SLIDE_IN" | "SLIDE_OUT" 407 | readonly direction: "LEFT" | "RIGHT" | "TOP" | "BOTTOM" 408 | readonly matchLayers: boolean 409 | 410 | readonly easing: Easing 411 | readonly duration: number 412 | } 413 | 414 | type Transition = SimpleTransition | DirectionalTransition 415 | 416 | type Trigger = 417 | { readonly type: "ON_CLICK" | "ON_HOVER" | "ON_PRESS" | "ON_DRAG" } | 418 | { readonly type: "AFTER_TIMEOUT", readonly timeout: number } | 419 | { readonly type: "MOUSE_ENTER" | "MOUSE_LEAVE" | "MOUSE_UP" | "MOUSE_DOWN" 420 | readonly delay: number 421 | } 422 | 423 | type Navigation = "NAVIGATE" | "SWAP" | "OVERLAY" 424 | 425 | interface Easing { 426 | readonly type: "EASE_IN" | "EASE_OUT" | "EASE_IN_AND_OUT" | "LINEAR" 427 | } 428 | 429 | type OverflowDirection = "NONE" | "HORIZONTAL" | "VERTICAL" | "BOTH" 430 | 431 | type OverlayPositionType = "CENTER" | "TOP_LEFT" | "TOP_CENTER" | "TOP_RIGHT" | "BOTTOM_LEFT" | "BOTTOM_CENTER" | "BOTTOM_RIGHT" | "MANUAL" 432 | 433 | type OverlayBackground = 434 | { readonly type: "NONE" } | 435 | { readonly type: "SOLID_COLOR", readonly color: RGBA } 436 | 437 | type OverlayBackgroundInteraction = "NONE" | "CLOSE_ON_CLICK_OUTSIDE" 438 | 439 | //////////////////////////////////////////////////////////////////////////////// 440 | // Mixins 441 | 442 | interface BaseNodeMixin { 443 | readonly id: string 444 | readonly parent: (BaseNode & ChildrenMixin) | null 445 | name: string // Note: setting this also sets `autoRename` to false on TextNodes 446 | readonly removed: boolean 447 | toString(): string 448 | remove(): void 449 | 450 | getPluginData(key: string): string 451 | setPluginData(key: string, value: string): void 452 | 453 | // Namespace is a string that must be at least 3 alphanumeric characters, and should 454 | // be a name related to your plugin. Other plugins will be able to read this data. 455 | getSharedPluginData(namespace: string, key: string): string 456 | setSharedPluginData(namespace: string, key: string, value: string): void 457 | setRelaunchData(data: { [command: string]: /* description */ string }): void 458 | } 459 | 460 | interface SceneNodeMixin { 461 | visible: boolean 462 | locked: boolean 463 | } 464 | 465 | interface ChildrenMixin { 466 | readonly children: ReadonlyArray 467 | 468 | appendChild(child: SceneNode): void 469 | insertChild(index: number, child: SceneNode): void 470 | 471 | findChildren(callback?: (node: SceneNode) => boolean): SceneNode[] 472 | findChild(callback: (node: SceneNode) => boolean): SceneNode | null 473 | 474 | /** 475 | * If you only need to search immediate children, it is much faster 476 | * to call node.children.filter(callback) or node.findChildren(callback) 477 | */ 478 | findAll(callback?: (node: SceneNode) => boolean): SceneNode[] 479 | 480 | /** 481 | * If you only need to search immediate children, it is much faster 482 | * to call node.children.find(callback) or node.findChild(callback) 483 | */ 484 | findOne(callback: (node: SceneNode) => boolean): SceneNode | null 485 | } 486 | 487 | interface ConstraintMixin { 488 | constraints: Constraints 489 | } 490 | 491 | interface LayoutMixin { 492 | readonly absoluteTransform: Transform 493 | relativeTransform: Transform 494 | x: number 495 | y: number 496 | rotation: number // In degrees 497 | 498 | readonly width: number 499 | readonly height: number 500 | constrainProportions: boolean 501 | 502 | layoutAlign: "MIN" | "CENTER" | "MAX" | "STRETCH" // applicable only inside auto-layout frames 503 | 504 | resize(width: number, height: number): void 505 | resizeWithoutConstraints(width: number, height: number): void 506 | } 507 | 508 | interface BlendMixin { 509 | opacity: number 510 | blendMode: BlendMode 511 | isMask: boolean 512 | effects: ReadonlyArray 513 | effectStyleId: string 514 | } 515 | 516 | interface ContainerMixin { 517 | expanded: boolean 518 | backgrounds: ReadonlyArray // DEPRECATED: use 'fills' instead 519 | backgroundStyleId: string // DEPRECATED: use 'fillStyleId' instead 520 | } 521 | 522 | type StrokeCap = "NONE" | "ROUND" | "SQUARE" | "ARROW_LINES" | "ARROW_EQUILATERAL" 523 | type StrokeJoin = "MITER" | "BEVEL" | "ROUND" 524 | type HandleMirroring = "NONE" | "ANGLE" | "ANGLE_AND_LENGTH" 525 | 526 | interface GeometryMixin { 527 | fills: ReadonlyArray | PluginAPI['mixed'] 528 | strokes: ReadonlyArray 529 | strokeWeight: number 530 | strokeMiterLimit: number 531 | strokeAlign: "CENTER" | "INSIDE" | "OUTSIDE" 532 | strokeCap: StrokeCap | PluginAPI['mixed'] 533 | strokeJoin: StrokeJoin | PluginAPI['mixed'] 534 | dashPattern: ReadonlyArray 535 | fillStyleId: string | PluginAPI['mixed'] 536 | strokeStyleId: string 537 | outlineStroke(): VectorNode | null 538 | } 539 | 540 | interface CornerMixin { 541 | cornerRadius: number | PluginAPI['mixed'] 542 | cornerSmoothing: number 543 | } 544 | 545 | interface RectangleCornerMixin { 546 | topLeftRadius: number 547 | topRightRadius: number 548 | bottomLeftRadius: number 549 | bottomRightRadius: number 550 | } 551 | 552 | interface ExportMixin { 553 | exportSettings: ReadonlyArray 554 | exportAsync(settings?: ExportSettings): Promise // Defaults to PNG format 555 | } 556 | 557 | interface ReactionMixin { 558 | readonly reactions: ReadonlyArray 559 | } 560 | 561 | interface DefaultShapeMixin extends 562 | BaseNodeMixin, SceneNodeMixin, ReactionMixin, 563 | BlendMixin, GeometryMixin, LayoutMixin, 564 | ExportMixin { 565 | } 566 | 567 | interface DefaultFrameMixin extends 568 | BaseNodeMixin, SceneNodeMixin, ReactionMixin, 569 | ChildrenMixin, ContainerMixin, 570 | GeometryMixin, CornerMixin, RectangleCornerMixin, 571 | BlendMixin, ConstraintMixin, LayoutMixin, 572 | ExportMixin { 573 | 574 | layoutMode: "NONE" | "HORIZONTAL" | "VERTICAL" 575 | counterAxisSizingMode: "FIXED" | "AUTO" // applicable only if layoutMode != "NONE" 576 | horizontalPadding: number // applicable only if layoutMode != "NONE" 577 | verticalPadding: number // applicable only if layoutMode != "NONE" 578 | itemSpacing: number // applicable only if layoutMode != "NONE" 579 | 580 | layoutGrids: ReadonlyArray 581 | gridStyleId: string 582 | clipsContent: boolean 583 | guides: ReadonlyArray 584 | 585 | overflowDirection: OverflowDirection 586 | numberOfFixedChildren: number 587 | 588 | readonly overlayPositionType: OverlayPositionType 589 | readonly overlayBackground: OverlayBackground 590 | readonly overlayBackgroundInteraction: OverlayBackgroundInteraction 591 | } 592 | 593 | //////////////////////////////////////////////////////////////////////////////// 594 | // Nodes 595 | 596 | interface DocumentNode extends BaseNodeMixin { 597 | readonly type: "DOCUMENT" 598 | 599 | readonly children: ReadonlyArray 600 | 601 | appendChild(child: PageNode): void 602 | insertChild(index: number, child: PageNode): void 603 | findChildren(callback?: (node: PageNode) => boolean): Array 604 | findChild(callback: (node: PageNode) => boolean): PageNode | null 605 | 606 | /** 607 | * If you only need to search immediate children, it is much faster 608 | * to call node.children.filter(callback) or node.findChildren(callback) 609 | */ 610 | findAll(callback?: (node: PageNode | SceneNode) => boolean): Array 611 | 612 | /** 613 | * If you only need to search immediate children, it is much faster 614 | * to call node.children.find(callback) or node.findChild(callback) 615 | */ 616 | findOne(callback: (node: PageNode | SceneNode) => boolean): PageNode | SceneNode | null 617 | } 618 | 619 | interface PageNode extends BaseNodeMixin, ChildrenMixin, ExportMixin { 620 | 621 | readonly type: "PAGE" 622 | clone(): PageNode 623 | 624 | guides: ReadonlyArray 625 | selection: ReadonlyArray 626 | selectedTextRange: { node: TextNode, start: number, end: number } | null 627 | 628 | backgrounds: ReadonlyArray 629 | 630 | readonly prototypeStartNode: FrameNode | GroupNode | ComponentNode | InstanceNode | null 631 | } 632 | 633 | interface FrameNode extends DefaultFrameMixin { 634 | readonly type: "FRAME" 635 | clone(): FrameNode 636 | } 637 | 638 | interface GroupNode extends 639 | BaseNodeMixin, SceneNodeMixin, ReactionMixin, 640 | ChildrenMixin, ContainerMixin, BlendMixin, 641 | LayoutMixin, ExportMixin { 642 | 643 | readonly type: "GROUP" 644 | clone(): GroupNode 645 | } 646 | 647 | interface SliceNode extends 648 | BaseNodeMixin, SceneNodeMixin, LayoutMixin, 649 | ExportMixin { 650 | 651 | readonly type: "SLICE" 652 | clone(): SliceNode 653 | } 654 | 655 | interface RectangleNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin, RectangleCornerMixin { 656 | readonly type: "RECTANGLE" 657 | clone(): RectangleNode 658 | } 659 | 660 | interface LineNode extends DefaultShapeMixin, ConstraintMixin { 661 | readonly type: "LINE" 662 | clone(): LineNode 663 | } 664 | 665 | interface EllipseNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin { 666 | readonly type: "ELLIPSE" 667 | clone(): EllipseNode 668 | arcData: ArcData 669 | } 670 | 671 | interface PolygonNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin { 672 | readonly type: "POLYGON" 673 | clone(): PolygonNode 674 | pointCount: number 675 | } 676 | 677 | interface StarNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin { 678 | readonly type: "STAR" 679 | clone(): StarNode 680 | pointCount: number 681 | innerRadius: number 682 | } 683 | 684 | interface VectorNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin { 685 | readonly type: "VECTOR" 686 | clone(): VectorNode 687 | vectorNetwork: VectorNetwork 688 | vectorPaths: VectorPaths 689 | handleMirroring: HandleMirroring | PluginAPI['mixed'] 690 | } 691 | 692 | interface TextNode extends DefaultShapeMixin, ConstraintMixin { 693 | readonly type: "TEXT" 694 | clone(): TextNode 695 | readonly hasMissingFont: boolean 696 | textAlignHorizontal: "LEFT" | "CENTER" | "RIGHT" | "JUSTIFIED" 697 | textAlignVertical: "TOP" | "CENTER" | "BOTTOM" 698 | textAutoResize: "NONE" | "WIDTH_AND_HEIGHT" | "HEIGHT" 699 | paragraphIndent: number 700 | paragraphSpacing: number 701 | autoRename: boolean 702 | 703 | textStyleId: string | PluginAPI['mixed'] 704 | fontSize: number | PluginAPI['mixed'] 705 | fontName: FontName | PluginAPI['mixed'] 706 | textCase: TextCase | PluginAPI['mixed'] 707 | textDecoration: TextDecoration | PluginAPI['mixed'] 708 | letterSpacing: LetterSpacing | PluginAPI['mixed'] 709 | lineHeight: LineHeight | PluginAPI['mixed'] 710 | 711 | characters: string 712 | insertCharacters(start: number, characters: string, useStyle?: "BEFORE" | "AFTER"): void 713 | deleteCharacters(start: number, end: number): void 714 | 715 | getRangeFontSize(start: number, end: number): number | PluginAPI['mixed'] 716 | setRangeFontSize(start: number, end: number, value: number): void 717 | getRangeFontName(start: number, end: number): FontName | PluginAPI['mixed'] 718 | setRangeFontName(start: number, end: number, value: FontName): void 719 | getRangeTextCase(start: number, end: number): TextCase | PluginAPI['mixed'] 720 | setRangeTextCase(start: number, end: number, value: TextCase): void 721 | getRangeTextDecoration(start: number, end: number): TextDecoration | PluginAPI['mixed'] 722 | setRangeTextDecoration(start: number, end: number, value: TextDecoration): void 723 | getRangeLetterSpacing(start: number, end: number): LetterSpacing | PluginAPI['mixed'] 724 | setRangeLetterSpacing(start: number, end: number, value: LetterSpacing): void 725 | getRangeLineHeight(start: number, end: number): LineHeight | PluginAPI['mixed'] 726 | setRangeLineHeight(start: number, end: number, value: LineHeight): void 727 | getRangeFills(start: number, end: number): Paint[] | PluginAPI['mixed'] 728 | setRangeFills(start: number, end: number, value: Paint[]): void 729 | getRangeTextStyleId(start: number, end: number): string | PluginAPI['mixed'] 730 | setRangeTextStyleId(start: number, end: number, value: string): void 731 | getRangeFillStyleId(start: number, end: number): string | PluginAPI['mixed'] 732 | setRangeFillStyleId(start: number, end: number, value: string): void 733 | } 734 | 735 | interface ComponentNode extends DefaultFrameMixin { 736 | readonly type: "COMPONENT" 737 | clone(): ComponentNode 738 | 739 | createInstance(): InstanceNode 740 | description: string 741 | readonly remote: boolean 742 | readonly key: string // The key to use with "importComponentByKeyAsync" 743 | } 744 | 745 | interface InstanceNode extends DefaultFrameMixin { 746 | readonly type: "INSTANCE" 747 | clone(): InstanceNode 748 | masterComponent: ComponentNode 749 | scaleFactor: number 750 | } 751 | 752 | interface BooleanOperationNode extends DefaultShapeMixin, ChildrenMixin, CornerMixin { 753 | readonly type: "BOOLEAN_OPERATION" 754 | clone(): BooleanOperationNode 755 | booleanOperation: "UNION" | "INTERSECT" | "SUBTRACT" | "EXCLUDE" 756 | 757 | expanded: boolean 758 | } 759 | 760 | type BaseNode = 761 | DocumentNode | 762 | PageNode | 763 | SceneNode 764 | 765 | type SceneNode = 766 | SliceNode | 767 | FrameNode | 768 | GroupNode | 769 | ComponentNode | 770 | InstanceNode | 771 | BooleanOperationNode | 772 | VectorNode | 773 | StarNode | 774 | LineNode | 775 | EllipseNode | 776 | PolygonNode | 777 | RectangleNode | 778 | TextNode 779 | 780 | type NodeType = 781 | "DOCUMENT" | 782 | "PAGE" | 783 | "SLICE" | 784 | "FRAME" | 785 | "GROUP" | 786 | "COMPONENT" | 787 | "INSTANCE" | 788 | "BOOLEAN_OPERATION" | 789 | "VECTOR" | 790 | "STAR" | 791 | "LINE" | 792 | "ELLIPSE" | 793 | "POLYGON" | 794 | "RECTANGLE" | 795 | "TEXT" 796 | 797 | //////////////////////////////////////////////////////////////////////////////// 798 | // Styles 799 | type StyleType = "PAINT" | "TEXT" | "EFFECT" | "GRID" 800 | 801 | interface BaseStyle { 802 | readonly id: string 803 | readonly type: StyleType 804 | name: string 805 | description: string 806 | remote: boolean 807 | readonly key: string // The key to use with "importStyleByKeyAsync" 808 | remove(): void 809 | } 810 | 811 | interface PaintStyle extends BaseStyle { 812 | type: "PAINT" 813 | paints: ReadonlyArray 814 | } 815 | 816 | interface TextStyle extends BaseStyle { 817 | type: "TEXT" 818 | fontSize: number 819 | textDecoration: TextDecoration 820 | fontName: FontName 821 | letterSpacing: LetterSpacing 822 | lineHeight: LineHeight 823 | paragraphIndent: number 824 | paragraphSpacing: number 825 | textCase: TextCase 826 | } 827 | 828 | interface EffectStyle extends BaseStyle { 829 | type: "EFFECT" 830 | effects: ReadonlyArray 831 | } 832 | 833 | interface GridStyle extends BaseStyle { 834 | type: "GRID" 835 | layoutGrids: ReadonlyArray 836 | } 837 | 838 | //////////////////////////////////////////////////////////////////////////////// 839 | // Other 840 | 841 | interface Image { 842 | readonly hash: string 843 | getBytesAsync(): Promise 844 | } 845 | } // declare global 846 | 847 | export {} 848 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Table of Contents Generator", 3 | "id": "865650075456407958", 4 | "api": "1.0.0", 5 | "main": "dist/code.js", 6 | "ui": "dist/ui.html", 7 | "editorType": [ 8 | "figma" 9 | ] 10 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "figma-plugin-react-template", 3 | "version": "1.0.0", 4 | "description": "This plugin template uses Typescript. If you are familiar with Javascript, Typescript will look very familiar. In fact, valid Javascript code is already valid Typescript code.", 5 | "license": "ISC", 6 | "scripts": { 7 | "build": "/usr/local/bin/node node_modules/.bin/webpack --mode=production", 8 | "build:watch": "/usr/local/bin/node node_modules/.bin/webpack --mode=development --watch", 9 | "prettier:format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,json}' " 10 | }, 11 | "dependencies": { 12 | "moment": "^2.27.0", 13 | "react": "^16.8.6", 14 | "react-dom": "^16.8.6" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^16.8.24", 18 | "@types/react-dom": "^16.8.5", 19 | "css-loader": "^3.1.0", 20 | "html-webpack-inline-source-plugin": "^0.0.10", 21 | "html-webpack-plugin": "^3.2.0", 22 | "husky": "^3.0.2", 23 | "lint-staged": "^9.2.1", 24 | "prettier": "^1.18.2", 25 | "style-loader": "^0.23.1", 26 | "ts-loader": "^6.0.4", 27 | "tslint": "^5.18.0", 28 | "tslint-react": "^4.0.0", 29 | "typescript": "^3.7.4", 30 | "url-loader": "^2.1.0", 31 | "webpack": "^4.41.4", 32 | "webpack-cli": "^3.3.6" 33 | }, 34 | "husky": { 35 | "hooks": { 36 | "pre-commit": "lint-staged" 37 | } 38 | }, 39 | "lint-staged": { 40 | "src/**/*.{js,jsx,ts,tsx,css,json}": [ 41 | "prettier --write", 42 | "git add" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/app/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/app/assets/plugin-banner-for-publishing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/destefanis/figma-table-of-contents/e10a6b917ef181a947e4d4f549bdd5cb8377317d/src/app/assets/plugin-banner-for-publishing.png -------------------------------------------------------------------------------- /src/app/assets/plugin-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/destefanis/figma-table-of-contents/e10a6b917ef181a947e4d4f549bdd5cb8377317d/src/app/assets/plugin-banner.png -------------------------------------------------------------------------------- /src/app/assets/plugin-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/destefanis/figma-table-of-contents/e10a6b917ef181a947e4d4f549bdd5cb8377317d/src/app/assets/plugin-icon.png -------------------------------------------------------------------------------- /src/app/components/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import "../styles/figma.ds.css"; 3 | import "../styles/custom-ui.css"; 4 | 5 | declare function require(path: string): any; 6 | 7 | const App = ({}) => { 8 | const createTable = React.useCallback(() => { 9 | parent.postMessage({ pluginMessage: { type: "create-table" } }, "*"); 10 | }, []); 11 | 12 | const createPages = React.useCallback(() => { 13 | parent.postMessage({ pluginMessage: { type: "create-pages" } }, "*"); 14 | }, []); 15 | 16 | React.useEffect(() => { 17 | // This is how we read messages sent from the plugin controller 18 | window.onmessage = event => { 19 | const { type, message } = event.data.pluginMessage; 20 | if (type === "done") { 21 | console.log(`Figma Says: ${message}`); 22 | } 23 | }; 24 | }, []); 25 | 26 | return ( 27 |
28 |
29 | 30 |
31 | 38 | 45 |
46 | ); 47 | }; 48 | 49 | export default App; 50 | -------------------------------------------------------------------------------- /src/app/index.html: -------------------------------------------------------------------------------- 1 |
2 | -------------------------------------------------------------------------------- /src/app/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | import App from "./components/App"; 4 | 5 | ReactDOM.render(, document.getElementById("react-page")); 6 | -------------------------------------------------------------------------------- /src/app/styles/custom-ui.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 12px sans-serif; 3 | text-align: center; 4 | margin: 16px; 5 | } 6 | 7 | .main { 8 | display: flex; 9 | flex-flow: column; 10 | } 11 | 12 | .logo-wrapper { 13 | background: #f5f5f5; 14 | border-radius: 6px; 15 | margin: 0; 16 | padding: 16px; 17 | text-align: center; 18 | } 19 | 20 | .button { 21 | margin-top: 16px; 22 | cursor: pointer; 23 | } 24 | 25 | .github-link { 26 | margin: 8px 0; 27 | text-align: center; 28 | } -------------------------------------------------------------------------------- /src/app/styles/figma.ds.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 | .label { 38 | display: -webkit-box; 39 | display: -ms-flexbox; 40 | display: flex; 41 | -webkit-box-align: center; 42 | -ms-flex-align: center; 43 | align-items: center; 44 | height: 32px; 45 | padding: 8px 4px 8px 8px; 46 | cursor: default; 47 | color: rgba(0, 0, 0, 0.3); 48 | background-color: #ffffff; 49 | font-family: "Inter", sans-serif; 50 | font-weight: 400; 51 | font-size: 11px; 52 | line-height: 16px; 53 | letter-spacing: 0.005em; 54 | } 55 | 56 | .section-title { 57 | display: -webkit-box; 58 | display: -ms-flexbox; 59 | display: flex; 60 | -webkit-box-align: center; 61 | -ms-flex-align: center; 62 | align-items: center; 63 | height: 32px; 64 | padding: 8px 4px 8px 8px; 65 | cursor: default; 66 | color: rgba(0, 0, 0, 0.8); 67 | background-color: #ffffff; 68 | font-family: "Inter", sans-serif; 69 | font-weight: 600; 70 | font-size: 11px; 71 | line-height: 16px; 72 | letter-spacing: 0.005em; 73 | } 74 | 75 | .type--pos-small-normal { 76 | font-family: "Inter", sans-serif; 77 | font-weight: 400; 78 | font-size: 11px; 79 | line-height: 16px; 80 | letter-spacing: 0.005em; 81 | } 82 | 83 | .type--pos-small-medium { 84 | font-family: "Inter", sans-serif; 85 | font-weight: 500; 86 | font-size: 11px; 87 | line-height: 16px; 88 | letter-spacing: 0.005em; 89 | } 90 | 91 | .type--pos-small-bold { 92 | font-family: "Inter", sans-serif; 93 | font-weight: 600; 94 | font-size: 11px; 95 | line-height: 16px; 96 | letter-spacing: 0.005em; 97 | } 98 | 99 | .type--pos-medium-normal { 100 | font-family: "Inter", sans-serif; 101 | font-weight: 400; 102 | font-size: 12px; 103 | line-height: 16px; 104 | letter-spacing: 0; 105 | } 106 | 107 | .type--pos-medium-medium { 108 | font-family: "Inter", sans-serif; 109 | font-weight: 500; 110 | font-size: 12px; 111 | line-height: 16px; 112 | letter-spacing: 0; 113 | } 114 | 115 | .type--pos-medium-bold { 116 | font-family: "Inter", sans-serif; 117 | font-weight: 600; 118 | font-size: 12px; 119 | line-height: 16px; 120 | letter-spacing: 0; 121 | } 122 | 123 | .type--pos-large-normal { 124 | font-family: "Inter", sans-serif; 125 | font-weight: 400; 126 | font-size: 13px; 127 | line-height: 24px; 128 | letter-spacing: -0.001em; 129 | } 130 | 131 | .type--pos-large-medium { 132 | font-family: "Inter", sans-serif; 133 | font-weight: 500; 134 | font-size: 13px; 135 | line-height: 24px; 136 | letter-spacing: -0.001em; 137 | } 138 | 139 | .type--pos-large-bold { 140 | font-family: "Inter", sans-serif; 141 | font-weight: 600; 142 | font-size: 13px; 143 | line-height: 24px; 144 | letter-spacing: -0.001em; 145 | } 146 | 147 | .type--pos-xlarge-normal { 148 | font-family: "Inter", sans-serif; 149 | font-weight: 400; 150 | font-size: 14px; 151 | line-height: 24px; 152 | letter-spacing: -0.001em; 153 | } 154 | 155 | .type--pos-xlarge-medium { 156 | font-family: "Inter", sans-serif; 157 | font-weight: 500; 158 | font-size: 14px; 159 | line-height: 24px; 160 | letter-spacing: -0.001em; 161 | } 162 | 163 | .type--pos-xlarge-bold { 164 | font-family: "Inter", sans-serif; 165 | font-weight: 600; 166 | font-size: 14px; 167 | line-height: 24px; 168 | letter-spacing: -0.001em; 169 | } 170 | 171 | .type--figma-black { 172 | color: #000000; 173 | } 174 | 175 | .type--figma-black-3 { 176 | color: rgba(0, 0, 0, 0.3); 177 | } 178 | 179 | .type--figma-black-8 { 180 | color: rgba(0, 0, 0, 0.8); 181 | } 182 | 183 | .type--neg-small-normal { 184 | font-family: "Inter", sans-serif; 185 | font-weight: 400; 186 | font-size: 11px; 187 | line-height: 16px; 188 | letter-spacing: 0.01em; 189 | } 190 | 191 | .type--neg-small-medium { 192 | font-family: "Inter", sans-serif; 193 | font-weight: 500; 194 | font-size: 11px; 195 | line-height: 16px; 196 | letter-spacing: 0.01em; 197 | } 198 | 199 | .type--neg-small-bold { 200 | font-family: "Inter", sans-serif; 201 | font-weight: 600; 202 | font-size: 11px; 203 | line-height: 16px; 204 | letter-spacing: 0.01em; 205 | } 206 | 207 | .type--neg-medium-normal { 208 | font-family: "Inter", sans-serif; 209 | font-weight: 400; 210 | font-size: 12px; 211 | line-height: 16px; 212 | letter-spacing: 0.005em; 213 | } 214 | 215 | .type--neg-medium-medium { 216 | font-family: "Inter", sans-serif; 217 | font-weight: 500; 218 | font-size: 12px; 219 | line-height: 16px; 220 | letter-spacing: 0.005em; 221 | } 222 | 223 | .type--neg-medium-bold { 224 | font-family: "Inter", sans-serif; 225 | font-weight: 600; 226 | font-size: 12px; 227 | line-height: 16px; 228 | letter-spacing: 0.005em; 229 | } 230 | 231 | .type--neg-large-normal { 232 | font-family: "Inter", sans-serif; 233 | font-weight: 400; 234 | font-size: 13px; 235 | line-height: 24px; 236 | letter-spacing: -0.001em; 237 | } 238 | 239 | .type--neg-large-medium { 240 | font-family: "Inter", sans-serif; 241 | font-weight: 500; 242 | font-size: 13px; 243 | line-height: 24px; 244 | letter-spacing: -0.001em; 245 | } 246 | 247 | .type--neg-large-bold { 248 | font-family: "Inter", sans-serif; 249 | font-weight: 600; 250 | font-size: 13px; 251 | line-height: 24px; 252 | letter-spacing: -0.001em; 253 | } 254 | 255 | .type--neg-xlarge-normal { 256 | font-family: "Inter", sans-serif; 257 | font-weight: 400; 258 | font-size: 14px; 259 | line-height: 24px; 260 | letter-spacing: -0.001em; 261 | } 262 | 263 | .type--neg-xlarge-medium { 264 | font-family: "Inter", sans-serif; 265 | font-weight: 500; 266 | font-size: 14px; 267 | line-height: 24px; 268 | letter-spacing: -0.001em; 269 | } 270 | 271 | .type--neg-xlarge-bold { 272 | font-family: "Inter", sans-serif; 273 | font-weight: 600; 274 | font-size: 14px; 275 | line-height: 24px; 276 | letter-spacing: -0.001em; 277 | } 278 | 279 | .type--figma-white { 280 | color: #ffffff; 281 | } 282 | 283 | .type--figma-white-4 { 284 | color: rgba(255, 255, 255, 0.4); 285 | } 286 | 287 | .type--figma-white-8 { 288 | color: rgba(255, 255, 255, 0.8); 289 | } 290 | 291 | .button { 292 | display: inline-block; 293 | -ms-flex-negative: 0; 294 | flex-shrink: 0; 295 | height: 30px; 296 | margin: 1px 0 1px 0; 297 | padding: 5px 16px 5px 16px; 298 | text-decoration: none; 299 | border: 2px solid transparent; 300 | border-radius: 6px; 301 | outline: none; 302 | } 303 | 304 | .button--primary { 305 | font-family: "Inter", sans-serif; 306 | font-weight: 500; 307 | font-size: 11px; 308 | line-height: 16px; 309 | letter-spacing: 0.01em; 310 | color: #ffffff; 311 | background-color: #18a0fb; 312 | } 313 | 314 | .button--primary:enabled:active { 315 | border: 2px solid rgba(0, 0, 0, 0.3); 316 | } 317 | 318 | .button--primary:disabled { 319 | background-color: rgba(0, 0, 0, 0.3); 320 | } 321 | 322 | .button--primary-destructive { 323 | font-family: "Inter", sans-serif; 324 | font-weight: 500; 325 | font-size: 11px; 326 | line-height: 16px; 327 | letter-spacing: 0.01em; 328 | color: #ffffff; 329 | background-color: #f24822; 330 | } 331 | 332 | .button--primary-destructive:enabled:active { 333 | border: 2px solid rgba(0, 0, 0, 0.3); 334 | } 335 | 336 | .button--primary-destructive:disabled { 337 | opacity: 0.4; 338 | } 339 | 340 | .button--secondary { 341 | font-family: "Inter", sans-serif; 342 | font-weight: 500; 343 | font-size: 11px; 344 | line-height: 16px; 345 | letter-spacing: 0.005em; 346 | color: rgba(0, 0, 0, 0.8); 347 | border: 1px solid rgba(0, 0, 0, 0.8); 348 | background-color: #ffffff; 349 | } 350 | 351 | .button--secondary:enabled:active { 352 | padding: 4px 15px 4px 15px; 353 | border: 2px solid #18a0fb; 354 | } 355 | 356 | .button--secondary:disabled { 357 | color: rgba(0, 0, 0, 0.3); 358 | border: 1px solid rgba(0, 0, 0, 0.3); 359 | } 360 | 361 | .button--secondary-destructive { 362 | font-family: "Inter", sans-serif; 363 | font-weight: 500; 364 | font-size: 11px; 365 | line-height: 16px; 366 | letter-spacing: 0.005em; 367 | color: #f24822; 368 | border: 1px solid #f24822; 369 | background-color: #ffffff; 370 | } 371 | 372 | .button--secondary-destructive:enabled:active { 373 | padding: 4px 15px 4px 15px; 374 | border: 2px solid #f24822; 375 | } 376 | 377 | .button--secondary-destructive:disabled { 378 | opacity: 0.4; 379 | } 380 | 381 | .button--margin-right { 382 | margin-right: 8px; 383 | } 384 | 385 | .input { 386 | font-family: "Inter", sans-serif; 387 | font-weight: 400; 388 | font-size: 11px; 389 | line-height: 16px; 390 | letter-spacing: 0.005em; 391 | position: relative; 392 | display: -webkit-box; 393 | display: -ms-flexbox; 394 | display: flex; 395 | overflow: visible; 396 | -webkit-box-align: center; 397 | -ms-flex-align: center; 398 | align-items: center; 399 | width: 100%; 400 | height: 30px; 401 | margin: 1px 0 1px 0; 402 | padding: 8px 4px 8px 7px; 403 | color: rgba(0, 0, 0, 0.8); 404 | border: 1px solid transparent; 405 | border-radius: 2px; 406 | outline: none; 407 | background-color: #ffffff; 408 | } 409 | 410 | .input:hover { 411 | color: rgba(0, 0, 0, 0.8); 412 | border: 1px solid rgba(0, 0, 0, 0.1); 413 | } 414 | 415 | .input::-moz-selection { 416 | color: #000000; 417 | background-color: rgba(24, 145, 251, 0.3); 418 | } 419 | 420 | .input::selection { 421 | color: #000000; 422 | background-color: rgba(24, 145, 251, 0.3); 423 | } 424 | 425 | .input::-webkit-input-placeholder { 426 | color: rgba(0, 0, 0, 0.3); 427 | border: 1px solid transparent; 428 | } 429 | 430 | .input:-ms-input-placeholder { 431 | color: rgba(0, 0, 0, 0.3); 432 | border: 1px solid transparent; 433 | } 434 | 435 | .input::-ms-input-placeholder { 436 | color: rgba(0, 0, 0, 0.3); 437 | border: 1px solid transparent; 438 | } 439 | 440 | .input::placeholder { 441 | color: rgba(0, 0, 0, 0.3); 442 | border: 1px solid transparent; 443 | } 444 | 445 | .input:not(:disabled):not(:hover):placeholder-shown { 446 | border: 1px solid transparent; 447 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcAAAAABCAYAAABJ5n7WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgSURBVHgB7cMBCQAACMTAiR3sX1TQHr+DK2B+I0lSjj29qAEYlIbeBgAAAABJRU5ErkJggg=="); 448 | background-repeat: no-repeat; 449 | background-position: center bottom -0.9px; 450 | background-size: calc(100% - 10px) 1px; 451 | } 452 | 453 | .input:not(:disabled):focus:placeholder-shown { 454 | border: 2px solid #18a0fb; 455 | } 456 | 457 | .input:not(:disabled):focus:not(:placeholder-shown) { 458 | padding-left: 6px; 459 | } 460 | 461 | .input:disabled:hover { 462 | border: 1px solid transparent; 463 | } 464 | 465 | .input:active, 466 | .input:focus { 467 | padding: 8px 4px 8px 6px; 468 | color: #000000; 469 | border: 2px solid #18a0fb; 470 | border-radius: 2px; 471 | } 472 | 473 | .input:disabled { 474 | position: relative; 475 | color: rgba(0, 0, 0, 0.3); 476 | } 477 | 478 | .input:disabled:active { 479 | padding: 8px 4px 8px 7px; 480 | } 481 | 482 | .input-icon { 483 | position: relative; 484 | width: 100%; 485 | } 486 | 487 | .input-icon__icon { 488 | position: absolute; 489 | top: -1px; 490 | left: 0; 491 | width: 32px; 492 | height: 32px; 493 | } 494 | 495 | .input-icon__input { 496 | font-family: "Inter", sans-serif; 497 | font-weight: 400; 498 | font-size: 11px; 499 | line-height: 16px; 500 | letter-spacing: 0.005em; 501 | display: -webkit-box; 502 | display: -ms-flexbox; 503 | display: flex; 504 | -webkit-box-align: center; 505 | -ms-flex-align: center; 506 | align-items: center; 507 | width: 100%; 508 | height: 30px; 509 | margin: 1px 0 1px 0; 510 | padding: 8px 4px 8px 0; 511 | text-indent: 32px; 512 | color: rgba(0, 0, 0, 0.8); 513 | border: 1px solid transparent; 514 | border-radius: 2px; 515 | outline: none; 516 | background-color: #ffffff; 517 | } 518 | 519 | .input-icon__input:hover { 520 | color: rgba(0, 0, 0, 0.8); 521 | border: 1px solid rgba(0, 0, 0, 0.1); 522 | } 523 | 524 | .input-icon__input:active, 525 | .input-icon__input:focus { 526 | margin-left: -1px; 527 | padding: 8px 4px 8px 0; 528 | color: #000000; 529 | border: 2px solid #18a0fb; 530 | border-radius: 2px; 531 | } 532 | 533 | .input-icon__input::-moz-selection { 534 | color: #000000; 535 | background-color: rgba(24, 145, 251, 0.3); 536 | } 537 | 538 | .input-icon__input::selection { 539 | color: #000000; 540 | background-color: rgba(24, 145, 251, 0.3); 541 | } 542 | 543 | .input-icon__input::-webkit-input-placeholder { 544 | color: rgba(0, 0, 0, 0.3); 545 | } 546 | 547 | .input-icon__input:-ms-input-placeholder { 548 | color: rgba(0, 0, 0, 0.3); 549 | } 550 | 551 | .input-icon__input::-ms-input-placeholder { 552 | color: rgba(0, 0, 0, 0.3); 553 | } 554 | 555 | .input-icon__input::placeholder { 556 | color: rgba(0, 0, 0, 0.3); 557 | } 558 | 559 | .input-icon__input:not(:disabled):not(:hover):placeholder-shown { 560 | border: 1px solid transparent; 561 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcAAAAABCAYAAABJ5n7WAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgSURBVHgB7cMBCQAACMTAiR3sX1TQHr+DK2B+I0lSjj29qAEYlIbeBgAAAABJRU5ErkJggg=="); 562 | background-repeat: no-repeat; 563 | background-position: center bottom -0.9px; 564 | background-size: calc(100% - 10px) 1px; 565 | } 566 | 567 | .input-icon__input:not(:disabled):focus:placeholder-shown { 568 | border: 2px solid #18a0fb; 569 | } 570 | 571 | .input-icon__input:not(:disabled):focus:not(:placeholder-shown) { 572 | padding-left: 0; 573 | } 574 | 575 | .input-icon__input:disabled { 576 | color: rgba(0, 0, 0, 0.3); 577 | } 578 | 579 | .input-icon__input:disabled:hover { 580 | border: 1px solid transparent; 581 | } 582 | 583 | .textarea { 584 | font-family: "Inter", sans-serif; 585 | font-weight: 400; 586 | font-size: 11px; 587 | line-height: 16px; 588 | letter-spacing: 0.005em; 589 | display: -webkit-box; 590 | display: -ms-flexbox; 591 | display: flex; 592 | overflow: hidden; 593 | -webkit-box-align: center; 594 | -ms-flex-align: center; 595 | align-items: center; 596 | width: calc(100% - 16px); 597 | min-height: 62px; 598 | margin: 1px 8px 1px 8px; 599 | padding: 7px 7px 7px 7px; 600 | resize: none; 601 | color: rgba(0, 0, 0, 0.8); 602 | border: 1px solid rgba(0, 0, 0, 0.1); 603 | border-radius: 2px; 604 | outline: none; 605 | background-color: #ffffff; 606 | } 607 | 608 | .textarea:active, 609 | .textarea:focus { 610 | padding: 6px 6px 6px 6px; 611 | color: #000000; 612 | border: 2px solid #18a0fb; 613 | border-radius: 2px; 614 | } 615 | 616 | .textarea::-moz-selection { 617 | color: #000000; 618 | background-color: rgba(24, 145, 251, 0.3); 619 | } 620 | 621 | .textarea::selection { 622 | color: #000000; 623 | background-color: rgba(24, 145, 251, 0.3); 624 | } 625 | 626 | .textarea::-webkit-input-placeholder { 627 | color: rgba(0, 0, 0, 0.3); 628 | } 629 | 630 | .textarea:-ms-input-placeholder { 631 | color: rgba(0, 0, 0, 0.3); 632 | } 633 | 634 | .textarea::-ms-input-placeholder { 635 | color: rgba(0, 0, 0, 0.3); 636 | } 637 | 638 | .textarea::placeholder { 639 | color: rgba(0, 0, 0, 0.3); 640 | } 641 | 642 | .textarea:disabled { 643 | color: rgba(0, 0, 0, 0.3); 644 | } 645 | 646 | .textarea:disabled:focus, 647 | .textarea:disabled:active { 648 | padding: 7px 7px 7px 7px; 649 | border: 1px solid rgba(0, 0, 0, 0.1); 650 | } 651 | 652 | .select-menu { 653 | position: relative; 654 | display: block; 655 | -webkit-box-sizing: border-box; 656 | box-sizing: border-box; 657 | width: 100%; 658 | cursor: default; 659 | } 660 | 661 | .select-menu:disabled { 662 | opacity: 0.3; 663 | } 664 | 665 | .select-menu__button { 666 | font-family: "Inter", sans-serif; 667 | font-weight: 400; 668 | font-size: 11px; 669 | line-height: 16px; 670 | letter-spacing: 0.005em; 671 | position: relative; 672 | display: -webkit-box; 673 | display: -ms-flexbox; 674 | display: flex; 675 | -webkit-box-pack: justify; 676 | -ms-flex-pack: justify; 677 | justify-content: space-between; 678 | width: 100%; 679 | height: 30px; 680 | margin: 1px 0 1px 0; 681 | padding: 6px 0 6px 8px; 682 | cursor: default; 683 | color: rgba(0, 0, 0, 0.8); 684 | border: 1px solid transparent; 685 | border-radius: 2px; 686 | background-color: #ffffff; 687 | } 688 | 689 | .select-menu__button:hover { 690 | border: 1px solid rgba(0, 0, 0, 0.1); 691 | } 692 | 693 | .select-menu__button:hover span:after { 694 | opacity: 0; 695 | } 696 | 697 | .select-menu__button:hover .select-menu__icon { 698 | opacity: 1; 699 | } 700 | 701 | .select-menu__button:focus, 702 | .select-menu__button:active { 703 | width: 100%; 704 | padding: 5px 0 5px 7px; 705 | border: 2px solid #18a0fb; 706 | outline: none; 707 | } 708 | 709 | .select-menu__button:focus span:after, 710 | .select-menu__button:active span:after { 711 | opacity: 0; 712 | } 713 | 714 | .select-menu__button:focus .select-menu__icon, 715 | .select-menu__button:active .select-menu__icon { 716 | top: -1px; 717 | right: -1px; 718 | opacity: 1; 719 | } 720 | 721 | .select-menu__button--active:hover { 722 | width: 100%; 723 | padding: 5px 0 5px 7px; 724 | border: 2px solid #18a0fb; 725 | outline: none; 726 | } 727 | 728 | .select-menu__button-label { 729 | display: inline-block; 730 | text-align: left; 731 | } 732 | 733 | .select-menu__button-label:after { 734 | display: inline-block; 735 | width: 7px; 736 | height: 5px; 737 | margin-top: 6px; 738 | margin-left: 4px; 739 | content: ""; 740 | background-color: transparent; 741 | 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"); 742 | } 743 | 744 | .select-menu__icon { 745 | position: absolute; 746 | top: 0; 747 | right: 0; 748 | width: 30px; 749 | height: 30px; 750 | opacity: 0; 751 | 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"); 752 | background-repeat: no-repeat; 753 | background-position: center center; 754 | } 755 | 756 | .select-menu__list { 757 | position: absolute; 758 | z-index: 2; 759 | display: none; 760 | -webkit-box-orient: vertical; 761 | -webkit-box-direction: normal; 762 | -ms-flex-direction: column; 763 | flex-direction: column; 764 | width: 100%; 765 | margin: 0; 766 | padding: 8px 0 8px 0; 767 | border-radius: 2px; 768 | background-color: #222222; 769 | -webkit-box-shadow: 0 5px 17px rgba(0, 0, 0, 0.2), 770 | 0 2px 7px rgba(0, 0, 0, 0.15); 771 | box-shadow: 0 5px 17px rgba(0, 0, 0, 0.2), 0 2px 7px rgba(0, 0, 0, 0.15); 772 | } 773 | 774 | .select-menu__list--active { 775 | display: -webkit-box; 776 | display: -ms-flexbox; 777 | display: flex; 778 | } 779 | 780 | .select-menu__list-item { 781 | font-family: "Inter", sans-serif; 782 | font-weight: 400; 783 | font-size: 12px; 784 | line-height: 16px; 785 | letter-spacing: 0.005em; 786 | display: -webkit-box; 787 | display: -ms-flexbox; 788 | display: flex; 789 | -webkit-box-align: center; 790 | -ms-flex-align: center; 791 | align-items: center; 792 | width: 100%; 793 | height: 24px; 794 | padding: 0 8px 0 4px; 795 | color: #ffffff; 796 | } 797 | 798 | .select-menu__list-item--active .select-menu__list-item-icon { 799 | opacity: 1 !important; 800 | } 801 | 802 | .select-menu__list-item:hover { 803 | background-color: #18a0fb; 804 | } 805 | 806 | .select-menu__list-item-text { 807 | display: -webkit-box; 808 | display: -ms-flexbox; 809 | display: flex; 810 | -webkit-box-align: center; 811 | -ms-flex-align: center; 812 | align-items: center; 813 | width: 100%; 814 | height: 100%; 815 | padding: 0 0 0 4px; 816 | } 817 | 818 | .select-menu__list-item-icon { 819 | display: block; 820 | -ms-flex-negative: 0; 821 | flex-shrink: 0; 822 | width: 24px; 823 | height: 24px; 824 | opacity: 0; 825 | 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"); 826 | background-repeat: no-repeat; 827 | background-position: center center; 828 | } 829 | 830 | .select-menu__divider { 831 | margin: 0; 832 | } 833 | 834 | .select-menu__divider-line { 835 | display: block; 836 | height: 1px; 837 | margin: 8px 0 7px; 838 | background-color: rgba(255, 255, 255, 0.2); 839 | } 840 | 841 | .select-menu__divider-label { 842 | font-family: "Inter", sans-serif; 843 | font-weight: 400; 844 | font-size: 12px; 845 | line-height: 16px; 846 | letter-spacing: 0.005em; 847 | display: -webkit-box; 848 | display: -ms-flexbox; 849 | display: flex; 850 | -webkit-box-align: center; 851 | -ms-flex-align: center; 852 | align-items: center; 853 | height: 32px; 854 | margin-top: 8px; 855 | padding: 8px 8px 0 32px; 856 | color: rgba(255, 255, 255, 0.4); 857 | border-top: 1px solid rgba(255, 255, 255, 0.2); 858 | } 859 | 860 | .select-menu__divider-label--first { 861 | height: 24px; 862 | margin-top: 0; 863 | padding: 0 8px 0 32px; 864 | border-top: none; 865 | } 866 | 867 | .switch { 868 | font-family: "Inter", sans-serif; 869 | font-weight: 400; 870 | font-size: 11px; 871 | line-height: 16px; 872 | letter-spacing: 0.005em; 873 | position: relative; 874 | display: -webkit-box; 875 | display: -ms-flexbox; 876 | display: flex; 877 | -webkit-box-align: center; 878 | -ms-flex-align: center; 879 | align-items: center; 880 | -webkit-box-orient: horizontal; 881 | -webkit-box-direction: normal; 882 | -ms-flex-direction: row; 883 | flex-direction: row; 884 | height: 32px; 885 | cursor: default; 886 | } 887 | 888 | .switch__toggle { 889 | display: none; 890 | } 891 | 892 | .switch__toggle:checked + label:before { 893 | background-color: #000000; 894 | } 895 | 896 | .switch__toggle:checked + label:after { 897 | -webkit-transform: translateX(14px); 898 | transform: translateX(14px); 899 | } 900 | 901 | .switch__toggle:disabled + label { 902 | opacity: 0.3; 903 | } 904 | 905 | .switch__label { 906 | display: -webkit-box; 907 | display: -ms-flexbox; 908 | display: flex; 909 | width: 100%; 910 | padding-left: 40px; 911 | -webkit-user-select: none; 912 | -moz-user-select: none; 913 | -ms-user-select: none; 914 | user-select: none; 915 | } 916 | 917 | .switch__label:before { 918 | position: absolute; 919 | top: 10px; 920 | left: 6px; 921 | display: block; 922 | width: 24px; 923 | height: 10px; 924 | content: ""; 925 | -webkit-transition: background-color 0 0.2s; 926 | transition: background-color 0 0.2s; 927 | border: 1px solid #000000; 928 | border-radius: 6px; 929 | background-color: #ffffff; 930 | } 931 | 932 | .switch__label:after { 933 | position: absolute; 934 | top: 10px; 935 | left: 6px; 936 | display: block; 937 | width: 10px; 938 | height: 10px; 939 | content: ""; 940 | -webkit-transition: -webkit-transform 0.2s; 941 | transition: -webkit-transform 0.2s; 942 | transition: transform 0.2s; 943 | transition: transform 0.2s, -webkit-transform 0.2s; 944 | border: 1px solid #000000; 945 | border-radius: 50%; 946 | background-color: white; 947 | } 948 | 949 | .checkbox { 950 | font-family: "Inter", sans-serif; 951 | font-weight: 400; 952 | font-size: 11px; 953 | line-height: 16px; 954 | letter-spacing: 0.005em; 955 | position: relative; 956 | display: -webkit-box; 957 | display: -ms-flexbox; 958 | display: flex; 959 | -webkit-box-align: center; 960 | -ms-flex-align: center; 961 | align-items: center; 962 | -webkit-box-orient: horizontal; 963 | -webkit-box-direction: normal; 964 | -ms-flex-direction: row; 965 | flex-direction: row; 966 | height: 32px; 967 | cursor: default; 968 | } 969 | 970 | .checkbox__box { 971 | display: none; 972 | } 973 | 974 | .checkbox__box:checked + label:before { 975 | border: 1px solid #18a0fb; 976 | background-color: #18a0fb; 977 | 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"); 978 | background-repeat: no-repeat; 979 | background-position: 1px 2px; 980 | } 981 | 982 | .checkbox__box:disabled + label { 983 | opacity: 0.3; 984 | } 985 | 986 | .checkbox__box:checked:disabled + label:before { 987 | border: 1px solid rgba(0, 0, 0, 0.8); 988 | background-color: rgba(0, 0, 0, 0.8); 989 | } 990 | 991 | .checkbox__label { 992 | display: -webkit-box; 993 | display: -ms-flexbox; 994 | display: flex; 995 | width: 100%; 996 | -webkit-user-select: none; 997 | -moz-user-select: none; 998 | -ms-user-select: none; 999 | user-select: none; 1000 | } 1001 | 1002 | .checkbox__label:before { 1003 | display: block; 1004 | width: 10px; 1005 | height: 10px; 1006 | margin: 2px 10px 0 10px; 1007 | content: ""; 1008 | border: 1px solid rgba(0, 0, 0, 0.8); 1009 | border-radius: 2px; 1010 | } 1011 | 1012 | .divider { 1013 | display: block; 1014 | width: 100%; 1015 | height: 1px; 1016 | margin: 8px 0 8px 0; 1017 | padding: 0; 1018 | background-color: #e5e5e5; 1019 | } 1020 | 1021 | .visual-bell { 1022 | display: -webkit-box; 1023 | display: -ms-flexbox; 1024 | display: flex; 1025 | -webkit-box-align: center; 1026 | -ms-flex-align: center; 1027 | align-items: center; 1028 | -ms-flex-item-align: start; 1029 | align-self: flex-start; 1030 | -ms-flex-negative: 1; 1031 | flex-shrink: 1; 1032 | width: 100%; 1033 | height: 36px; 1034 | padding: 0 16px 0 16px; 1035 | -webkit-transition: all 0.3s ease-out; 1036 | transition: all 0.3s ease-out; 1037 | border: 1px solid rgba(0, 0, 0, 0.1); 1038 | border-radius: 5px; 1039 | background-color: #222222; 1040 | -webkit-box-shadow: 0 5px 17px rgba(0, 0, 0, 0.2), 1041 | 0 2px 7px rgba(0, 0, 0, 0.15); 1042 | box-shadow: 0 5px 17px rgba(0, 0, 0, 0.2), 0 2px 7px rgba(0, 0, 0, 0.15); 1043 | } 1044 | 1045 | .visual-bell__msg { 1046 | font-family: "Inter", sans-serif; 1047 | font-weight: 400; 1048 | font-size: 14px; 1049 | line-height: 24px; 1050 | letter-spacing: -0.001em; 1051 | display: block; 1052 | color: #ffffff; 1053 | } 1054 | 1055 | .visual-bell__spinner-container { 1056 | display: none; 1057 | overflow: hidden; 1058 | width: 24px; 1059 | height: 24px; 1060 | margin-right: 8px; 1061 | margin-left: -4px; 1062 | } 1063 | 1064 | .visual-bell__spinner { 1065 | display: block; 1066 | width: 24px; 1067 | height: 24px; 1068 | -webkit-animation: rotating 1s linear infinite; 1069 | animation: rotating 1s linear infinite; 1070 | 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"); 1071 | background-repeat: none; 1072 | } 1073 | 1074 | .visual-bell--loading .visual-bell__spinner-container { 1075 | display: block; 1076 | } 1077 | 1078 | .visual-bell--hidden { 1079 | margin-top: 8px; 1080 | opacity: 0; 1081 | } 1082 | 1083 | .visual-bell--error { 1084 | border: 1px solid #f24822; 1085 | background-color: #f24822; 1086 | } 1087 | 1088 | @-webkit-keyframes rotating { 1089 | from { 1090 | -webkit-transform: rotate(0deg); 1091 | transform: rotate(0deg); 1092 | } 1093 | to { 1094 | -webkit-transform: rotate(360deg); 1095 | transform: rotate(360deg); 1096 | } 1097 | } 1098 | 1099 | @keyframes rotating { 1100 | from { 1101 | -webkit-transform: rotate(0deg); 1102 | transform: rotate(0deg); 1103 | } 1104 | to { 1105 | -webkit-transform: rotate(360deg); 1106 | transform: rotate(360deg); 1107 | } 1108 | } 1109 | 1110 | .onboarding-tip { 1111 | display: -webkit-box; 1112 | display: -ms-flexbox; 1113 | display: flex; 1114 | -webkit-box-align: top; 1115 | -ms-flex-align: top; 1116 | align-items: top; 1117 | -webkit-box-orient: horizontal; 1118 | -webkit-box-direction: normal; 1119 | -ms-flex-direction: row; 1120 | flex-direction: row; 1121 | padding: 0 16px 0 0; 1122 | cursor: default; 1123 | } 1124 | 1125 | .onboarding-tip__icon { 1126 | width: 32px; 1127 | height: 32px; 1128 | margin-right: 8px; 1129 | } 1130 | 1131 | .onboarding-tip__msg { 1132 | padding: 8px 0 8px 0; 1133 | color: rgba(0, 0, 0, 0.8); 1134 | font-family: "Inter", sans-serif; 1135 | font-weight: 400; 1136 | font-size: 11px; 1137 | line-height: 16px; 1138 | letter-spacing: 0.005em; 1139 | } 1140 | 1141 | .onboarding-tip__msg a:link, 1142 | .onboarding-tip__msg a:hover, 1143 | .onboarding-tip__msg a:active, 1144 | .onboarding-tip__msg a:visited { 1145 | text-decoration: none; 1146 | color: #18a0fb; 1147 | } 1148 | 1149 | .onboarding-tip--hidden { 1150 | display: none; 1151 | } 1152 | 1153 | .onboarding-tip--light { 1154 | color: rgba(0, 0, 0, 0.3); 1155 | } 1156 | 1157 | .onboarding-tip--pt5 { 1158 | padding-top: 8px; 1159 | } 1160 | 1161 | .disclosure { 1162 | position: relative; 1163 | display: block; 1164 | width: 100%; 1165 | margin: 0; 1166 | padding: 0; 1167 | list-style-type: none; 1168 | } 1169 | 1170 | .disclosure__item { 1171 | font-family: "Inter", sans-serif; 1172 | font-weight: 400; 1173 | font-size: 11px; 1174 | line-height: 16px; 1175 | letter-spacing: 0.005em; 1176 | display: -webkit-box; 1177 | display: -ms-flexbox; 1178 | display: flex; 1179 | -webkit-box-orient: vertical; 1180 | -webkit-box-direction: normal; 1181 | -ms-flex-direction: column; 1182 | flex-direction: column; 1183 | border-bottom: 1px solid #e5e5e5; 1184 | background-color: #ffffff; 1185 | } 1186 | 1187 | .disclosure__item:last-child { 1188 | border-bottom: 1px solid transparent; 1189 | } 1190 | 1191 | .disclosure__label { 1192 | font-family: "Inter", sans-serif; 1193 | font-weight: 400; 1194 | font-size: 11px; 1195 | line-height: 16px; 1196 | letter-spacing: 0.005em; 1197 | position: relative; 1198 | display: -webkit-box; 1199 | display: -ms-flexbox; 1200 | display: flex; 1201 | -webkit-box-align: center; 1202 | -ms-flex-align: center; 1203 | align-items: center; 1204 | height: 32px; 1205 | padding: 0 8px 0 24px; 1206 | cursor: default; 1207 | -webkit-user-select: none; 1208 | -moz-user-select: none; 1209 | -ms-user-select: none; 1210 | user-select: none; 1211 | color: rgba(0, 0, 0, 0.8); 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 | font-family: "Inter", sans-serif; 1234 | font-weight: 400; 1235 | font-size: 11px; 1236 | line-height: 16px; 1237 | letter-spacing: 0.005em; 1238 | display: none; 1239 | padding: 8px 8px 8px 24px; 1240 | color: rgba(0, 0, 0, 0.8); 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 | border-bottom: 1px solid transparent; 1254 | } 1255 | 1256 | .disclosure--expanded .disclosure__label:before { 1257 | opacity: 0.8; 1258 | 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"); 1259 | } 1260 | 1261 | .icon { 1262 | width: 32px; 1263 | height: 32px; 1264 | cursor: default; 1265 | color: #000000; 1266 | background-repeat: no-repeat; 1267 | background-position: 0 0; 1268 | } 1269 | 1270 | .icon--black-3 { 1271 | color: rgba(0, 0, 0, 0.3); 1272 | background-position: 0 -32px; 1273 | } 1274 | 1275 | .icon--blue { 1276 | color: #18a0fb; 1277 | background-position: 0 -64px; 1278 | } 1279 | 1280 | .icon--white { 1281 | color: #18a0fb; 1282 | background-position: 0 -96px; 1283 | } 1284 | 1285 | .icon--button { 1286 | width: 32px; 1287 | height: 32px; 1288 | border: 1px solid transparent; 1289 | border-radius: 2px; 1290 | outline: none; 1291 | background-position: -1px -1px; 1292 | } 1293 | 1294 | .icon--button:hover { 1295 | background-color: rgba(0, 0, 0, 0.06); 1296 | } 1297 | 1298 | .icon--button:active { 1299 | border: 1px solid #18a0fb; 1300 | background-color: rgba(0, 0, 0, 0.06); 1301 | -webkit-box-shadow: inset 0 0 0 1px #18a0fb; 1302 | box-shadow: inset 0 0 0 1px #18a0fb; 1303 | } 1304 | 1305 | .icon--button:disabled { 1306 | opacity: 0.37; 1307 | } 1308 | 1309 | .icon--selected { 1310 | color: #ffffff; 1311 | border: 1px solid transparent; 1312 | background-color: #18a0fb; 1313 | background-position: -1px -97px; 1314 | } 1315 | 1316 | .icon--selected:hover { 1317 | color: #ffffff; 1318 | background-color: #18a0fb; 1319 | } 1320 | 1321 | .icon--selected:active { 1322 | color: #ffffff; 1323 | background-color: #18a0fb; 1324 | } 1325 | 1326 | .icon--text { 1327 | display: -webkit-box; 1328 | display: -ms-flexbox; 1329 | display: flex; 1330 | -webkit-box-align: center; 1331 | -ms-flex-align: center; 1332 | align-items: center; 1333 | -webkit-box-pack: center; 1334 | -ms-flex-pack: center; 1335 | justify-content: center; 1336 | font-family: "Inter", sans-serif; 1337 | font-size: 11px; 1338 | } 1339 | 1340 | .icon--adjust { 1341 | background-image: url("data:image/svg+xml,%3Csvg fill='none' height='128' viewBox='0 0 32 128' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-rule='evenodd' fill-rule='evenodd'%3E%3Cg fill='%23000'%3E%3Cpath d='m12 16.05v-7.05h1v7.05c1.1411.2316 2 1.2405 2 2.45s-.8589 2.2184-2 2.45v2.05h-1v-2.05c-1.1411-.2316-2-1.2405-2-2.45s.8589-2.2184 2-2.45zm2 2.45c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5z' fill-opacity='.8'/%3E%3Cpath d='m19 23h1v-7.05c1.1411-.2316 2-1.2405 2-2.45s-.8589-2.2184-2-2.45v-2.05h-1v2.05c-1.1411.2316-2 1.2405-2 2.45s.8589 2.2184 2 2.45zm2-9.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5 1.5-.6716 1.5-1.5z' fill-opacity='.8'/%3E%3Cpath d='m12 48.05v-7.05h1v7.05c1.1411.2316 2 1.2405 2 2.45s-.8589 2.2184-2 2.45v2.05h-1v-2.05c-1.1411-.2316-2-1.2405-2-2.45s.8589-2.2184 2-2.45zm2 2.45c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5z' fill-opacity='.3'/%3E%3Cpath d='m19 55h1v-7.05c1.1411-.2316 2-1.2405 2-2.45s-.8589-2.2184-2-2.45v-2.05h-1v2.05c-1.1411.2316-2 1.2405-2 2.45s.8589 2.2184 2 2.45zm2-9.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5 1.5-.6716 1.5-1.5z' fill-opacity='.3'/%3E%3C/g%3E%3Cpath d='m12 80.05v-7.05h1v7.05c1.1411.2316 2 1.2405 2 2.45s-.8589 2.2184-2 2.45v2.05h-1v-2.05c-1.1411-.2316-2-1.2405-2-2.45s.8589-2.2184 2-2.45zm2 2.45c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5z' fill='%2318a0fb'/%3E%3Cpath d='m19 87h1v-7.05c1.1411-.2316 2-1.2405 2-2.45s-.8589-2.2184-2-2.45v-2.05h-1v2.05c-1.1411.2316-2 1.2405-2 2.45s.8589 2.2184 2 2.45zm2-9.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5 1.5-.6716 1.5-1.5z' fill='%2318a0fb'/%3E%3Cpath d='m12 112.05v-7.05h1v7.05c1.1411.232 2 1.241 2 2.45s-.8589 2.218-2 2.45v2.05h-1v-2.05c-1.1411-.232-2-1.241-2-2.45s.8589-2.218 2-2.45zm2 2.45c0 .828-.6716 1.5-1.5 1.5s-1.5-.672-1.5-1.5.6716-1.5 1.5-1.5 1.5.672 1.5 1.5z' fill='%23fff'/%3E%3Cpath d='m19 119h1v-7.05c1.1411-.232 2-1.241 2-2.45s-.8589-2.218-2-2.45v-2.05h-1v2.05c-1.1411.232-2 1.241-2 2.45s.8589 2.218 2 2.45zm2-9.5c0-.828-.6716-1.5-1.5-1.5s-1.5.672-1.5 1.5.6716 1.5 1.5 1.5 1.5-.672 1.5-1.5z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); 1342 | } 1343 | 1344 | .icon--alert { 1345 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath clip-rule="evenodd" d="m21.25 17.3929c0 .72.4349 1.3385 1.0563 1.6071.2127.0919.4473.1429.6937.1429v.8571h-14v-.8571c.24643 0 .48097-.051.69365-.1429.62145-.2686 1.05635-.8871 1.05635-1.6071v-3.3929c0-3.3137 2.3505-6 5.25-6s5.25 2.6863 5.25 6zm-1-3.3929v3.3929c0 .5999.1921 1.155.5182 1.6071h-9.5364c.3261-.4521.5182-1.0072.5182-1.6071v-3.3929c0-2.891 2.024-5 4.25-5s4.25 2.109 4.25 5z" fill-opacity=".8" fill-rule="evenodd"/%3E%3Cpath d="m16 23c-1.1046 0-2-.8954-2-2h-1c0 1.6569 1.3431 3 3 3s3-1.3431 3-3h-1c0 1.1046-.8954 2-2 2z" fill-opacity=".8"/%3E%3Cpath clip-rule="evenodd" d="m21.25 49.3929c0 .72.4349 1.3385 1.0563 1.6071.2127.0919.4473.1429.6937.1429v.8571h-14v-.8571c.24643 0 .48097-.051.69365-.1429.62145-.2686 1.05635-.8871 1.05635-1.6071v-3.3929c0-3.3137 2.3505-6 5.25-6s5.25 2.6863 5.25 6zm-1-3.3929v3.3929c0 .5999.1921 1.155.5182 1.6071h-9.5364c.3261-.4521.5182-1.0072.5182-1.6071v-3.3929c0-2.891 2.024-5 4.25-5s4.25 2.109 4.25 5z" fill-opacity=".3" fill-rule="evenodd"/%3E%3Cpath d="m16 55c-1.1046 0-2-.8954-2-2h-1c0 1.6569 1.3431 3 3 3s3-1.3431 3-3h-1c0 1.1046-.8954 2-2 2z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath clip-rule="evenodd" d="m21.25 81.3929c0 .72.4349 1.3385 1.0563 1.6071.2127.0919.4473.1429.6937.1429v.8571h-14v-.8571c.24643 0 .48097-.051.69365-.1429.62145-.2686 1.05635-.8871 1.05635-1.6071v-3.3929c0-3.3137 2.3505-6 5.25-6s5.25 2.6863 5.25 6zm-1-3.3929v3.3929c0 .5999.1921 1.155.5182 1.6071h-9.5364c.3261-.4521.5182-1.0072.5182-1.6071v-3.3929c0-2.891 2.024-5 4.25-5s4.25 2.109 4.25 5z" fill="%2318a0fb" fill-rule="evenodd"/%3E%3Cpath d="m16 87c-1.1046 0-2-.8954-2-2h-1c0 1.6569 1.3431 3 3 3s3-1.3431 3-3h-1c0 1.1046-.8954 2-2 2z" fill="%2318a0fb"/%3E%3Cpath clip-rule="evenodd" d="m21.25 113.393c0 .72.4349 1.338 1.0563 1.607.2127.092.4473.143.6937.143v.857h-14v-.857c.24643 0 .48097-.051.69365-.143.62145-.269 1.05635-.887 1.05635-1.607v-3.393c0-3.314 2.3505-6 5.25-6s5.25 2.686 5.25 6zm-1-3.393v3.393c0 .6.1921 1.155.5182 1.607h-9.5364c.3261-.452.5182-1.007.5182-1.607v-3.393c0-2.891 2.024-5 4.25-5s4.25 2.109 4.25 5z" fill="%23fff" fill-rule="evenodd"/%3E%3Cpath d="m16 119c-1.1046 0-2-.895-2-2h-1c0 1.657 1.3431 3 3 3s3-1.343 3-3h-1c0 1.105-.8954 2-2 2z" fill="%23fff"/%3E%3C/svg%3E'); 1346 | } 1347 | 1348 | .icon--align-bottom { 1349 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m23 23h-15v-1h15z" fill-opacity=".8"/%3E%3Cpath d="m15.5 19.2071-3.8536-3.8535.7072-.7072 2.6464 2.6465v-8.2929h1v8.2929l2.6464-2.6465.7072.7072z" fill-opacity=".8"/%3E%3Cpath d="m23 55h-15v-1h15z" fill-opacity=".3"/%3E%3Cpath d="m15.5 51.2071-3.8536-3.8535.7072-.7072 2.6464 2.6465v-8.2929h1v8.2929l2.6464-2.6465.7072.7072z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m23 87h-15v-1h15z" fill="%2318a0fb"/%3E%3Cpath d="m15.5 83.2071-3.8536-3.8535.7072-.7072 2.6464 2.6465v-8.2929h1v8.2929l2.6464-2.6465.7072.7072z" fill="%2318a0fb"/%3E%3Cpath d="m23 119h-15v-1h15z" fill="%23fff"/%3E%3Cpath d="m15.5 115.207-3.8536-3.853.7072-.708 2.6464 2.647v-8.293h1v8.293l2.6464-2.647.7072.708z" fill="%23fff"/%3E%3C/svg%3E'); 1350 | } 1351 | 1352 | .icon--align-middle { 1353 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m15.5 13.7071-2.8536-2.8535.7072-.7072 1.6464 1.6465v-4.7929h1v4.7929l1.6464-1.6465.7072.7072z" fill-opacity=".8"/%3E%3Cpath d="m8 16v-1h15v1z" fill-opacity=".8"/%3E%3Cpath d="m15.5 17.2929 2.8536 2.8536-.7072.7071-1.6464-1.6465v4.7929h-1v-4.7929l-1.6464 1.6465-.7072-.7071z" fill-opacity=".8"/%3E%3Cpath d="m15.5 45.7071-2.8536-2.8535.7072-.7072 1.6464 1.6465v-4.7929h1v4.7929l1.6464-1.6465.7072.7072z" fill-opacity=".3"/%3E%3Cpath d="m8 48v-1h15v1z" fill-opacity=".3"/%3E%3Cpath d="m15.5 49.2929 2.8536 2.8536-.7072.7071-1.6464-1.6465v4.7929h-1v-4.7929l-1.6464 1.6465-.7072-.7071z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m15.5 77.7071-2.8536-2.8535.7072-.7072 1.6464 1.6465v-4.7929h1v4.7929l1.6464-1.6465.7072.7072z" fill="%2318a0fb"/%3E%3Cpath d="m8 80v-1h15v1z" fill="%2318a0fb"/%3E%3Cpath d="m15.5 81.2929 2.8536 2.8536-.7072.7071-1.6464-1.6465v4.7929h-1v-4.7929l-1.6464 1.6465-.7072-.7071z" fill="%2318a0fb"/%3E%3Cpath d="m15.5 109.707-2.8536-2.853.7072-.708 1.6464 1.647v-4.793h1v4.793l1.6464-1.647.7072.708z" fill="%23fff"/%3E%3Cpath d="m8 112v-1h15v1z" fill="%23fff"/%3E%3Cpath d="m15.5 113.293 2.8536 2.853-.7072.708-1.6464-1.647v4.793h-1v-4.793l-1.6464 1.647-.7072-.708z" fill="%23fff"/%3E%3C/svg%3E'); 1354 | } 1355 | 1356 | .icon--align-top { 1357 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m23 9h-15v1h15z" fill-opacity=".8"/%3E%3Cpath d="m15.5 12.7929-3.8536 3.8535.7072.7072 2.6464-2.6465v8.2929h1v-8.2929l2.6464 2.6465.7072-.7072z" fill-opacity=".8"/%3E%3Cpath d="m23 41h-15v1h15z" fill-opacity=".3"/%3E%3Cpath d="m15.5 44.7929-3.8536 3.8535.7072.7072 2.6464-2.6465v8.2929h1v-8.2929l2.6464 2.6465.7072-.7072z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m23 73h-15v1h15z" fill="%2318a0fb"/%3E%3Cpath d="m15.5 76.7929-3.8536 3.8535.7072.7072 2.6464-2.6465v8.2929h1v-8.2929l2.6464 2.6465.7072-.7072z" fill="%2318a0fb"/%3E%3Cpath d="m23 105h-15v1h15z" fill="%23fff"/%3E%3Cpath d="m15.5 108.793-3.8536 3.853.7072.708 2.6464-2.647v8.293h1v-8.293l2.6464 2.647.7072-.708z" fill="%23fff"/%3E%3C/svg%3E'); 1358 | } 1359 | 1360 | .icon--angle { 1361 | background-image: url("data:image/svg+xml,%3Csvg fill='none' height='128' viewBox='0 0 32 128' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-rule='evenodd' fill-rule='evenodd'%3E%3Cpath d='m12 12v8h8v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1 4v3h3c0-1.6569-1.3431-3-3-3z' fill='%23000' fill-opacity='.8'/%3E%3Cpath d='m12 44v8h8v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1 4v3h3c0-1.6569-1.3431-3-3-3z' fill='%23000' fill-opacity='.3'/%3E%3Cpath d='m12 76v8h8v-1h-3c0-2.2091-1.7909-4-4-4v-3zm1 4v3h3c0-1.6569-1.3431-3-3-3z' fill='%2318a0fb'/%3E%3Cpath d='m12 108v8h8v-1h-3c0-2.209-1.7909-4-4-4v-3zm1 4v3h3c0-1.657-1.3431-3-3-3z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); 1362 | } 1363 | 1364 | .icon--animated-fill { 1365 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m13.6667 13.0833v5.8334l5.25-2.9167z" fill-opacity=".8"/%3E%3Cpath clip-rule="evenodd" d="m9 10c0-.55228.44772-1 1-1h12c.5523 0 1 .44772 1 1v12c0 .5523-.4477 1-1 1h-12c-.55228 0-1-.4477-1-1zm1 0h12v12h-12z" fill-opacity=".8" fill-rule="evenodd"/%3E%3Cpath d="m13.6667 45.0833v5.8334l5.25-2.9167z" fill-opacity=".3"/%3E%3Cpath clip-rule="evenodd" d="m9 42c0-.5523.44772-1 1-1h12c.5523 0 1 .4477 1 1v12c0 .5523-.4477 1-1 1h-12c-.55228 0-1-.4477-1-1zm1 0h12v12h-12z" fill-opacity=".3" fill-rule="evenodd"/%3E%3C/g%3E%3Cpath d="m13.6667 77.0833v5.8334l5.25-2.9167z" fill="%2318a0fb"/%3E%3Cpath clip-rule="evenodd" d="m9 74c0-.5523.44772-1 1-1h12c.5523 0 1 .4477 1 1v12c0 .5523-.4477 1-1 1h-12c-.55228 0-1-.4477-1-1zm1 0h12v12h-12z" fill="%2318a0fb" fill-rule="evenodd"/%3E%3Cpath d="m13.6667 109.083v5.834l5.25-2.917z" fill="%23fff"/%3E%3Cpath clip-rule="evenodd" d="m9 106c0-.552.44772-1 1-1h12c.5523 0 1 .448 1 1v12c0 .552-.4477 1-1 1h-12c-.55228 0-1-.448-1-1zm1 0h12v12h-12z" fill="%23fff" fill-rule="evenodd"/%3E%3C/svg%3E'); 1366 | } 1367 | 1368 | .icon--arrow-left-right { 1369 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m12.2071 16.5 1.6464 1.6465-.7071.7071-2.8536-2.8536 2.8536-2.8535.7071.7071-1.6464 1.6464h7.5857l-1.6464-1.6464.7071-.7071 2.8536 2.8535-2.8536 2.8536-.7071-.7071 1.6464-1.6465z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m12.2071 48.5 1.6464 1.6465-.7071.7071-2.8536-2.8536 2.8536-2.8535.7071.7071-1.6464 1.6464h7.5857l-1.6464-1.6464.7071-.7071 2.8536 2.8535-2.8536 2.8536-.7071-.7071 1.6464-1.6465z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m12.2071 80.5 1.6464 1.6465-.7071.7071-2.8536-2.8536 2.8536-2.8535.7071.7071-1.6464 1.6464h7.5857l-1.6464-1.6464.7071-.7071 2.8536 2.8535-2.8536 2.8536-.7071-.7071 1.6464-1.6465z" fill="%2318a0fb"/%3E%3Cpath d="m12.2071 112.5 1.6464 1.646-.7071.708-2.8536-2.854 2.8536-2.854.7071.708-1.6464 1.646h7.5857l-1.6464-1.646.7071-.708 2.8536 2.854-2.8536 2.854-.7071-.708 1.6464-1.646z" fill="%23fff"/%3E%3C/svg%3E'); 1370 | } 1371 | 1372 | .icon--arrow-up-down { 1373 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m16.0005 10.2924 2.8536 2.8535-.7071.7071-1.6465-1.6464v7.5858l1.6465-1.6465.7071.7071-2.8536 2.8536-2.8535-2.8536.7071-.7071 1.6464 1.6465v-7.5858l-1.6464 1.6464-.7071-.7071z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m16.0005 42.2924 2.8536 2.8535-.7071.7071-1.6465-1.6464v7.5858l1.6465-1.6465.7071.7071-2.8536 2.8536-2.8535-2.8536.7071-.7071 1.6464 1.6465v-7.5858l-1.6464 1.6464-.7071-.7071z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m16.0005 74.2924 2.8536 2.8535-.7071.7071-1.6465-1.6464v7.5858l1.6465-1.6465.7071.7071-2.8536 2.8536-2.8535-2.8536.7071-.7071 1.6464 1.6465v-7.5858l-1.6464 1.6464-.7071-.7071z" fill="%2318a0fb"/%3E%3Cpath d="m16.0005 106.292 2.8536 2.854-.7071.707-1.6465-1.646v7.585l1.6465-1.646.7071.707-2.8536 2.854-2.8535-2.854.7071-.707 1.6464 1.646v-7.585l-1.6464 1.646-.7071-.707z" fill="%23fff"/%3E%3C/svg%3E'); 1374 | } 1375 | 1376 | .icon--blend-empty { 1377 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m16.6948 11.7201c-.22-.229-.4511-.4681-.6932-.7185-.0005-.0005-.001-.0011-.0015-.0016l-.0005.0005c-.0003.0003-.0007.0007-.001.001-.2421.2505-.4732.4896-.6933.7185-2.2035 2.2924-3.3053 3.5739-3.3053 5.1319-.0025 1.0624.3881 2.1256 1.1717 2.9361 1.562 1.616 4.0947 1.616 5.6567 0 .7836-.8105 1.1741-1.8737 1.1716-2.9361 0-1.558-1.1017-2.8395-3.3052-5.1318zm-.6947.7203c-.9766 1.0166-1.6934 1.7905-2.1953 2.4708-.5998.8133-.8048 1.38-.8048 1.9407v.0023c-.0019.8178.2984 1.6262.8907 2.2388 1.1689 1.2093 3.0498 1.2093 4.2188 0 .5921-.6126.8924-1.4209.8905-2.2387v-.0024c0-.5607-.205-1.1274-.8048-1.9407-.5018-.6803-1.2187-1.4542-2.1951-2.4708z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m16.6948 43.7201c-.22-.229-.4511-.4681-.6932-.7185-.0005-.0005-.001-.0011-.0015-.0016l-.0005.0005c-.0003.0003-.0007.0007-.001.001-.2421.2505-.4732.4896-.6933.7185-2.2035 2.2924-3.3053 3.5739-3.3053 5.1319-.0025 1.0624.3881 2.1256 1.1717 2.9361 1.562 1.616 4.0947 1.616 5.6567 0 .7836-.8105 1.1741-1.8737 1.1716-2.9361 0-1.558-1.1017-2.8395-3.3052-5.1318zm-.6947.7203c-.9766 1.0166-1.6934 1.7905-2.1953 2.4708-.5998.8133-.8048 1.38-.8048 1.9407v.0023c-.0019.8178.2984 1.6262.8907 2.2388 1.1689 1.2093 3.0498 1.2093 4.2188 0 .5921-.6126.8924-1.4209.8905-2.2387v-.0024c0-.5607-.205-1.1274-.8048-1.9407-.5018-.6803-1.2187-1.4542-2.1951-2.4708z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m16.6948 75.7201c-.22-.229-.4511-.4681-.6932-.7185-.0005-.0005-.001-.0011-.0015-.0016l-.0005.0005c-.0003.0003-.0007.0007-.001.001-.2421.2505-.4732.4896-.6933.7185-2.2035 2.2924-3.3053 3.5739-3.3053 5.1319-.0025 1.0624.3881 2.1256 1.1717 2.9361 1.562 1.616 4.0947 1.616 5.6567 0 .7836-.8105 1.1741-1.8737 1.1716-2.9361 0-1.558-1.1017-2.8395-3.3052-5.1318zm-.6947.7203c-.9766 1.0166-1.6934 1.7905-2.1953 2.4708-.5998.8133-.8048 1.38-.8048 1.9407v.0023c-.0019.8178.2984 1.6262.8907 2.2388 1.1689 1.2093 3.0498 1.2093 4.2188 0 .5921-.6126.8924-1.4209.8905-2.2387v-.0024c0-.5607-.205-1.1274-.8048-1.9407-.5018-.6803-1.2187-1.4542-2.1951-2.4708z" fill="%2318a0fb"/%3E%3Cpath d="m16.6948 107.72c-.22-.229-.4511-.468-.6932-.718-.0005-.001-.001-.001-.0015-.002h-.0005c-.0003.001-.0007.001-.001.002-.2421.25-.4732.489-.6933.718-2.2035 2.292-3.3053 3.574-3.3053 5.132-.0025 1.062.3881 2.125 1.1717 2.936 1.562 1.616 4.0947 1.616 5.6567 0 .7836-.811 1.1741-1.874 1.1716-2.936 0-1.558-1.1017-2.84-3.3052-5.132zm-.6947.72c-.9766 1.017-1.6934 1.791-2.1953 2.471-.5998.813-.8048 1.38-.8048 1.941v.002c-.0019.818.2984 1.626.8907 2.239 1.1689 1.209 3.0498 1.209 4.2188 0 .5921-.613.8924-1.421.8905-2.239v-.002c0-.561-.205-1.128-.8048-1.941-.5018-.68-1.2187-1.454-2.1951-2.471z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1378 | } 1379 | 1380 | .icon--blend { 1381 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m16.0016 11.0016c.2421.2504.4732.4895.6932.7185 2.2035 2.2923 3.3052 3.5738 3.3052 5.1318.0025 1.0624-.388 2.1256-1.1716 2.9361-1.562 1.616-4.0947 1.616-5.6567 0-.7836-.8105-1.1742-1.8737-1.1717-2.9361 0-1.558 1.1018-2.8395 3.3053-5.1318.2201-.229.4512-.4681.6933-.7186l.001-.001zm-2.1968 3.9096c.5019-.6803 1.2187-1.4542 2.1953-2.4708.9764 1.0166 1.6933 1.7905 2.1951 2.4708.5998.8133.8048 1.38.8048 1.9407v.0024c.0001.0486-.0008.0972-.0029.1457h-5.9942c-.002-.0485-.003-.0971-.0029-.1458v-.0023c0-.5607.205-1.1274.8048-1.9407z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m16.0016 43.0016c.2421.2504.4732.4895.6932.7185 2.2035 2.2923 3.3052 3.5738 3.3052 5.1318.0025 1.0624-.388 2.1256-1.1716 2.9361-1.562 1.616-4.0947 1.616-5.6567 0-.7836-.8105-1.1742-1.8737-1.1717-2.9361 0-1.558 1.1018-2.8395 3.3053-5.1318.2201-.229.4512-.4681.6933-.7186l.001-.001zm-2.1968 3.9096c.5019-.6803 1.2187-1.4542 2.1953-2.4708.9764 1.0166 1.6933 1.7905 2.1951 2.4708.5998.8133.8048 1.38.8048 1.9407v.0024c.0001.0486-.0008.0972-.0029.1457h-5.9942c-.002-.0485-.003-.0971-.0029-.1458v-.0023c0-.5607.205-1.1274.8048-1.9407z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m16.0016 75.0016c.2421.2504.4732.4895.6932.7185 2.2035 2.2923 3.3052 3.5738 3.3052 5.1318.0025 1.0624-.388 2.1256-1.1716 2.9361-1.562 1.616-4.0947 1.616-5.6567 0-.7836-.8105-1.1742-1.8737-1.1717-2.9361 0-1.558 1.1018-2.8395 3.3053-5.1318.2201-.229.4512-.4681.6933-.7186l.001-.001zm-2.1968 3.9096c.5019-.6803 1.2187-1.4542 2.1953-2.4708.9764 1.0166 1.6933 1.7905 2.1951 2.4708.5998.8133.8048 1.38.8048 1.9407v.0024c.0001.0486-.0008.0972-.0029.1457h-5.9942c-.002-.0485-.003-.0971-.0029-.1458v-.0023c0-.5607.205-1.1274.8048-1.9407z" fill="%2318a0fb"/%3E%3Cpath d="m16.0016 107.002c.2421.25.4732.489.6932.718 2.2035 2.292 3.3052 3.574 3.3052 5.132.0025 1.062-.388 2.125-1.1716 2.936-1.562 1.616-4.0947 1.616-5.6567 0-.7836-.811-1.1742-1.874-1.1717-2.936 0-1.558 1.1018-2.84 3.3053-5.132.2201-.229.4512-.468.6933-.718l.001-.002zm-2.1968 3.909c.5019-.68 1.2187-1.454 2.1953-2.471.9764 1.017 1.6933 1.791 2.1951 2.471.5998.813.8048 1.38.8048 1.941v.002c.0001.049-.0008.097-.0029.146h-5.9942c-.002-.049-.003-.097-.0029-.146v-.002c0-.561.205-1.128.8048-1.941z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1382 | } 1383 | 1384 | .icon--break { 1385 | background-image: url("data:image/svg+xml,%3Csvg fill='none' height='128' viewBox='0 0 32 128' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='.8' opacity='.9'%3E%3Cpath d='m13.0002 9v3h1v-3z'/%3E%3Cpath d='m22.1033 9.89644c-1.1617-1.16176-3.0453-1.16176-4.2071.00002l-2.7499 2.74994.7071.7071 2.7499-2.7499c.7712-.77128 2.0217-.77129 2.7929 0 .7712.7712.7713 2.0216 0 2.7928l-2.7499 2.75.7071.7071 2.7499-2.75c1.1618-1.1617 1.1618-3.0453 0-4.20706z'/%3E%3Cpath d='m9.89639 22.1035c-1.16176-1.1617-1.16177-3.0453-.00001-4.2071l2.75002-2.75.7071.7071-2.75 2.75c-.77124.7713-.77124 2.0217 0 2.7929.7712.7713 2.0216.7713 2.7929 0l2.75-2.75.7071.7071-2.75 2.75c-1.1618 1.1618-3.0454 1.1618-4.20711 0z'/%3E%3Cpath d='m22.9998 19h-3v-1h3z'/%3E%3Cpath d='m19.0004 20v3h-1v-3z'/%3E%3Cpath d='m11.9998 13h-3.00004v1h3.00004z'/%3E%3C/g%3E%3Cg fill='%23000' fill-opacity='.3' opacity='.9'%3E%3Cpath d='m13.0002 41v3h1v-3z'/%3E%3Cpath d='m22.1033 41.8964c-1.1617-1.1617-3.0453-1.1617-4.2071.0001l-2.7499 2.7499.7071.7071 2.7499-2.7499c.7712-.7713 2.0217-.7713 2.7929 0 .7712.7712.7713 2.0216 0 2.7928l-2.7499 2.75.7071.7071 2.7499-2.75c1.1618-1.1617 1.1618-3.0453 0-4.2071z'/%3E%3Cpath d='m9.89639 54.1035c-1.16176-1.1617-1.16177-3.0453-.00001-4.2071l2.75002-2.75.7071.7071-2.75 2.75c-.77124.7713-.77124 2.0217 0 2.7929.7712.7713 2.0216.7713 2.7929 0l2.75-2.75.7071.7071-2.75 2.75c-1.1618 1.1618-3.0454 1.1618-4.20711 0z'/%3E%3Cpath d='m22.9998 51h-3v-1h3z'/%3E%3Cpath d='m19.0004 52v3h-1v-3z'/%3E%3Cpath d='m11.9998 45h-3.00004v1h3.00004z'/%3E%3C/g%3E%3Cg fill='%2318a0fb' opacity='.9'%3E%3Cpath d='m13.0002 73v3h1v-3z'/%3E%3Cpath d='m22.1033 73.8964c-1.1617-1.1617-3.0453-1.1617-4.2071.0001l-2.7499 2.7499.7071.7071 2.7499-2.7499c.7712-.7713 2.0217-.7713 2.7929 0 .7712.7712.7713 2.0216 0 2.7928l-2.7499 2.75.7071.7071 2.7499-2.75c1.1618-1.1617 1.1618-3.0453 0-4.2071z'/%3E%3Cpath d='m9.89639 86.1035c-1.16176-1.1617-1.16177-3.0453-.00001-4.2071l2.75002-2.75.7071.7071-2.75 2.75c-.77124.7713-.77124 2.0217 0 2.7929.7712.7713 2.0216.7713 2.7929 0l2.75-2.75.7071.7071-2.75 2.75c-1.1618 1.1618-3.0454 1.1618-4.20711 0z'/%3E%3Cpath d='m22.9998 83h-3v-1h3z'/%3E%3Cpath d='m19.0004 84v3h-1v-3z'/%3E%3Cpath d='m11.9998 77h-3.00004v1h3.00004z'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='.9'%3E%3Cpath d='m13.0002 105v3h1v-3z'/%3E%3Cpath d='m22.1033 105.896c-1.1617-1.161-3.0453-1.161-4.2071 0l-2.7499 2.75.7071.708 2.7499-2.75c.7712-.772 2.0217-.772 2.7929 0 .7712.771.7713 2.021 0 2.792l-2.7499 2.75.7071.708 2.7499-2.75c1.1618-1.162 1.1618-3.046 0-4.208z'/%3E%3Cpath d='m9.89639 118.104c-1.16176-1.162-1.16177-3.046-.00001-4.208l2.75002-2.75.7071.708-2.75 2.75c-.77124.771-.77124 2.021 0 2.792.7712.772 2.0216.772 2.7929 0l2.75-2.75.7071.708-2.75 2.75c-1.1618 1.161-3.0454 1.161-4.20711 0z'/%3E%3Cpath d='m22.9998 115h-3v-1h3z'/%3E%3Cpath d='m19.0004 116v3h-1v-3z'/%3E%3Cpath d='m11.9998 109h-3.00004v1h3.00004z'/%3E%3C/g%3E%3C/svg%3E"); 1386 | } 1387 | 1388 | .icon--close { 1389 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m16 15.293 4.6465-4.6464.7071.7071-4.6465 4.6464 4.6465 4.6465-.7071.7071-4.6465-4.6464-4.6464 4.6464-.7071-.7071 4.6464-4.6465-4.6464-4.6463.7071-.7071z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m16 47.293 4.6465-4.6464.7071.7071-4.6465 4.6464 4.6465 4.6465-.7071.7071-4.6465-4.6464-4.6464 4.6464-.7071-.7071 4.6464-4.6465-4.6464-4.6463.7071-.7071z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m16 79.293 4.6465-4.6464.7071.7071-4.6465 4.6464 4.6465 4.6465-.7071.7071-4.6465-4.6464-4.6464 4.6464-.7071-.7071 4.6464-4.6465-4.6464-4.6463.7071-.7071z" fill="%2318a0fb"/%3E%3Cpath d="m16 111.293 4.6465-4.646.7071.707-4.6465 4.646 4.6465 4.647-.7071.707-4.6465-4.647-4.6464 4.647-.7071-.707 4.6464-4.647-4.6464-4.646.7071-.707z" fill="%23fff"/%3E%3C/svg%3E'); 1390 | } 1391 | 1392 | .icon--comment { 1393 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m8 23 5.812-.7664c.9562.4899 2.0398.7664 3.188.7664 3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7c0 .945.1872 1.8462.5266 2.6686zm3.6399-4.2552-.1889-.4577c-.2903-.7035-.451-1.4753-.451-2.2871 0-3.3137 2.6863-6 6-6s6 2.6863 6 6-2.6863 6-6 6c-.986 0-1.9136-.237-2.7319-.6564l-.2776-.1422-4.09891.5405z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m8 55 5.812-.7664c.9562.4899 2.0398.7664 3.188.7664 3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7c0 .945.1872 1.8462.5266 2.6686zm3.6399-4.2552-.1889-.4577c-.2903-.7035-.451-1.4753-.451-2.2871 0-3.3137 2.6863-6 6-6s6 2.6863 6 6-2.6863 6-6 6c-.986 0-1.9136-.237-2.7319-.6564l-.2776-.1422-4.09891.5405z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m8 87 5.812-.7664c.9562.4899 2.0398.7664 3.188.7664 3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7c0 .945.1872 1.8462.5266 2.6686zm3.6399-4.2552-.1889-.4577c-.2903-.7035-.451-1.4753-.451-2.2871 0-3.3137 2.6863-6 6-6s6 2.6863 6 6-2.6863 6-6 6c-.986 0-1.9136-.237-2.7319-.6564l-.2776-.1422-4.09891.5405z" fill="%2318a0fb"/%3E%3Cpath d="m8 119 5.812-.766c.9562.49 2.0398.766 3.188.766 3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7c0 .945.1872 1.846.5266 2.669zm3.6399-4.255-.1889-.458c-.2903-.703-.451-1.475-.451-2.287 0-3.314 2.6863-6 6-6s6 2.686 6 6-2.6863 6-6 6c-.986 0-1.9136-.237-2.7319-.656l-.2776-.143-4.09891.541z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1394 | } 1395 | 1396 | .icon--component { 1397 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cg fill="%23000"%3E%3Cpath d="m12.0625 10.9375 3.9375 3.9375 3.9375-3.9375-3.9375-3.9375zm6.4608 0-2.5233 2.5233-2.5233-2.5233 2.5233-2.52329z" fill-opacity=".8"/%3E%3Cpath d="m12.0625 21.0625 3.9375 3.9375 3.9375-3.9375-3.9375-3.9375zm6.4608 0-2.5233 2.5233-2.5233-2.5233 2.5233-2.5233z" fill-opacity=".8"/%3E%3Cpath d="m7 16 3.9375-3.9375 3.9375 3.9375-3.9375 3.9375zm3.9375 2.5233 2.5233-2.5233-2.5233-2.5233-2.52329 2.5233z" fill-opacity=".8"/%3E%3Cpath d="m17.125 16 3.9375 3.9375 3.9375-3.9375-3.9375-3.9375zm6.4608 0-2.5233 2.5233-2.5233-2.5233 2.5233-2.5233z" fill-opacity=".8"/%3E%3Cpath d="m12.0625 42.9375 3.9375 3.9375 3.9375-3.9375-3.9375-3.9375zm6.4608 0-2.5233 2.5233-2.5233-2.5233 2.5233-2.5233z" fill-opacity=".3"/%3E%3Cpath d="m12.0625 53.0625 3.9375 3.9375 3.9375-3.9375-3.9375-3.9375zm6.4608 0-2.5233 2.5233-2.5233-2.5233 2.5233-2.5233z" fill-opacity=".3"/%3E%3Cpath d="m7 48 3.9375-3.9375 3.9375 3.9375-3.9375 3.9375zm3.9375 2.5233 2.5233-2.5233-2.5233-2.5233-2.52329 2.5233z" fill-opacity=".3"/%3E%3Cpath d="m17.125 48 3.9375 3.9375 3.9375-3.9375-3.9375-3.9375zm6.4608 0-2.5233 2.5233-2.5233-2.5233 2.5233-2.5233z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m12.0625 74.9375 3.9375 3.9375 3.9375-3.9375-3.9375-3.9375zm6.4608 0-2.5233 2.5233-2.5233-2.5233 2.5233-2.5233z" fill="%2318a0fb"/%3E%3Cpath d="m12.0625 85.0625 3.9375 3.9375 3.9375-3.9375-3.9375-3.9375zm6.4608 0-2.5233 2.5233-2.5233-2.5233 2.5233-2.5233z" fill="%2318a0fb"/%3E%3Cpath d="m7 80 3.9375-3.9375 3.9375 3.9375-3.9375 3.9375zm3.9375 2.5233 2.5233-2.5233-2.5233-2.5233-2.52329 2.5233z" fill="%2318a0fb"/%3E%3Cpath d="m17.125 80 3.9375 3.9375 3.9375-3.9375-3.9375-3.9375zm6.4608 0-2.5233 2.5233-2.5233-2.5233 2.5233-2.5233z" fill="%2318a0fb"/%3E%3Cpath d="m12.0625 106.938 3.9375 3.937 3.9375-3.937-3.9375-3.938zm6.4608 0-2.5233 2.523-2.5233-2.523 2.5233-2.524z" fill="%23fff"/%3E%3Cpath d="m12.0625 117.062 3.9375 3.938 3.9375-3.938-3.9375-3.937zm6.4608 0-2.5233 2.524-2.5233-2.524 2.5233-2.523z" fill="%23fff"/%3E%3Cpath d="m7 112 3.9375-3.938 3.9375 3.938-3.9375 3.938zm3.9375 2.523 2.5233-2.523-2.5233-2.523-2.52329 2.523z" fill="%23fff"/%3E%3Cpath d="m17.125 112 3.9375 3.938 3.9375-3.938-3.9375-3.938zm6.4608 0-2.5233 2.523-2.5233-2.523 2.5233-2.523z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1398 | } 1399 | 1400 | .icon--corner-radius { 1401 | background-image: url("data:image/svg+xml,%3Csvg fill='none' height='128' viewBox='0 0 32 128' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21 13h-4c-2.2091 0-4 1.7909-4 4v4h-1v-4c0-2.7614 2.2386-5 5-5h4z' fill='%23000' fill-opacity='.8'/%3E%3Cpath d='m21 45h-4c-2.2091 0-4 1.7909-4 4v4h-1v-4c0-2.7614 2.2386-5 5-5h4z' fill='%23000' fill-opacity='.3'/%3E%3Cpath d='m21 77h-4c-2.2091 0-4 1.7909-4 4v4h-1v-4c0-2.7614 2.2386-5 5-5h4z' fill='%2318a0fb'/%3E%3Cpath d='m21 109h-4c-2.2091 0-4 1.791-4 4v4h-1v-4c0-2.761 2.2386-5 5-5h4z' fill='%23fff'/%3E%3C/svg%3E"); 1402 | } 1403 | 1404 | .icon--corners { 1405 | background-image: url("data:image/svg+xml,%3Csvg fill='none' height='128' viewBox='0 0 32 128' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='m11 11h3v1h-2v2h-1z' fill-opacity='.8'/%3E%3Cpath d='m18 11h3v3h-1v-2h-2z' fill-opacity='.8'/%3E%3Cpath d='m12 20v-2h-1v3h3v-1z' fill-opacity='.8'/%3E%3Cpath d='m21 18v3h-3v-1h2v-2z' fill-opacity='.8'/%3E%3Cpath d='m11 43h3v1h-2v2h-1z' fill-opacity='.3'/%3E%3Cpath d='m18 43h3v3h-1v-2h-2z' fill-opacity='.3'/%3E%3Cpath d='m12 52v-2h-1v3h3v-1z' fill-opacity='.3'/%3E%3Cpath d='m21 50v3h-3v-1h2v-2z' fill-opacity='.3'/%3E%3C/g%3E%3Cpath d='m11 75h3v1h-2v2h-1z' fill='%2318a0fb'/%3E%3Cpath d='m18 75h3v3h-1v-2h-2z' fill='%2318a0fb'/%3E%3Cpath d='m12 84v-2h-1v3h3v-1z' fill='%2318a0fb'/%3E%3Cpath d='m21 82v3h-3v-1h2v-2z' fill='%2318a0fb'/%3E%3Cpath d='m11 107h3v1h-2v2h-1z' fill='%23fff'/%3E%3Cpath d='m18 107h3v3h-1v-2h-2z' fill='%23fff'/%3E%3Cpath d='m12 116v-2h-1v3h3v-1z' fill='%23fff'/%3E%3Cpath d='m21 114v3h-3v-1h2v-2z' fill='%23fff'/%3E%3C/svg%3E"); 1406 | } 1407 | 1408 | .icon--dist-horiz-spacing { 1409 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m11 22.5v-13h-1v13z" fill-opacity=".8"/%3E%3Cpath d="m22 9.5v13h-1v-13z" fill-opacity=".8"/%3E%3Cpath d="m17 12.5v7h-2v-7z" fill-opacity=".8"/%3E%3Cpath d="m11 54.5v-13h-1v13z" fill-opacity=".3"/%3E%3Cpath d="m22 41.5v13h-1v-13z" fill-opacity=".3"/%3E%3Cpath d="m17 44.5v7h-2v-7z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m11 86.5v-13h-1v13z" fill="%2318a0fb"/%3E%3Cpath d="m22 73.5v13h-1v-13z" fill="%2318a0fb"/%3E%3Cpath d="m17 76.5v7h-2v-7z" fill="%2318a0fb"/%3E%3Cpath d="m11 118.5v-13h-1v13z" fill="%23fff"/%3E%3Cpath d="m22 105.5v13h-1v-13z" fill="%23fff"/%3E%3Cpath d="m17 108.5v7h-2v-7z" fill="%23fff"/%3E%3C/svg%3E'); 1410 | } 1411 | 1412 | .icon--dist-vert-spacing { 1413 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m9.5 10h13v1h-13z" fill-opacity=".8"/%3E%3Cpath d="m12.5 15h7v2h-7z" fill-opacity=".8"/%3E%3Cpath d="m22.5 21h-13v1h13z" fill-opacity=".8"/%3E%3Cpath d="m9.5 42h13v1h-13z" fill-opacity=".3"/%3E%3Cpath d="m12.5 47h7v2h-7z" fill-opacity=".3"/%3E%3Cpath d="m22.5 53h-13v1h13z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m9.5 74h13v1h-13z" fill="%2318a0fb"/%3E%3Cpath d="m12.5 79h7v2h-7z" fill="%2318a0fb"/%3E%3Cpath d="m22.5 85h-13v1h13z" fill="%2318a0fb"/%3E%3Cpath d="m9.5 106h13v1h-13z" fill="%23fff"/%3E%3Cpath d="m12.5 111h7v2h-7z" fill="%23fff"/%3E%3Cpath d="m22.5 117h-13v1h13z" fill="%23fff"/%3E%3C/svg%3E'); 1414 | } 1415 | 1416 | .icon--draft { 1417 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m10 9h7.7071l4.2929 4.2929v9.7071h-12zm1 1v12h10v-8h-4v-4zm7 .7071 2.2929 2.2929h-2.2929z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m10 41h7.7071l4.2929 4.2929v9.7071h-12zm1 1v12h10v-8h-4v-4zm7 .7071 2.2929 2.2929h-2.2929z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m10 73h7.7071l4.2929 4.2929v9.7071h-12zm1 1v12h10v-8h-4v-4zm7 .7071 2.2929 2.2929h-2.2929z" fill="%2318a0fb"/%3E%3Cpath d="m10 105h7.7071l4.2929 4.293v9.707h-12zm1 1v12h10v-8h-4v-4zm7 .707 2.2929 2.293h-2.2929z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1418 | } 1419 | 1420 | .icon--effects { 1421 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m16.5 8.5h-1v3h1z" fill-opacity=".8"/%3E%3Cpath d="m11.0503 10.3431-.7071.7072 2.1213 2.1213.7071-.7071z" fill-opacity=".8"/%3E%3Cpath d="m21.657 11.0503-.7071-.7071-2.1214 2.1213.7071.7071z" fill-opacity=".8"/%3E%3Cpath d="m8.5 15.5v1h3v-1z" fill-opacity=".8"/%3E%3Cpath d="m20.5 15.5v1h3v-1z" fill-opacity=".8"/%3E%3Cpath d="m13.1716 19.5355-.7071-.7071-2.1213 2.1214.7071.7071z" fill-opacity=".8"/%3E%3Cpath d="m19.5354 18.8284-.7071.7071 2.1213 2.1214.7071-.7071z" fill-opacity=".8"/%3E%3Cpath d="m16.5 20.5h-1v3h1z" fill-opacity=".8"/%3E%3Cpath clip-rule="evenodd" d="m18.4978 15.9979c0 1.3807-1.1193 2.5-2.5 2.5s-2.5-1.1193-2.5-2.5 1.1193-2.5 2.5-2.5 2.5 1.1193 2.5 2.5zm-1 0c0 .8285-.6716 1.5-1.5 1.5s-1.5-.6715-1.5-1.5c0-.8284.6716-1.5 1.5-1.5s1.5.6716 1.5 1.5z" fill-opacity=".8" fill-rule="evenodd"/%3E%3Cpath d="m16.5 40.5h-1v3h1z" fill-opacity=".3"/%3E%3Cpath d="m11.0503 42.3431-.7071.7072 2.1213 2.1213.7071-.7071z" fill-opacity=".3"/%3E%3Cpath d="m21.657 43.0503-.7071-.7071-2.1214 2.1213.7071.7071z" fill-opacity=".3"/%3E%3Cpath d="m8.5 47.5v1h3v-1z" fill-opacity=".3"/%3E%3Cpath d="m20.5 47.5v1h3v-1z" fill-opacity=".3"/%3E%3Cpath d="m13.1716 51.5355-.7071-.7071-2.1213 2.1214.7071.7071z" fill-opacity=".3"/%3E%3Cpath d="m19.5354 50.8284-.7071.7071 2.1213 2.1214.7071-.7071z" fill-opacity=".3"/%3E%3Cpath d="m16.5 52.5h-1v3h1z" fill-opacity=".3"/%3E%3Cpath clip-rule="evenodd" d="m18.4978 47.9979c0 1.3807-1.1193 2.5-2.5 2.5s-2.5-1.1193-2.5-2.5 1.1193-2.5 2.5-2.5 2.5 1.1193 2.5 2.5zm-1 0c0 .8285-.6716 1.5-1.5 1.5s-1.5-.6715-1.5-1.5c0-.8284.6716-1.5 1.5-1.5s1.5.6716 1.5 1.5z" fill-opacity=".3" fill-rule="evenodd"/%3E%3C/g%3E%3Cpath d="m16.5 72.5h-1v3h1z" fill="%2318a0fb"/%3E%3Cpath d="m11.0503 74.3431-.7071.7072 2.1213 2.1213.7071-.7071z" fill="%2318a0fb"/%3E%3Cpath d="m21.657 75.0503-.7071-.7071-2.1214 2.1213.7071.7071z" fill="%2318a0fb"/%3E%3Cpath d="m8.5 79.5v1h3v-1z" fill="%2318a0fb"/%3E%3Cpath d="m20.5 79.5v1h3v-1z" fill="%2318a0fb"/%3E%3Cpath d="m13.1716 83.5355-.7071-.7071-2.1213 2.1214.7071.7071z" fill="%2318a0fb"/%3E%3Cpath d="m19.5354 82.8284-.7071.7071 2.1213 2.1214.7071-.7071z" fill="%2318a0fb"/%3E%3Cpath d="m16.5 84.5h-1v3h1z" fill="%2318a0fb"/%3E%3Cpath clip-rule="evenodd" d="m18.4978 79.9979c0 1.3807-1.1193 2.5-2.5 2.5s-2.5-1.1193-2.5-2.5 1.1193-2.5 2.5-2.5 2.5 1.1193 2.5 2.5zm-1 0c0 .8285-.6716 1.5-1.5 1.5s-1.5-.6715-1.5-1.5c0-.8284.6716-1.5 1.5-1.5s1.5.6716 1.5 1.5z" fill="%2318a0fb" fill-rule="evenodd"/%3E%3Cpath d="m16.5 104.5h-1v3h1z" fill="%23fff"/%3E%3Cpath d="m11.0503 106.343-.7071.707 2.1213 2.122.7071-.708z" fill="%23fff"/%3E%3Cpath d="m21.657 107.05-.7071-.707-2.1214 2.121.7071.708z" fill="%23fff"/%3E%3Cpath d="m8.5 111.5v1h3v-1z" fill="%23fff"/%3E%3Cpath d="m20.5 111.5v1h3v-1z" fill="%23fff"/%3E%3Cpath d="m13.1716 115.536-.7071-.708-2.1213 2.122.7071.707z" fill="%23fff"/%3E%3Cpath d="m19.5354 114.828-.7071.708 2.1213 2.121.7071-.707z" fill="%23fff"/%3E%3Cpath d="m16.5 116.5h-1v3h1z" fill="%23fff"/%3E%3Cpath clip-rule="evenodd" d="m18.4978 111.998c0 1.381-1.1193 2.5-2.5 2.5s-2.5-1.119-2.5-2.5 1.1193-2.5 2.5-2.5 2.5 1.119 2.5 2.5zm-1 0c0 .828-.6716 1.5-1.5 1.5s-1.5-.672-1.5-1.5c0-.829.6716-1.5 1.5-1.5s1.5.671 1.5 1.5z" fill="%23fff" fill-rule="evenodd"/%3E%3C/svg%3E'); 1422 | } 1423 | 1424 | .icon--ellipses { 1425 | background-image: url("data:image/svg+xml,%3Csvg fill='none' height='128' viewBox='0 0 32 128' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-rule='evenodd' fill-rule='evenodd'%3E%3Cpath d='m11.5 16c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5zm6 0c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5zm4.5 1.5c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5z' fill='%23000' fill-opacity='.8'/%3E%3Cpath d='m11.5 48c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5zm6 0c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5zm4.5 1.5c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5z' fill='%23000' fill-opacity='.3'/%3E%3Cpath d='m11.5 80c0 .8284-.6716 1.5-1.5 1.5-.82843 0-1.5-.6716-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.6716 1.5 1.5zm6 0c0 .8284-.6716 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5zm4.5 1.5c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5z' fill='%2318a0fb'/%3E%3Cpath d='m11.5 112c0 .828-.6716 1.5-1.5 1.5-.82843 0-1.5-.672-1.5-1.5s.67157-1.5 1.5-1.5c.8284 0 1.5.672 1.5 1.5zm6 0c0 .828-.6716 1.5-1.5 1.5s-1.5-.672-1.5-1.5.6716-1.5 1.5-1.5 1.5.672 1.5 1.5zm4.5 1.5c.8284 0 1.5-.672 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.672-1.5 1.5.6716 1.5 1.5 1.5z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); 1426 | } 1427 | 1428 | .icon--eyedropper { 1429 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m22.4473 9.6c-.8-.8-2-.8-2.8 0l-2.8001 2.8-.8-.7c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l.7.7-5.79995 5.8c-.4.4-1 1.9 0 2.9.99995 1 2.49995.4 2.89995 0l5.8-5.8.7001.7c.4.4 1 .4 1.4 0s.4-1 0-1.4l-.7-.7 2.8-2.8c.8-.9.8-2.1 0-2.9zm-10.9001 11.9h-1v-1l5.8-5.8 1 1c-.1 0-5.8 5.8-5.8 5.8z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m22.4473 41.6c-.8-.8-2-.8-2.8 0l-2.8001 2.8-.8-.7c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l.7.7-5.79995 5.8c-.4.4-1 1.9 0 2.9.99995 1 2.49995.4 2.89995 0l5.8-5.8.7001.7c.4.4 1 .4 1.4 0s.4-1 0-1.4l-.7-.7 2.8-2.8c.8-.9.8-2.1 0-2.9zm-10.9001 11.9h-1v-1l5.8-5.8 1 1c-.1 0-5.8 5.8-5.8 5.8z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m22.4473 73.6c-.8-.8-2-.8-2.8 0l-2.8001 2.8-.8-.7c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l.7.7-5.79995 5.8c-.4.4-1 1.9 0 2.9.99995 1 2.49995.4 2.89995 0l5.8-5.8.7001.7c.4.4 1 .4 1.4 0s.4-1 0-1.4l-.7-.7 2.8-2.8c.8-.9.8-2.1 0-2.9zm-10.9001 11.9h-1v-1l5.8-5.8 1 1c-.1 0-5.8 5.8-5.8 5.8z" fill="%2318a0fb"/%3E%3Cpath d="m22.4473 105.6c-.8-.8-2-.8-2.8 0l-2.8001 2.8-.8-.7c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l.7.7-5.79995 5.8c-.4.4-1 1.9 0 2.9.99995 1 2.49995.4 2.89995 0l5.8-5.8.7001.7c.4.4 1 .4 1.4 0s.4-1 0-1.4l-.7-.7 2.8-2.8c.8-.9.8-2.1 0-2.9zm-10.9001 11.9h-1v-1l5.8-5.8 1 1c-.1 0-5.8 5.8-5.8 5.8z" fill="%23fff"/%3E%3C/svg%3E'); 1430 | } 1431 | 1432 | .icon--frame { 1433 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m11 24v-3h-3v-1h3v-8h-3v-1h3v-3h1v3h8v-3h1v3h3v1h-3v8h3v1h-3v3h-1v-3h-8v3zm9-4v-8h-8v8z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m11 56v-3h-3v-1h3v-8h-3v-1h3v-3h1v3h8v-3h1v3h3v1h-3v8h3v1h-3v3h-1v-3h-8v3zm9-4v-8h-8v8z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m11 88v-3h-3v-1h3v-8h-3v-1h3v-3h1v3h8v-3h1v3h3v1h-3v8h3v1h-3v3h-1v-3h-8v3zm9-4v-8h-8v8z" fill="%2318a0fb"/%3E%3Cpath d="m11 120v-3h-3v-1h3v-8h-3v-1h3v-3h1v3h8v-3h1v3h3v1h-3v8h3v1h-3v3h-1v-3h-8v3zm9-4v-8h-8v8z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1434 | } 1435 | 1436 | .icon--group { 1437 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m17.4 9h-2.8v1h2.8z" fill-opacity=".8"/%3E%3Cpath d="m20.9 22h1.1v-1.1h1v2.1h-2.1z" fill-opacity=".8"/%3E%3Cpath d="m10 14.6v2.8h-1v-2.8z" fill-opacity=".8"/%3E%3Cpath d="m22 11.1v-1.1h-1.1v-1h2.1v2.1z" fill-opacity=".8"/%3E%3Cpath d="m22 14.6v2.8h1v-2.8z" fill-opacity=".8"/%3E%3Cpath d="m10 11.1v-1.1h1.1v-1h-2.1v2.1z" fill-opacity=".8"/%3E%3Cpath d="m9 20.9h1v1.1h1.1v1h-2.1z" fill-opacity=".8"/%3E%3Cpath d="m17.4 22h-2.8v1h2.8z" fill-opacity=".8"/%3E%3Cpath d="m17.4 41h-2.8v1h2.8z" fill-opacity=".3"/%3E%3Cpath d="m20.9 54h1.1v-1.1h1v2.1h-2.1z" fill-opacity=".3"/%3E%3Cpath d="m10 46.6v2.8h-1v-2.8z" fill-opacity=".3"/%3E%3Cpath d="m22 43.1v-1.1h-1.1v-1h2.1v2.1z" fill-opacity=".3"/%3E%3Cpath d="m22 46.6v2.8h1v-2.8z" fill-opacity=".3"/%3E%3Cpath d="m10 43.1v-1.1h1.1v-1h-2.1v2.1z" fill-opacity=".3"/%3E%3Cpath d="m9 52.9h1v1.1h1.1v1h-2.1z" fill-opacity=".3"/%3E%3Cpath d="m17.4 54h-2.8v1h2.8z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m17.4 73h-2.8v1h2.8z" fill="%2318a0fb"/%3E%3Cpath d="m20.9 86h1.1v-1.1h1v2.1h-2.1z" fill="%2318a0fb"/%3E%3Cpath d="m10 78.6v2.8h-1v-2.8z" fill="%2318a0fb"/%3E%3Cpath d="m22 75.1v-1.1h-1.1v-1h2.1v2.1z" fill="%2318a0fb"/%3E%3Cpath d="m22 78.6v2.8h1v-2.8z" fill="%2318a0fb"/%3E%3Cpath d="m10 75.1v-1.1h1.1v-1h-2.1v2.1z" fill="%2318a0fb"/%3E%3Cpath d="m9 84.9h1v1.1h1.1v1h-2.1z" fill="%2318a0fb"/%3E%3Cpath d="m17.4 86h-2.8v1h2.8z" fill="%2318a0fb"/%3E%3Cpath d="m17.4 105h-2.8v1h2.8z" fill="%23fff"/%3E%3Cpath d="m20.9 118h1.1v-1.1h1v2.1h-2.1z" fill="%23fff"/%3E%3Cpath d="m10 110.6v2.8h-1v-2.8z" fill="%23fff"/%3E%3Cpath d="m22 107.1v-1.1h-1.1v-1h2.1v2.1z" fill="%23fff"/%3E%3Cpath d="m22 110.6v2.8h1v-2.8z" fill="%23fff"/%3E%3Cpath d="m10 107.1v-1.1h1.1v-1h-2.1v2.1z" fill="%23fff"/%3E%3Cpath d="m9 116.9h1v1.1h1.1v1h-2.1z" fill="%23fff"/%3E%3Cpath d="m17.4 118h-2.8v1h2.8z" fill="%23fff"/%3E%3C/svg%3E'); 1438 | } 1439 | 1440 | .icon--hidden { 1441 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m21.5085 15.8012c.5554-.5276 1.0351-1.134 1.421-1.8012h-1.1842c-1.2655 1.8142-3.3673 3-5.7454 3-2.3782 0-4.48-1.1858-5.7454-3h-1.18428c.38597.6673.86567 1.2737 1.42108 1.8013l-1.59482 1.5949.70712.7071 1.6573-1.6574c.7108.5234 1.5112.9321 2.3742 1.1988l-.6171 2.2213.9636.2676.6262-2.2543c.452.0793.9172.1207 1.3921.1207.4748 0 .9399-.0414 1.392-.1207l.6261 2.2543.9636-.2676-.617-2.2213c.863-.2666 1.6635-.6754 2.3743-1.1989l1.6576 1.6575.7071-.7071z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m21.5085 47.8012c.5554-.5276 1.0351-1.134 1.421-1.8012h-1.1842c-1.2655 1.8142-3.3673 3-5.7454 3-2.3782 0-4.48-1.1858-5.7454-3h-1.18428c.38597.6673.86567 1.2737 1.42108 1.8013l-1.59482 1.5949.70712.7071 1.6573-1.6574c.7108.5234 1.5112.9321 2.3742 1.1988l-.6171 2.2213.9636.2676.6262-2.2543c.452.0793.9172.1207 1.3921.1207.4748 0 .9399-.0414 1.392-.1207l.6261 2.2543.9636-.2676-.617-2.2213c.863-.2666 1.6635-.6754 2.3743-1.1989l1.6576 1.6575.7071-.7071z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m21.5085 79.8012c.5554-.5276 1.0351-1.134 1.421-1.8012h-1.1842c-1.2655 1.8142-3.3673 3-5.7454 3-2.3782 0-4.48-1.1858-5.7454-3h-1.18428c.38597.6673.86567 1.2737 1.42108 1.8013l-1.59482 1.5949.70712.7071 1.6573-1.6574c.7108.5234 1.5112.9321 2.3742 1.1988l-.6171 2.2213.9636.2676.6262-2.2543c.452.0793.9172.1207 1.3921.1207.4748 0 .9399-.0414 1.392-.1207l.6261 2.2543.9636-.2676-.617-2.2213c.863-.2666 1.6635-.6754 2.3743-1.1989l1.6576 1.6575.7071-.7071z" fill="%2318a0fb"/%3E%3Cpath d="m21.5085 111.801c.5554-.527 1.0351-1.134 1.421-1.801h-1.1842c-1.2655 1.814-3.3673 3-5.7454 3-2.3782 0-4.48-1.186-5.7454-3h-1.18428c.38597.667.86567 1.274 1.42108 1.801l-1.59482 1.595.70712.707 1.6573-1.657c.7108.523 1.5112.932 2.3742 1.199l-.6171 2.221.9636.268.6262-2.255c.452.08.9172.121 1.3921.121.4748 0 .9399-.041 1.392-.121l.6261 2.255.9636-.268-.617-2.221c.863-.267 1.6635-.676 2.3743-1.199l1.6576 1.657.7071-.707z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1442 | } 1443 | 1444 | .icon--hyperlink { 1445 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m13.5 18c1.9593 0 3.6262-1.2522 4.2439-3h1.0491c-.653 2.3085-2.7754 4-5.293 4-3.0376 0-5.5-2.4624-5.5-5.5s2.4624-5.5 5.5-5.5c2.5176 0 4.64 1.6915 5.293 4h-1.0491c-.6177-1.7478-2.2846-3-4.2439-3-2.4853 0-4.5 2.0147-4.5 4.5s2.0147 4.5 4.5 4.5z" fill-opacity=".8"/%3E%3Cpath d="m18.5 23c2.4853 0 4.5-2.0147 4.5-4.5s-2.0147-4.5-4.5-4.5c-1.9593 0-3.6262 1.2522-4.2439 3h-1.0491c.653-2.3085 2.7754-4 5.293-4 3.0376 0 5.5 2.4624 5.5 5.5s-2.4624 5.5-5.5 5.5c-2.5176 0-4.64-1.6915-5.293-4h1.0491c.6177 1.7478 2.2846 3 4.2439 3z" fill-opacity=".8"/%3E%3Cpath d="m13.5 50c1.9593 0 3.6262-1.2522 4.2439-3h1.0491c-.653 2.3085-2.7754 4-5.293 4-3.0376 0-5.5-2.4624-5.5-5.5s2.4624-5.5 5.5-5.5c2.5176 0 4.64 1.6915 5.293 4h-1.0491c-.6177-1.7478-2.2846-3-4.2439-3-2.4853 0-4.5 2.0147-4.5 4.5s2.0147 4.5 4.5 4.5z" fill-opacity=".3"/%3E%3Cpath d="m18.5 55c2.4853 0 4.5-2.0147 4.5-4.5s-2.0147-4.5-4.5-4.5c-1.9593 0-3.6262 1.2522-4.2439 3h-1.0491c.653-2.3085 2.7754-4 5.293-4 3.0376 0 5.5 2.4624 5.5 5.5s-2.4624 5.5-5.5 5.5c-2.5176 0-4.64-1.6915-5.293-4h1.0491c.6177 1.7478 2.2846 3 4.2439 3z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m13.5 82c1.9593 0 3.6262-1.2522 4.2439-3h1.0491c-.653 2.3085-2.7754 4-5.293 4-3.0376 0-5.5-2.4624-5.5-5.5s2.4624-5.5 5.5-5.5c2.5176 0 4.64 1.6915 5.293 4h-1.0491c-.6177-1.7478-2.2846-3-4.2439-3-2.4853 0-4.5 2.0147-4.5 4.5s2.0147 4.5 4.5 4.5z" fill="%2318a0fb"/%3E%3Cpath d="m18.5 87c2.4853 0 4.5-2.0147 4.5-4.5s-2.0147-4.5-4.5-4.5c-1.9593 0-3.6262 1.2522-4.2439 3h-1.0491c.653-2.3085 2.7754-4 5.293-4 3.0376 0 5.5 2.4624 5.5 5.5s-2.4624 5.5-5.5 5.5c-2.5176 0-4.64-1.6915-5.293-4h1.0491c.6177 1.7478 2.2846 3 4.2439 3z" fill="%2318a0fb"/%3E%3Cpath d="m13.5 114c1.9593 0 3.6262-1.252 4.2439-3h1.0491c-.653 2.309-2.7754 4-5.293 4-3.0376 0-5.5-2.462-5.5-5.5s2.4624-5.5 5.5-5.5c2.5176 0 4.64 1.691 5.293 4h-1.0491c-.6177-1.748-2.2846-3-4.2439-3-2.4853 0-4.5 2.015-4.5 4.5s2.0147 4.5 4.5 4.5z" fill="%23fff"/%3E%3Cpath d="m18.5 119c2.4853 0 4.5-2.015 4.5-4.5s-2.0147-4.5-4.5-4.5c-1.9593 0-3.6262 1.252-4.2439 3h-1.0491c.653-2.309 2.7754-4 5.293-4 3.0376 0 5.5 2.462 5.5 5.5s-2.4624 5.5-5.5 5.5c-2.5176 0-4.64-1.691-5.293-4h1.0491c.6177 1.748 2.2846 3 4.2439 3z" fill="%23fff"/%3E%3C/svg%3E'); 1446 | } 1447 | 1448 | .icon--image { 1449 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cg fill="%23000"%3E%3Cpath d="m20.6667 13.6667c0 1.2886-1.0447 2.3333-2.3334 2.3333-1.2886 0-2.3333-1.0447-2.3333-2.3333 0-1.2887 1.0447-2.3334 2.3333-2.3334 1.2887 0 2.3334 1.0447 2.3334 2.3334zm-1 0c0 .7363-.597 1.3333-1.3334 1.3333-.7363 0-1.3333-.597-1.3333-1.3333 0-.7364.597-1.3334 1.3333-1.3334.7364 0 1.3334.597 1.3334 1.3334z" fill-opacity=".8"/%3E%3Cpath d="m10 9c-.55228 0-1 .44772-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-12c0-.55228-.4477-1-1-1zm12 1h-12v7.7929l3.0833-3.0833 7.2905 7.2904h1.6262zm-12 12v-2.7929l3.0833-3.0833 5.8763 5.8762z" fill-opacity=".8"/%3E%3Cpath d="m20.6667 45.6667c0 1.2886-1.0447 2.3333-2.3334 2.3333-1.2886 0-2.3333-1.0447-2.3333-2.3333 0-1.2887 1.0447-2.3334 2.3333-2.3334 1.2887 0 2.3334 1.0447 2.3334 2.3334zm-1 0c0 .7363-.597 1.3333-1.3334 1.3333-.7363 0-1.3333-.597-1.3333-1.3333 0-.7364.597-1.3334 1.3333-1.3334.7364 0 1.3334.597 1.3334 1.3334z" fill-opacity=".3"/%3E%3Cpath d="m10 41c-.55228 0-1 .4477-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-12c0-.5523-.4477-1-1-1zm12 1h-12v7.7929l3.0833-3.0833 7.2905 7.2904h1.6262zm-12 12v-2.7929l3.0833-3.0833 5.8763 5.8762z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m20.6667 77.6667c0 1.2886-1.0447 2.3333-2.3334 2.3333-1.2886 0-2.3333-1.0447-2.3333-2.3333 0-1.2887 1.0447-2.3334 2.3333-2.3334 1.2887 0 2.3334 1.0447 2.3334 2.3334zm-1 0c0 .7363-.597 1.3333-1.3334 1.3333-.7363 0-1.3333-.597-1.3333-1.3333 0-.7364.597-1.3334 1.3333-1.3334.7364 0 1.3334.597 1.3334 1.3334z" fill="%2318a0fb"/%3E%3Cpath d="m10 73c-.55228 0-1 .4477-1 1v12c0 .5523.44772 1 1 1h12c.5523 0 1-.4477 1-1v-12c0-.5523-.4477-1-1-1zm12 1h-12v7.7929l3.0833-3.0833 7.2905 7.2904h1.6262zm-12 12v-2.7929l3.0833-3.0833 5.8763 5.8762z" fill="%2318a0fb"/%3E%3Cpath d="m20.6667 109.667c0 1.288-1.0447 2.333-2.3334 2.333-1.2886 0-2.3333-1.045-2.3333-2.333 0-1.289 1.0447-2.334 2.3333-2.334 1.2887 0 2.3334 1.045 2.3334 2.334zm-1 0c0 .736-.597 1.333-1.3334 1.333-.7363 0-1.3333-.597-1.3333-1.333 0-.737.597-1.334 1.3333-1.334.7364 0 1.3334.597 1.3334 1.334z" fill="%23fff"/%3E%3Cpath d="m10 105c-.55228 0-1 .448-1 1v12c0 .552.44772 1 1 1h12c.5523 0 1-.448 1-1v-12c0-.552-.4477-1-1-1zm12 1h-12v7.793l3.0833-3.083 7.2905 7.29h1.6262zm-12 12v-2.793l3.0833-3.083 5.8763 5.876z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1450 | } 1451 | 1452 | .icon--import { 1453 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m23 23v-6h-1v5h-12v-12h5v-1h-6v14z" fill-opacity=".8"/%3E%3Cpath d="m17 15c0-1.656.4715-2.8894 1.2911-3.7089.8195-.8196 2.0529-1.2911 3.7089-1.2911h1v-1h-1c-1.844 0-3.3606.52854-4.4161 1.5839-1.0554 1.0555-1.5839 2.5721-1.5839 4.4161v2.2929l-1.6464-1.6465-.7072.7072 2.8536 2.8535 2.8536-2.8535-.7072-.7072-1.6464 1.6465z" fill-opacity=".8"/%3E%3Cpath d="m23 55v-6h-1v5h-12v-12h5v-1h-6v14z" fill-opacity=".3"/%3E%3Cpath d="m17 47c0-1.656.4715-2.8894 1.2911-3.7089.8195-.8196 2.0529-1.2911 3.7089-1.2911h1v-1h-1c-1.844 0-3.3606.5285-4.4161 1.5839-1.0554 1.0555-1.5839 2.5721-1.5839 4.4161v2.2929l-1.6464-1.6465-.7072.7072 2.8536 2.8535 2.8536-2.8535-.7072-.7072-1.6464 1.6465z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m23 87v-6h-1v5h-12v-12h5v-1h-6v14z" fill="%2318a0fb"/%3E%3Cpath d="m17 79c0-1.656.4715-2.8894 1.2911-3.7089.8195-.8196 2.0529-1.2911 3.7089-1.2911h1v-1h-1c-1.844 0-3.3606.5285-4.4161 1.5839-1.0554 1.0555-1.5839 2.5721-1.5839 4.4161v2.2929l-1.6464-1.6465-.7072.7072 2.8536 2.8535 2.8536-2.8535-.7072-.7072-1.6464 1.6465z" fill="%2318a0fb"/%3E%3Cpath d="m23 119v-6h-1v5h-12v-12h5v-1h-6v14z" fill="%23fff"/%3E%3Cpath d="m17 111c0-1.656.4715-2.889 1.2911-3.709.8195-.82 2.0529-1.291 3.7089-1.291h1v-1h-1c-1.844 0-3.3606.529-4.4161 1.584-1.0554 1.055-1.5839 2.572-1.5839 4.416v2.293l-1.6464-1.647-.7072.708 2.8536 2.853 2.8536-2.853-.7072-.708-1.6464 1.647z" fill="%23fff"/%3E%3C/svg%3E'); 1454 | } 1455 | 1456 | .icon--instance { 1457 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m7.00037 15.9999 8.99983-8.99999 8.9999 8.99999-8.9999 9.0001zm8.99983 7.6565 7.6564-7.6565-7.6564-7.65648-7.65634 7.65648z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m7.00037 47.9999 8.99983-9 8.9999 9-8.9999 9.0001zm8.99983 7.6565 7.6564-7.6565-7.6564-7.6565-7.65634 7.6565z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m7.00037 79.9999 8.99983-9 8.9999 9-8.9999 9.0001zm8.99983 7.6565 7.6564-7.6565-7.6564-7.6565-7.65634 7.6565z" fill="%2318a0fb"/%3E%3Cpath d="m7.00037 112 8.99983-9 8.9999 9-8.9999 9zm8.99983 7.656 7.6564-7.656-7.6564-7.657-7.65634 7.657z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1458 | } 1459 | 1460 | .icon--layout-align-bottom { 1461 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m14.5 10v10h-2v-10z" fill-opacity=".8"/%3E%3Cpath d="m22.5 22v1h-13v-1z" fill-opacity=".8"/%3E%3Cpath d="m19.5 20v-6h-2v6z" fill-opacity=".8"/%3E%3Cpath d="m14.5 42v10h-2v-10z" fill-opacity=".3"/%3E%3Cpath d="m22.5 54v1h-13v-1z" fill-opacity=".3"/%3E%3Cpath d="m19.5 52v-6h-2v6z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m14.5 74v10h-2v-10z" fill="%2318a0fb"/%3E%3Cpath d="m22.5 86v1h-13v-1z" fill="%2318a0fb"/%3E%3Cpath d="m19.5 84v-6h-2v6z" fill="%2318a0fb"/%3E%3Cpath d="m14.5 106v10h-2v-10z" fill="%23fff"/%3E%3Cpath d="m22.5 118v1h-13v-1z" fill="%23fff"/%3E%3Cpath d="m19.5 116v-6h-2v6z" fill="%23fff"/%3E%3C/svg%3E'); 1462 | } 1463 | 1464 | .icon--layout-align-horiz-cent { 1465 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m16.5 9.5h-1v3h-5v2h5v3h-3v2h3v3h1v-3h3v-2h-3v-3h5v-2h-5z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m16.5 41.5h-1v3h-5v2h5v3h-3v2h3v3h1v-3h3v-2h-3v-3h5v-2h-5z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m16.5 73.5h-1v3h-5v2h5v3h-3v2h3v3h1v-3h3v-2h-3v-3h5v-2h-5z" fill="%2318a0fb"/%3E%3Cpath d="m16.5 105.5h-1v3h-5v2h5v3h-3v2h3v3h1v-3h3v-2h-3v-3h5v-2h-5z" fill="%23fff"/%3E%3C/svg%3E'); 1466 | } 1467 | 1468 | .icon--layout-align-left { 1469 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m10 22.5h-1v-13h1z" fill-opacity=".8"/%3E%3Cpath d="m22 14.5h-10v-2h10z" fill-opacity=".8"/%3E%3Cpath d="m12 19.5h6v-2h-6z" fill-opacity=".8"/%3E%3Cpath d="m10 54.5h-1v-13h1z" fill-opacity=".3"/%3E%3Cpath d="m22 46.5h-10v-2h10z" fill-opacity=".3"/%3E%3Cpath d="m12 51.5h6v-2h-6z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m10 86.5h-1v-13h1z" fill="%2318a0fb"/%3E%3Cpath d="m22 78.5h-10v-2h10z" fill="%2318a0fb"/%3E%3Cpath d="m12 83.5h6v-2h-6z" fill="%2318a0fb"/%3E%3Cpath d="m10 118.5h-1v-13h1z" fill="%23fff"/%3E%3Cpath d="m22 110.5h-10v-2h10z" fill="%23fff"/%3E%3Cpath d="m12 115.5h6v-2h-6z" fill="%23fff"/%3E%3C/svg%3E'); 1470 | } 1471 | 1472 | .icon--layout-align-right { 1473 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m22 22.5h1v-13h-1z" fill-opacity=".8"/%3E%3Cpath d="m10 14.5h10v-2h-10z" fill-opacity=".8"/%3E%3Cpath d="m20 19.5h-6v-2h6z" fill-opacity=".8"/%3E%3Cpath d="m22 54.5h1v-13h-1z" fill-opacity=".3"/%3E%3Cpath d="m10 46.5h10v-2h-10z" fill-opacity=".3"/%3E%3Cpath d="m20 51.5h-6v-2h6z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m22 86.5h1v-13h-1z" fill="%2318a0fb"/%3E%3Cpath d="m10 78.5h10v-2h-10z" fill="%2318a0fb"/%3E%3Cpath d="m20 83.5h-6v-2h6z" fill="%2318a0fb"/%3E%3Cpath d="m22 118.5h1v-13h-1z" fill="%23fff"/%3E%3Cpath d="m10 110.5h10v-2h-10z" fill="%23fff"/%3E%3Cpath d="m20 115.5h-6v-2h6z" fill="%23fff"/%3E%3C/svg%3E'); 1474 | } 1475 | 1476 | .icon--layout-align-top { 1477 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m14.5 22v-10h-2v10z" fill-opacity=".8"/%3E%3Cpath d="m22.5 10v-1h-13v1z" fill-opacity=".8"/%3E%3Cpath d="m19.5 12v6h-2v-6z" fill-opacity=".8"/%3E%3Cpath d="m14.5 54v-10h-2v10z" fill-opacity=".3"/%3E%3Cpath d="m22.5 42v-1h-13v1z" fill-opacity=".3"/%3E%3Cpath d="m19.5 44v6h-2v-6z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m14.5 86v-10h-2v10z" fill="%2318a0fb"/%3E%3Cpath d="m22.5 74v-1h-13v1z" fill="%2318a0fb"/%3E%3Cpath d="m19.5 76v6h-2v-6z" fill="%2318a0fb"/%3E%3Cpath d="m14.5 118v-10h-2v10z" fill="%23fff"/%3E%3Cpath d="m22.5 106v-1h-13v1z" fill="%23fff"/%3E%3Cpath d="m19.5 108v6h-2v-6z" fill="%23fff"/%3E%3C/svg%3E'); 1478 | } 1479 | 1480 | .icon--layout-align-vert-cent { 1481 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m12.5 15.5v-5h2v5h3v-3h2v3h3v1h-3v3h-2v-3h-3v5h-2v-5h-3v-1z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m12.5 47.5v-5h2v5h3v-3h2v3h3v1h-3v3h-2v-3h-3v5h-2v-5h-3v-1z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m12.5 79.5v-5h2v5h3v-3h2v3h3v1h-3v3h-2v-3h-3v5h-2v-5h-3v-1z" fill="%2318a0fb"/%3E%3Cpath d="m12.5 111.5v-5h2v5h3v-3h2v3h3v1h-3v3h-2v-3h-3v5h-2v-5h-3v-1z" fill="%23fff"/%3E%3C/svg%3E'); 1482 | } 1483 | 1484 | .icon--layout-grid-columns { 1485 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m9 9h3v14h-3z" fill-opacity=".8"/%3E%3Cpath d="m14.5 9h3v14h-3z" fill-opacity=".8"/%3E%3Cpath d="m20 9h3v14h-3z" fill-opacity=".8"/%3E%3Cpath d="m9 41h3v14h-3z" fill-opacity=".3"/%3E%3Cpath d="m14.5 41h3v14h-3z" fill-opacity=".3"/%3E%3Cpath d="m20 41h3v14h-3z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m9 73h3v14h-3z" fill="%2318a0fb"/%3E%3Cpath d="m14.5 73h3v14h-3z" fill="%2318a0fb"/%3E%3Cpath d="m20 73h3v14h-3z" fill="%2318a0fb"/%3E%3Cpath d="m9 105h3v14h-3z" fill="%23fff"/%3E%3Cpath d="m14.5 105h3v14h-3z" fill="%23fff"/%3E%3Cpath d="m20 105h3v14h-3z" fill="%23fff"/%3E%3C/svg%3E'); 1486 | } 1487 | 1488 | .icon--layout-grid-rows { 1489 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m9 9h14v3h-14z" fill-opacity=".8"/%3E%3Cpath d="m9 14.5h14v3h-14z" fill-opacity=".8"/%3E%3Cpath d="m9 20h14v3h-14z" fill-opacity=".8"/%3E%3Cpath d="m9 41h14v3h-14z" fill-opacity=".3"/%3E%3Cpath d="m9 46.5h14v3h-14z" fill-opacity=".3"/%3E%3Cpath d="m9 52h14v3h-14z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m9 73h14v3h-14z" fill="%2318a0fb"/%3E%3Cpath d="m9 78.5h14v3h-14z" fill="%2318a0fb"/%3E%3Cpath d="m9 84h14v3h-14z" fill="%2318a0fb"/%3E%3Cpath d="m9 105h14v3h-14z" fill="%23fff"/%3E%3Cpath d="m9 110.5h14v3h-14z" fill="%23fff"/%3E%3Cpath d="m9 116h14v3h-14z" fill="%23fff"/%3E%3C/svg%3E'); 1490 | } 1491 | 1492 | .icon--layout-grid-uniform { 1493 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m9 9h3v3h-3z" fill-opacity=".8"/%3E%3Cpath d="m20 9h3v3h-3z" fill-opacity=".8"/%3E%3Cpath d="m14.5 9h3v3h-3z" fill-opacity=".8"/%3E%3Cpath d="m9 14.5h3v3h-3z" fill-opacity=".8"/%3E%3Cpath d="m20 14.5h3v3h-3z" fill-opacity=".8"/%3E%3Cpath d="m14.5 14.5h3v3h-3z" fill-opacity=".8"/%3E%3Cpath d="m9 20h3v3h-3z" fill-opacity=".8"/%3E%3Cpath d="m20 20h3v3h-3z" fill-opacity=".8"/%3E%3Cpath d="m14.5 20h3v3h-3z" fill-opacity=".8"/%3E%3Cpath d="m9 41h3v3h-3z" fill-opacity=".3"/%3E%3Cpath d="m20 41h3v3h-3z" fill-opacity=".3"/%3E%3Cpath d="m14.5 41h3v3h-3z" fill-opacity=".3"/%3E%3Cpath d="m9 46.5h3v3h-3z" fill-opacity=".3"/%3E%3Cpath d="m20 46.5h3v3h-3z" fill-opacity=".3"/%3E%3Cpath d="m14.5 46.5h3v3h-3z" fill-opacity=".3"/%3E%3Cpath d="m9 52h3v3h-3z" fill-opacity=".3"/%3E%3Cpath d="m20 52h3v3h-3z" fill-opacity=".3"/%3E%3Cpath d="m14.5 52h3v3h-3z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m9 73h3v3h-3z" fill="%2318a0fb"/%3E%3Cpath d="m20 73h3v3h-3z" fill="%2318a0fb"/%3E%3Cpath d="m14.5 73h3v3h-3z" fill="%2318a0fb"/%3E%3Cpath d="m9 78.5h3v3h-3z" fill="%2318a0fb"/%3E%3Cpath d="m20 78.5h3v3h-3z" fill="%2318a0fb"/%3E%3Cpath d="m14.5 78.5h3v3h-3z" fill="%2318a0fb"/%3E%3Cpath d="m9 84h3v3h-3z" fill="%2318a0fb"/%3E%3Cpath d="m20 84h3v3h-3z" fill="%2318a0fb"/%3E%3Cpath d="m14.5 84h3v3h-3z" fill="%2318a0fb"/%3E%3Cpath d="m9 105h3v3h-3z" fill="%23fff"/%3E%3Cpath d="m20 105h3v3h-3z" fill="%23fff"/%3E%3Cpath d="m14.5 105h3v3h-3z" fill="%23fff"/%3E%3Cpath d="m9 110.5h3v3h-3z" fill="%23fff"/%3E%3Cpath d="m20 110.5h3v3h-3z" fill="%23fff"/%3E%3Cpath d="m14.5 110.5h3v3h-3z" fill="%23fff"/%3E%3Cpath d="m9 116h3v3h-3z" fill="%23fff"/%3E%3Cpath d="m20 116h3v3h-3z" fill="%23fff"/%3E%3Cpath d="m14.5 116h3v3h-3z" fill="%23fff"/%3E%3C/svg%3E'); 1494 | } 1495 | 1496 | .icon--library { 1497 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m7 12.0898s.87687-2.0898 4.5-2.0898c2.0378 0 3.2069.6611 3.8398 1.2397.3516.3214.5378.6174.6154.7603h.0896c.0776-.1429.2638-.4389.6154-.7603.6329-.5786 1.802-1.2397 3.8398-1.2397 3.6231 0 4.5 2.0898 4.5 2.0898v8.9102h-1.4875c-2.3815-1.0176-4.408-.681-5.8864.1813-.3793.2213-.7148.4985-.995.8187h-1.2579c-.2803-.3225-.6164-.6017-.997-.8246-1.4773-.8654-3.006-1.1939-5.3887-.1754h-1.9875zm8.5.387h-.4192c-.0024.0011-.0024.0012-.0024.0013l.0006.0012.001.0024.0018.0042.0028.0065c.0015.0033.0023.0049.0022.0048-.0001-.0002-.0034-.0071-.0102-.0197-.0137-.0252-.0414-.0729-.0862-.1361-.0893-.126-.246-.313-.4955-.507-.4849-.3769-1.3904-.8344-2.9949-.8344s-2.50998.4575-2.99494.8344c-.24946.194-.4062.381-.49549.507l-.00957.0137v7.6449h.78741c1.21949-.4959 2.29809-.6896 3.30659-.6161 1.0638.0775 1.964.4462 2.7877.9287.2176.1275.4243.2702.6183.4266zm1 8.2688v-8.2688h.4192c.0024.0011.0024.0012.0024.0013l-.0006.0012-.001.0024-.0018.0042-.0028.0065-.0022.0047c.0001-.0002.0034-.007.0102-.0196.0137-.0252.0414-.0729.0862-.1361.0893-.126.246-.313.4955-.507.4849-.3769 1.3904-.8344 2.9949-.8344s2.51.4575 2.9949.8344c.2495.194.4062.381.4955.507l.0096.0137v7.6449h-.2884c-2.5969-1.0455-4.8842-.6771-6.5894.3176-.219.1278-.427.2709-.6222.428z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m7 44.0898s.87687-2.0898 4.5-2.0898c2.0378 0 3.2069.6611 3.8398 1.2397.3516.3214.5378.6174.6154.7603h.0896c.0776-.1429.2638-.4389.6154-.7603.6329-.5786 1.802-1.2397 3.8398-1.2397 3.6231 0 4.5 2.0898 4.5 2.0898v8.9102h-1.4875c-2.3815-1.0176-4.408-.681-5.8864.1813-.3793.2213-.7148.4985-.995.8187h-1.2579c-.2803-.3225-.6164-.6017-.997-.8246-1.4773-.8654-3.006-1.1939-5.3887-.1754h-1.9875zm8.5.387h-.4192c-.0024.0011-.0024.0012-.0024.0013l.0006.0012.001.0024.0018.0042.0028.0065c.0015.0033.0023.0049.0022.0048-.0001-.0002-.0034-.0071-.0102-.0197-.0137-.0252-.0414-.0729-.0862-.1361-.0893-.126-.246-.313-.4955-.507-.4849-.3769-1.3904-.8344-2.9949-.8344s-2.50998.4575-2.99494.8344c-.24946.194-.4062.381-.49549.507l-.00957.0137v7.6449h.78741c1.21949-.4959 2.29809-.6896 3.30659-.6161 1.0638.0775 1.964.4462 2.7877.9287.2176.1275.4243.2702.6183.4266zm1 8.2688v-8.2688h.4192c.0024.0011.0024.0012.0024.0013l-.0006.0012-.001.0024-.0018.0042-.0028.0065-.0022.0047c.0001-.0002.0034-.007.0102-.0196.0137-.0252.0414-.0729.0862-.1361.0893-.126.246-.313.4955-.507.4849-.3769 1.3904-.8344 2.9949-.8344s2.51.4575 2.9949.8344c.2495.194.4062.381.4955.507l.0096.0137v7.6449h-.2884c-2.5969-1.0455-4.8842-.6771-6.5894.3176-.219.1278-.427.2709-.6222.428z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m7 76.0898s.87687-2.0898 4.5-2.0898c2.0378 0 3.2069.6611 3.8398 1.2397.3516.3214.5378.6174.6154.7603h.0896c.0776-.1429.2638-.4389.6154-.7603.6329-.5786 1.802-1.2397 3.8398-1.2397 3.6231 0 4.5 2.0898 4.5 2.0898v8.9102h-1.4875c-2.3815-1.0176-4.408-.681-5.8864.1813-.3793.2213-.7148.4985-.995.8187h-1.2579c-.2803-.3225-.6164-.6017-.997-.8246-1.4773-.8654-3.006-1.1939-5.3887-.1754h-1.9875zm8.5.387h-.4192c-.0024.0011-.0024.0012-.0024.0013l.0006.0012.001.0024.0018.0042.0028.0065c.0015.0033.0023.0049.0022.0048-.0001-.0002-.0034-.0071-.0102-.0197-.0137-.0252-.0414-.0729-.0862-.1361-.0893-.126-.246-.313-.4955-.507-.4849-.3769-1.3904-.8344-2.9949-.8344s-2.50998.4575-2.99494.8344c-.24946.194-.4062.381-.49549.507l-.00957.0137v7.6449h.78741c1.21949-.4959 2.29809-.6896 3.30659-.6161 1.0638.0775 1.964.4462 2.7877.9287.2176.1275.4243.2702.6183.4266zm1 8.2688v-8.2688h.4192c.0024.0011.0024.0012.0024.0013l-.0006.0012-.001.0024-.0018.0042-.0028.0065-.0022.0047c.0001-.0002.0034-.007.0102-.0196.0137-.0252.0414-.0729.0862-.1361.0893-.126.246-.313.4955-.507.4849-.3769 1.3904-.8344 2.9949-.8344s2.51.4575 2.9949.8344c.2495.194.4062.381.4955.507l.0096.0137v7.6449h-.2884c-2.5969-1.0455-4.8842-.6771-6.5894.3176-.219.1278-.427.2709-.6222.428z" fill="%2318a0fb"/%3E%3Cpath d="m7 108.09s.87687-2.09 4.5-2.09c2.0378 0 3.2069.661 3.8398 1.24.3516.321.5378.617.6154.76h.0896c.0776-.143.2638-.439.6154-.76.6329-.579 1.802-1.24 3.8398-1.24 3.6231 0 4.5 2.09 4.5 2.09v8.91h-1.4875c-2.3815-1.018-4.408-.681-5.8864.181-.3793.222-.7148.499-.995.819h-1.2579c-.2803-.322-.6164-.602-.997-.825-1.4773-.865-3.006-1.193-5.3887-.175h-1.9875zm8.5.387h-.4192c-.0024.001-.0024.001-.0024.001l.0006.001.001.003.0018.004.0028.006c.0015.004.0023.005.0022.005s-.0034-.007-.0102-.019c-.0137-.026-.0414-.073-.0862-.137-.0893-.126-.246-.313-.4955-.507-.4849-.377-1.3904-.834-2.9949-.834s-2.50998.457-2.99494.834c-.24946.194-.4062.381-.49549.507l-.00957.014v7.645h.78741c1.21949-.496 2.29809-.69 3.30659-.616 1.0638.077 1.964.446 2.7877.929.2176.127.4243.27.6183.426zm1 8.269v-8.269h.4192c.0024.001.0024.001.0024.001l-.0006.001-.001.003-.0018.004-.0028.006-.0022.005c.0001 0 .0034-.007.0102-.019.0137-.026.0414-.073.0862-.137.0893-.126.246-.313.4955-.507.4849-.377 1.3904-.834 2.9949-.834s2.51.457 2.9949.834c.2495.194.4062.381.4955.507l.0096.014v7.645h-.2884c-2.5969-1.045-4.8842-.677-6.5894.318-.219.127-.427.271-.6222.428z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1498 | } 1499 | 1500 | .icon--link-broken { 1501 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m18 14v-2c0-1.1046-.8954-2-2-2s-2 .8954-2 2v2h-1v-2c0-1.6569 1.3431-3 3-3s3 1.3431 3 3v2z" fill-opacity=".8"/%3E%3Cpath d="m19 18h-1v2c0 1.1046-.8954 2-2 2s-2-.8954-2-2v-2h-1v2c0 1.6569 1.3431 3 3 3s3-1.3431 3-3z" fill-opacity=".8"/%3E%3Cpath d="m18 46v-2c0-1.1046-.8954-2-2-2s-2 .8954-2 2v2h-1v-2c0-1.6569 1.3431-3 3-3s3 1.3431 3 3v2z" fill-opacity=".3"/%3E%3Cpath d="m19 50h-1v2c0 1.1046-.8954 2-2 2s-2-.8954-2-2v-2h-1v2c0 1.6569 1.3431 3 3 3s3-1.3431 3-3z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m18 78v-2c0-1.1046-.8954-2-2-2s-2 .8954-2 2v2h-1v-2c0-1.6569 1.3431-3 3-3s3 1.3431 3 3v2z" fill="%2318a0fb"/%3E%3Cpath d="m19 82h-1v2c0 1.1046-.8954 2-2 2s-2-.8954-2-2v-2h-1v2c0 1.6569 1.3431 3 3 3s3-1.3431 3-3z" fill="%2318a0fb"/%3E%3Cpath d="m18 110v-2c0-1.105-.8954-2-2-2s-2 .895-2 2v2h-1v-2c0-1.657 1.3431-3 3-3s3 1.343 3 3v2z" fill="%23fff"/%3E%3Cpath d="m19 114h-1v2c0 1.105-.8954 2-2 2s-2-.895-2-2v-2h-1v2c0 1.657 1.3431 3 3 3s3-1.343 3-3z" fill="%23fff"/%3E%3C/svg%3E'); 1502 | } 1503 | 1504 | .icon--link-connected { 1505 | background-image: url("data:image/svg+xml,%3Csvg fill='none' height='128' viewBox='0 0 32 128' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000'%3E%3Cpath d='m16 10c1.1046 0 2 .8954 2 2v2h1v-2c0-1.6569-1.3431-3-3-3s-3 1.3431-3 3v2h1v-2c0-1.1046.8954-2 2-2z' fill-opacity='.8'/%3E%3Cpath d='m18 18h1v2c0 1.6569-1.3431 3-3 3s-3-1.3431-3-3v-2h1v2c0 1.1046.8954 2 2 2s2-.8954 2-2z' fill-opacity='.8'/%3E%3Cpath d='m15.5 13v6h1v-6z' fill-opacity='.8'/%3E%3Cpath d='m16 42c1.1046 0 2 .8954 2 2v2h1v-2c0-1.6569-1.3431-3-3-3s-3 1.3431-3 3v2h1v-2c0-1.1046.8954-2 2-2z' fill-opacity='.3'/%3E%3Cpath d='m18 50h1v2c0 1.6569-1.3431 3-3 3s-3-1.3431-3-3v-2h1v2c0 1.1046.8954 2 2 2s2-.8954 2-2z' fill-opacity='.3'/%3E%3Cpath d='m15.5 45v6h1v-6z' fill-opacity='.3'/%3E%3C/g%3E%3Cpath d='m16 74c1.1046 0 2 .8954 2 2v2h1v-2c0-1.6569-1.3431-3-3-3s-3 1.3431-3 3v2h1v-2c0-1.1046.8954-2 2-2z' fill='%2318a0fb'/%3E%3Cpath d='m18 82h1v2c0 1.6569-1.3431 3-3 3s-3-1.3431-3-3v-2h1v2c0 1.1046.8954 2 2 2s2-.8954 2-2z' fill='%2318a0fb'/%3E%3Cpath d='m15.5 77v6h1v-6z' fill='%2318a0fb'/%3E%3Cpath d='m16 106c1.1046 0 2 .895 2 2v2h1v-2c0-1.657-1.3431-3-3-3s-3 1.343-3 3v2h1v-2c0-1.105.8954-2 2-2z' fill='%23fff'/%3E%3Cpath d='m18 114h1v2c0 1.657-1.3431 3-3 3s-3-1.343-3-3v-2h1v2c0 1.105.8954 2 2 2s2-.895 2-2z' fill='%23fff'/%3E%3Cpath d='m15.5 109v6h1v-6z' fill='%23fff'/%3E%3C/svg%3E"); 1506 | } 1507 | 1508 | .icon--list-detailed { 1509 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m12 10h-2v1h2z" fill-opacity=".8"/%3E%3Cpath d="m12 20h-2v1h2z" fill-opacity=".8"/%3E%3Cpath d="m10 15h2v1h-2z" fill-opacity=".8"/%3E%3Cpath d="m22 10h-8v1h8z" fill-opacity=".8"/%3E%3Cpath d="m14 20h8v1h-8z" fill-opacity=".8"/%3E%3Cpath d="m22 15h-8v1h8z" fill-opacity=".8"/%3E%3Cpath d="m12 42h-2v1h2z" fill-opacity=".3"/%3E%3Cpath d="m12 52h-2v1h2z" fill-opacity=".3"/%3E%3Cpath d="m10 47h2v1h-2z" fill-opacity=".3"/%3E%3Cpath d="m22 42h-8v1h8z" fill-opacity=".3"/%3E%3Cpath d="m14 52h8v1h-8z" fill-opacity=".3"/%3E%3Cpath d="m22 47h-8v1h8z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m12 74h-2v1h2z" fill="%2318a0fb"/%3E%3Cpath d="m12 84h-2v1h2z" fill="%2318a0fb"/%3E%3Cpath d="m10 79h2v1h-2z" fill="%2318a0fb"/%3E%3Cpath d="m22 74h-8v1h8z" fill="%2318a0fb"/%3E%3Cpath d="m14 84h8v1h-8z" fill="%2318a0fb"/%3E%3Cpath d="m22 79h-8v1h8z" fill="%2318a0fb"/%3E%3Cpath d="m12 106h-2v1h2z" fill="%23fff"/%3E%3Cpath d="m12 116h-2v1h2z" fill="%23fff"/%3E%3Cpath d="m10 111h2v1h-2z" fill="%23fff"/%3E%3Cpath d="m22 106h-8v1h8z" fill="%23fff"/%3E%3Cpath d="m14 116h8v1h-8z" fill="%23fff"/%3E%3Cpath d="m22 111h-8v1h8z" fill="%23fff"/%3E%3C/svg%3E'); 1510 | } 1511 | 1512 | .icon--list { 1513 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m23 10h-14v1h14z" fill-opacity=".8"/%3E%3Cpath d="m9 15.5h14v1h-14z" fill-opacity=".8"/%3E%3Cpath d="m9 21h14v1h-14z" fill-opacity=".8"/%3E%3Cpath d="m23 42h-14v1h14z" fill-opacity=".3"/%3E%3Cpath d="m9 47.5h14v1h-14z" fill-opacity=".3"/%3E%3Cpath d="m9 53h14v1h-14z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m23 74h-14v1h14z" fill="%2318a0fb"/%3E%3Cpath d="m9 79.5h14v1h-14z" fill="%2318a0fb"/%3E%3Cpath d="m9 85h14v1h-14z" fill="%2318a0fb"/%3E%3Cpath d="m23 106h-14v1h14z" fill="%23fff"/%3E%3Cpath d="m9 111.5h14v1h-14z" fill="%23fff"/%3E%3Cpath d="m9 117h14v1h-14z" fill="%23fff"/%3E%3C/svg%3E'); 1514 | } 1515 | 1516 | .icon--lock-unlocked { 1517 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m18 15h.5c.2761 0 .5.2239.5.5v5c0 .2761-.2239.5-.5.5h-6c-.2761 0-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5h4.5v-2.5c0-1.3807 1.1193-2.5 2.5-2.5s2.5 1.1193 2.5 2.5v1.5h-1v-1.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5 1.5z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m18 47h.5c.2761 0 .5.2239.5.5v5c0 .2761-.2239.5-.5.5h-6c-.2761 0-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5h4.5v-2.5c0-1.3807 1.1193-2.5 2.5-2.5s2.5 1.1193 2.5 2.5v1.5h-1v-1.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5 1.5z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m18 79h.5c.2761 0 .5.2239.5.5v5c0 .2761-.2239.5-.5.5h-6c-.2761 0-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5h4.5v-2.5c0-1.3807 1.1193-2.5 2.5-2.5s2.5 1.1193 2.5 2.5v1.5h-1v-1.5c0-.8284-.6716-1.5-1.5-1.5s-1.5.6716-1.5 1.5z" fill="%2318a0fb"/%3E%3Cpath d="m18 111h.5c.2761 0 .5.224.5.5v5c0 .276-.2239.5-.5.5h-6c-.2761 0-.5-.224-.5-.5v-5c0-.276.2239-.5.5-.5h4.5v-2.5c0-1.381 1.1193-2.5 2.5-2.5s2.5 1.119 2.5 2.5v1.5h-1v-1.5c0-.828-.6716-1.5-1.5-1.5s-1.5.672-1.5 1.5z" fill="%23fff"/%3E%3C/svg%3E'); 1518 | } 1519 | 1520 | .icon--lock { 1521 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m13.5 15v-1.5c0-1.3807 1.1193-2.5 2.5-2.5s2.5 1.1193 2.5 2.5v1.5h.5c.2761 0 .5.2239.5.5v5c0 .2761-.2239.5-.5.5h-6c-.2761 0-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5zm4-1.5v1.5h-3v-1.5c0-.8284.6716-1.5 1.5-1.5s1.5.6716 1.5 1.5z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m13.5 47v-1.5c0-1.3807 1.1193-2.5 2.5-2.5s2.5 1.1193 2.5 2.5v1.5h.5c.2761 0 .5.2239.5.5v5c0 .2761-.2239.5-.5.5h-6c-.2761 0-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5zm4-1.5v1.5h-3v-1.5c0-.8284.6716-1.5 1.5-1.5s1.5.6716 1.5 1.5z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m13.5 79v-1.5c0-1.3807 1.1193-2.5 2.5-2.5s2.5 1.1193 2.5 2.5v1.5h.5c.2761 0 .5.2239.5.5v5c0 .2761-.2239.5-.5.5h-6c-.2761 0-.5-.2239-.5-.5v-5c0-.2761.2239-.5.5-.5zm4-1.5v1.5h-3v-1.5c0-.8284.6716-1.5 1.5-1.5s1.5.6716 1.5 1.5z" fill="%2318a0fb"/%3E%3Cpath d="m13.5 111v-1.5c0-1.381 1.1193-2.5 2.5-2.5s2.5 1.119 2.5 2.5v1.5h.5c.2761 0 .5.224.5.5v5c0 .276-.2239.5-.5.5h-6c-.2761 0-.5-.224-.5-.5v-5c0-.276.2239-.5.5-.5zm4-1.5v1.5h-3v-1.5c0-.828.6716-1.5 1.5-1.5s1.5.672 1.5 1.5z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1522 | } 1523 | 1524 | .icon--mask { 1525 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m16 7.99893c-4.4188 0-8.00098 3.58217-8.00098 8.00107 0 4.4188 3.58218 8.001 8.00098 8.001 4.4189 0 8.0011-3.5822 8.0011-8.001 0-4.4189-3.5822-8.00107-8.0011-8.00107zm-1.965 1.27953c.6234-.18195 1.2828-.27953 1.965-.27953 3.8666 0 7.0011 3.13447 7.0011 7.00107 0 3.8665-3.1345 7.001-7.0011 7.001-.6815 0-1.3402-.0974-1.9631-.279 2.0967-1.4961 3.4638-3.949 3.4638-6.7211 0-2.7729-1.3679-5.2264-3.4657-6.72244z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m16 39.9989c-4.4188 0-8.00098 3.5822-8.00098 8.0011 0 4.4188 3.58218 8.001 8.00098 8.001 4.4189 0 8.0011-3.5822 8.0011-8.001 0-4.4189-3.5822-8.0011-8.0011-8.0011zm-1.965 1.2796c.6234-.182 1.2828-.2796 1.965-.2796 3.8666 0 7.0011 3.1345 7.0011 7.0011 0 3.8665-3.1345 7.001-7.0011 7.001-.6815 0-1.3402-.0974-1.9631-.279 2.0967-1.4961 3.4638-3.949 3.4638-6.7211 0-2.7729-1.3679-5.2264-3.4657-6.7224z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m16 71.9989c-4.4188 0-8.00098 3.5822-8.00098 8.0011 0 4.4188 3.58218 8.001 8.00098 8.001 4.4189 0 8.0011-3.5822 8.0011-8.001 0-4.4189-3.5822-8.0011-8.0011-8.0011zm-1.965 1.2796c.6234-.182 1.2828-.2796 1.965-.2796 3.8666 0 7.0011 3.1345 7.0011 7.0011 0 3.8665-3.1345 7.001-7.0011 7.001-.6815 0-1.3402-.0974-1.9631-.279 2.0967-1.4961 3.4638-3.949 3.4638-6.7211 0-2.7729-1.3679-5.2264-3.4657-6.7224z" fill="%2318a0fb"/%3E%3Cpath d="m16 103.999c-4.4188 0-8.00098 3.582-8.00098 8.001s3.58218 8.001 8.00098 8.001c4.4189 0 8.0011-3.582 8.0011-8.001s-3.5822-8.001-8.0011-8.001zm-1.965 1.279c.6234-.181 1.2828-.279 1.965-.279 3.8666 0 7.0011 3.134 7.0011 7.001s-3.1345 7.001-7.0011 7.001c-.6815 0-1.3402-.097-1.9631-.279 2.0967-1.496 3.4638-3.949 3.4638-6.721 0-2.773-1.3679-5.227-3.4657-6.723z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1526 | } 1527 | 1528 | .icon--minus { 1529 | background-image: url("data:image/svg+xml,%3Csvg fill='none' height='128' viewBox='0 0 32 128' width='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-rule='evenodd' fill-rule='evenodd'%3E%3Cpath d='m21.5 16.5h-11v-1h11z' fill='%23000' fill-opacity='.8'/%3E%3Cpath d='m21.5 48.5h-11v-1h11z' fill='%23000' fill-opacity='.3'/%3E%3Cpath d='m21.5 80.5h-11v-1h11z' fill='%2318a0fb'/%3E%3Cpath d='m21.5 112.5h-11v-1h11z' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E"); 1530 | } 1531 | 1532 | .icon--node-connect { 1533 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m15.5 9h-6.5v-1h7.5v5.708c.7355.3214 1.2865.9863 1.45 1.792h5.3429l-2.1465-2.1464.7072-.7072 3.3535 3.3536-3.3535 3.3536-.7072-.7072 2.1465-2.1464h-5.3429c-.1635.8057-.7145 1.4706-1.45 1.792v5.708h-7.5v-1h6.5v-4.5c-1.3807 0-2.5-1.1193-2.5-2.5s1.1193-2.5 2.5-2.5zm0 8.5c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m15.5 41h-6.5v-1h7.5v5.708c.7355.3214 1.2865.9863 1.45 1.792h5.3429l-2.1465-2.1464.7072-.7072 3.3535 3.3536-3.3535 3.3536-.7072-.7072 2.1465-2.1464h-5.3429c-.1635.8057-.7145 1.4706-1.45 1.792v5.708h-7.5v-1h6.5v-4.5c-1.3807 0-2.5-1.1193-2.5-2.5s1.1193-2.5 2.5-2.5zm0 8.5c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m15.5 73h-6.5v-1h7.5v5.708c.7355.3214 1.2865.9863 1.45 1.792h5.3429l-2.1465-2.1464.7072-.7072 3.3535 3.3536-3.3535 3.3536-.7072-.7072 2.1465-2.1464h-5.3429c-.1635.8057-.7145 1.4706-1.45 1.792v5.708h-7.5v-1h6.5v-4.5c-1.3807 0-2.5-1.1193-2.5-2.5s1.1193-2.5 2.5-2.5zm0 8.5c.8284 0 1.5-.6716 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5.6716 1.5 1.5 1.5z" fill="%2318a0fb"/%3E%3Cpath d="m15.5 105h-6.5v-1h7.5v5.708c.7355.321 1.2865.986 1.45 1.792h5.3429l-2.1465-2.146.7072-.708 3.3535 3.354-3.3535 3.354-.7072-.708 2.1465-2.146h-5.3429c-.1635.806-.7145 1.471-1.45 1.792v5.708h-7.5v-1h6.5v-4.5c-1.3807 0-2.5-1.119-2.5-2.5s1.1193-2.5 2.5-2.5zm0 8.5c.8284 0 1.5-.672 1.5-1.5s-.6716-1.5-1.5-1.5-1.5.672-1.5 1.5.6716 1.5 1.5 1.5z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1534 | } 1535 | 1536 | .icon--play { 1537 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m13 10.0979 9.4434 5.9021-9.4434 5.9021zm1 1.8042v8.1958l6.5566-4.0979z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m13 42.0979 9.4434 5.9021-9.4434 5.9021zm1 1.8042v8.1958l6.5566-4.0979z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m13 74.0979 9.4434 5.9021-9.4434 5.9021zm1 1.8042v8.1958l6.5566-4.0979z" fill="%2318a0fb"/%3E%3Cpath d="m13 106.098 9.4434 5.902-9.4434 5.902zm1 1.804v8.196l6.5566-4.098z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1538 | } 1539 | 1540 | .icon--plus { 1541 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m15.5 15.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m15.5 47.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m15.5 79.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z" fill="%2318a0fb"/%3E%3Cpath d="m15.5 111.5v-5h1v5h5v1h-5v5h-1v-5h-5v-1z" fill="%23fff"/%3E%3C/svg%3E'); 1542 | } 1543 | 1544 | .icon--recent { 1545 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m15 12v5h5v-1h-4v-4z" fill-opacity=".8"/%3E%3Cpath clip-rule="evenodd" d="m24 16c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8zm-1 0c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7 7 3.134 7 7z" fill-opacity=".8" fill-rule="evenodd"/%3E%3Cpath d="m15 44v5h5v-1h-4v-4z" fill-opacity=".3"/%3E%3Cpath clip-rule="evenodd" d="m24 48c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8zm-1 0c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7 7 3.134 7 7z" fill-opacity=".3" fill-rule="evenodd"/%3E%3C/g%3E%3Cpath d="m15 76v5h5v-1h-4v-4z" fill="%2318a0fb"/%3E%3Cpath clip-rule="evenodd" d="m24 80c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8zm-1 0c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7 7 3.134 7 7z" fill="%2318a0fb" fill-rule="evenodd"/%3E%3Cpath d="m15 108v5h5v-1h-4v-4z" fill="%23fff"/%3E%3Cpath clip-rule="evenodd" d="m24 112c0 4.418-3.5817 8-8 8s-8-3.582-8-8 3.5817-8 8-8 8 3.582 8 8zm-1 0c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7 7 3.134 7 7z" fill="%23fff" fill-rule="evenodd"/%3E%3C/svg%3E'); 1546 | } 1547 | 1548 | .icon--reset-instance { 1549 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m6.79291 15.5 8.70709-8.70709 8.7071 8.70709-.7071.7071-8-7.99998-7.29288 7.29288 7.29288 7.2929 4-4 .7071.7071-4.7071 4.7071z" fill-opacity=".8"/%3E%3Cpath d="m14.7071 15h2.2929c3.3137 0 6 2.6863 6 6 0 1.6569-.6716 3.1569-1.7574 4.2427l-.7071-.7072c.9049-.9048 1.4645-2.1548 1.4645-3.5355 0-2.7614-2.2386-5-5-5h-2.2929l1.6465 1.6465-.7072.7071-2.8535-2.8536 2.8535-2.8535.7072.7071z" fill-opacity=".8"/%3E%3Cpath d="m6.79291 47.5 8.70709-8.7071 8.7071 8.7071-.7071.7071-8-8-7.29288 7.2929 7.29288 7.2929 4-4 .7071.7071-4.7071 4.7071z" fill-opacity=".3"/%3E%3Cpath d="m14.7071 47h2.2929c3.3137 0 6 2.6863 6 6 0 1.6569-.6716 3.1569-1.7574 4.2427l-.7071-.7072c.9049-.9048 1.4645-2.1548 1.4645-3.5355 0-2.7614-2.2386-5-5-5h-2.2929l1.6465 1.6465-.7072.7071-2.8535-2.8536 2.8535-2.8535.7072.7071z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m6.79291 79.5 8.70709-8.7071 8.7071 8.7071-.7071.7071-8-8-7.29288 7.2929 7.29288 7.2929 4-4 .7071.7071-4.7071 4.7071z" fill="%2318a0fb"/%3E%3Cpath d="m14.7071 79h2.2929c3.3137 0 6 2.6863 6 6 0 1.6569-.6716 3.1569-1.7574 4.2427l-.7071-.7072c.9049-.9048 1.4645-2.1548 1.4645-3.5355 0-2.7614-2.2386-5-5-5h-2.2929l1.6465 1.6465-.7072.7071-2.8535-2.8536 2.8535-2.8535.7072.7071z" fill="%2318a0fb"/%3E%3Cpath d="m6.79291 111.5 8.70709-8.707 8.7071 8.707-.7071.707-8-8-7.29288 7.293 7.29288 7.293 4-4 .7071.707-4.7071 4.707z" fill="%23fff"/%3E%3Cpath d="m14.7071 111h2.2929c3.3137 0 6 2.686 6 6 0 1.657-.6716 3.157-1.7574 4.243l-.7071-.707c.9049-.905 1.4645-2.155 1.4645-3.536 0-2.761-2.2386-5-5-5h-2.2929l1.6465 1.646-.7072.708-2.8535-2.854 2.8535-2.854.7072.708z" fill="%23fff"/%3E%3C/svg%3E'); 1550 | } 1551 | 1552 | .icon--resize-to-fit { 1553 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m8.64648 9.35356 3.64642 3.64644h-2.2929v1h4v-4h-1v2.2929l-3.64641-3.64645z" fill-opacity=".8"/%3E%3Cpath d="m19.7071 13 3.6465-3.64644-.7071-.70711-3.6465 3.64645v-2.2929h-1v4h4v-1z" fill-opacity=".8"/%3E%3Cpath d="m19.7071 19 3.6465 3.6465-.7071.7071-3.6465-3.6465v2.2929h-1v-4h4v1z" fill-opacity=".8"/%3E%3Cpath d="m12.2929 19-3.64642 3.6465.70711.7071 3.64641-3.6465v2.2929h1v-4h-4v1z" fill-opacity=".8"/%3E%3Cpath d="m8.64648 41.3536 3.64642 3.6464h-2.2929v1h4v-4h-1v2.2929l-3.64641-3.6464z" fill-opacity=".3"/%3E%3Cpath d="m19.7071 45 3.6465-3.6464-.7071-.7071-3.6465 3.6464v-2.2929h-1v4h4v-1z" fill-opacity=".3"/%3E%3Cpath d="m19.7071 51 3.6465 3.6465-.7071.7071-3.6465-3.6465v2.2929h-1v-4h4v1z" fill-opacity=".3"/%3E%3Cpath d="m12.2929 51-3.64642 3.6465.70711.7071 3.64641-3.6465v2.2929h1v-4h-4v1z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m8.64648 73.3536 3.64642 3.6464h-2.2929v1h4v-4h-1v2.2929l-3.64641-3.6464z" fill="%2318a0fb"/%3E%3Cpath d="m19.7071 77 3.6465-3.6464-.7071-.7071-3.6465 3.6464v-2.2929h-1v4h4v-1z" fill="%2318a0fb"/%3E%3Cpath d="m19.7071 83 3.6465 3.6465-.7071.7071-3.6465-3.6465v2.2929h-1v-4h4v1z" fill="%2318a0fb"/%3E%3Cpath d="m12.2929 83-3.64642 3.6465.70711.7071 3.64641-3.6465v2.2929h1v-4h-4v1z" fill="%2318a0fb"/%3E%3Cpath d="m8.64648 105.354 3.64642 3.646h-2.2929v1h4v-4h-1v2.293l-3.64641-3.647z" fill="%23fff"/%3E%3Cpath d="m19.7071 109 3.6465-3.646-.7071-.708-3.6465 3.647v-2.293h-1v4h4v-1z" fill="%23fff"/%3E%3Cpath d="m19.7071 115 3.6465 3.646-.7071.708-3.6465-3.647v2.293h-1v-4h4v1z" fill="%23fff"/%3E%3Cpath d="m12.2929 115-3.64642 3.646.70711.708 3.64641-3.647v2.293h1v-4h-4v1z" fill="%23fff"/%3E%3C/svg%3E'); 1554 | } 1555 | 1556 | .icon--resolve-filled { 1557 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m16 23.9999c4.4183 0 8-3.5817 8-8s-3.5817-8.00002-8-8.00002-8 3.58172-8 8.00002 3.5817 8 8 8zm3.9111-9.6345-.8222-.7308-3.6125 4.0639-2.5875-2.5874-.7778.7778 3.4125 3.4123z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m16 55.9999c4.4183 0 8-3.5817 8-8s-3.5817-8-8-8-8 3.5817-8 8 3.5817 8 8 8zm3.9111-9.6345-.8222-.7308-3.6125 4.0639-2.5875-2.5874-.7778.7778 3.4125 3.4123z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m16 87.9999c4.4183 0 8-3.5817 8-8s-3.5817-8-8-8-8 3.5817-8 8 3.5817 8 8 8zm3.9111-9.6345-.8222-.7308-3.6125 4.0639-2.5875-2.5874-.7778.7778 3.4125 3.4123z" fill="%2318a0fb"/%3E%3Cpath d="m16 120c4.4183 0 8-3.582 8-8s-3.5817-8-8-8-8 3.582-8 8 3.5817 8 8 8zm3.9111-9.635-.8222-.73-3.6125 4.064-2.5875-2.588-.7778.778 3.4125 3.412z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1558 | } 1559 | 1560 | .icon--resolve { 1561 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m19.9111 14.3654-.8222-.7308-3.6125 4.0639-2.5875-2.5874-.7778.7778 3.4125 3.4123z" fill-opacity=".8"/%3E%3Cpath clip-rule="evenodd" d="m24 15.9999c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8.00002 8-8.00002 8 3.58172 8 8.00002zm-1 0c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7.00002 7-7.00002 7 3.13402 7 7.00002z" fill-opacity=".8" fill-rule="evenodd"/%3E%3Cpath d="m19.9111 46.3654-.8222-.7308-3.6125 4.0639-2.5875-2.5874-.7778.7778 3.4125 3.4123z" fill-opacity=".3"/%3E%3Cpath clip-rule="evenodd" d="m24 47.9999c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8zm-1 0c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7 7 3.134 7 7z" fill-opacity=".3" fill-rule="evenodd"/%3E%3C/g%3E%3Cpath d="m19.9111 78.3654-.8222-.7308-3.6125 4.0639-2.5875-2.5874-.7778.7778 3.4125 3.4123z" fill="%2318a0fb"/%3E%3Cpath clip-rule="evenodd" d="m24 79.9999c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8zm-1 0c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7 7 3.134 7 7z" fill="%2318a0fb" fill-rule="evenodd"/%3E%3Cpath d="m19.9111 110.365-.8222-.73-3.6125 4.064-2.5875-2.588-.7778.778 3.4125 3.412z" fill="%23fff"/%3E%3Cpath clip-rule="evenodd" d="m24 112c0 4.418-3.5817 8-8 8s-8-3.582-8-8 3.5817-8 8-8 8 3.582 8 8zm-1 0c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7 7 3.134 7 7z" fill="%23fff" fill-rule="evenodd"/%3E%3C/svg%3E'); 1562 | } 1563 | 1564 | .icon--restore { 1565 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m11.2071 11 1.1465 1.1465-.7072.7071-2.35351-2.3536 2.35351-2.35355.7072.70711-1.1465 1.14644h4.7929c3.8017.0344 6.873 3.1554 6.873 7 0 3.866-3.1056 7-6.9365 7s-6.9365-3.134-6.9365-7h1c0 3.3223 2.6664 6 5.9365 6s5.9365-2.6777 5.9365-6c0-3.3215-2.6651-5.9987-5.9341-6z" fill-opacity=".8"/%3E%3Cpath d="m14 14v5h5v-1h-4v-4z" fill-opacity=".8"/%3E%3Cpath d="m11.2071 43 1.1465 1.1465-.7072.7071-2.35351-2.3536 2.35351-2.3535.7072.7071-1.1465 1.1464h4.7929c3.8017.0344 6.873 3.1554 6.873 7 0 3.866-3.1056 7-6.9365 7s-6.9365-3.134-6.9365-7h1c0 3.3223 2.6664 6 5.9365 6s5.9365-2.6777 5.9365-6c0-3.3215-2.6651-5.9987-5.9341-6z" fill-opacity=".3"/%3E%3Cpath d="m14 46v5h5v-1h-4v-4z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m11.2071 75 1.1465 1.1465-.7072.7071-2.35351-2.3536 2.35351-2.3535.7072.7071-1.1465 1.1464h4.7929c3.8017.0344 6.873 3.1554 6.873 7 0 3.866-3.1056 7-6.9365 7s-6.9365-3.134-6.9365-7h1c0 3.3223 2.6664 6 5.9365 6s5.9365-2.6777 5.9365-6c0-3.3215-2.6651-5.9987-5.9341-6z" fill="%2318a0fb"/%3E%3Cpath d="m14 78v5h5v-1h-4v-4z" fill="%2318a0fb"/%3E%3Cpath d="m11.2071 107 1.1465 1.146-.7072.708-2.35351-2.354 2.35351-2.354.7072.708-1.1465 1.146h4.7929c3.8017.034 6.873 3.155 6.873 7 0 3.866-3.1056 7-6.9365 7s-6.9365-3.134-6.9365-7h1c0 3.322 2.6664 6 5.9365 6s5.9365-2.678 5.9365-6-2.6651-5.999-5.9341-6z" fill="%23fff"/%3E%3Cpath d="m14 110v5h5v-1h-4v-4z" fill="%23fff"/%3E%3C/svg%3E'); 1566 | } 1567 | 1568 | .icon--return { 1569 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m11.7072 14 2.6464 2.6464-.7071.7071-3.85353-3.8535 3.85353-3.85358.7071.70708-2.6464 2.6465h3.7929c3.5761 0 6.5 2.9238 6.5 6.5v1.5h-1v-1.5c0-3.0239-2.4762-5.5-5.5-5.5z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m11.7072 46 2.6464 2.6464-.7071.7071-3.85353-3.8535 3.85353-3.8536.7071.7071-2.6464 2.6465h3.7929c3.5761 0 6.5 2.9238 6.5 6.5v1.5h-1v-1.5c0-3.0239-2.4762-5.5-5.5-5.5z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m11.7072 78 2.6464 2.6464-.7071.7071-3.85353-3.8535 3.85353-3.8536.7071.7071-2.6464 2.6465h3.7929c3.5761 0 6.5 2.9238 6.5 6.5v1.5h-1v-1.5c0-3.0239-2.4762-5.5-5.5-5.5z" fill="%2318a0fb"/%3E%3Cpath d="m11.7072 110 2.6464 2.646-.7071.708-3.85353-3.854 3.85353-3.854.7071.708-2.6464 2.646h3.7929c3.5761 0 6.5 2.924 6.5 6.5v1.5h-1v-1.5c0-3.024-2.4762-5.5-5.5-5.5z" fill="%23fff"/%3E%3C/svg%3E'); 1570 | } 1571 | 1572 | .icon--search-large { 1573 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m18.8744 19.5815c-1.0453.8849-2.3975 1.4185-3.8744 1.4185-3.3137 0-6-2.6863-6-6s2.6863-6 6-6 6 2.6863 6 6c0 1.4769-.5336 2.8291-1.4185 3.8744l4.2721 4.272-.7072.7072zm1.1256-4.5815c0 2.7614-2.2386 5-5 5s-5-2.2386-5-5 2.2386-5 5-5 5 2.2386 5 5z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m18.8744 51.5815c-1.0453.8849-2.3975 1.4185-3.8744 1.4185-3.3137 0-6-2.6863-6-6s2.6863-6 6-6 6 2.6863 6 6c0 1.4769-.5336 2.8291-1.4185 3.8744l4.2721 4.272-.7072.7072zm1.1256-4.5815c0 2.7614-2.2386 5-5 5s-5-2.2386-5-5 2.2386-5 5-5 5 2.2386 5 5z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m18.8744 83.5815c-1.0453.8849-2.3975 1.4185-3.8744 1.4185-3.3137 0-6-2.6863-6-6s2.6863-6 6-6 6 2.6863 6 6c0 1.4769-.5336 2.8291-1.4185 3.8744l4.2721 4.272-.7072.7072zm1.1256-4.5815c0 2.7614-2.2386 5-5 5s-5-2.2386-5-5 2.2386-5 5-5 5 2.2386 5 5z" fill="%2318a0fb"/%3E%3Cpath d="m18.8744 115.582c-1.0453.884-2.3975 1.418-3.8744 1.418-3.3137 0-6-2.686-6-6s2.6863-6 6-6 6 2.686 6 6c0 1.477-.5336 2.829-1.4185 3.874l4.2721 4.272-.7072.708zm1.1256-4.582c0 2.761-2.2386 5-5 5s-5-2.239-5-5 2.2386-5 5-5 5 2.239 5 5z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1574 | } 1575 | 1576 | .icon--search { 1577 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m18.3972 18.6046c-.7793.625-1.7687.9988-2.8455.9988-2.5138 0-4.5517-2.0378-4.5517-4.5517 0-2.5138 2.0379-4.5517 4.5517-4.5517 2.5139 0 4.5517 2.0379 4.5517 4.5517 0 1.0769-.3739 2.0664-.999 2.8458l3.2491 3.2492-.7071.7071zm.7062-3.5529c0 1.9616-1.5901 3.5517-3.5517 3.5517-1.9615 0-3.5517-1.5901-3.5517-3.5517 0-1.9615 1.5902-3.5517 3.5517-3.5517 1.9616 0 3.5517 1.5902 3.5517 3.5517z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m18.3972 50.6046c-.7793.625-1.7687.9988-2.8455.9988-2.5138 0-4.5517-2.0378-4.5517-4.5517 0-2.5138 2.0379-4.5517 4.5517-4.5517 2.5139 0 4.5517 2.0379 4.5517 4.5517 0 1.0769-.3739 2.0664-.999 2.8458l3.2491 3.2492-.7071.7071zm.7062-3.5529c0 1.9616-1.5901 3.5517-3.5517 3.5517-1.9615 0-3.5517-1.5901-3.5517-3.5517 0-1.9615 1.5902-3.5517 3.5517-3.5517 1.9616 0 3.5517 1.5902 3.5517 3.5517z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m18.3972 82.6046c-.7793.625-1.7687.9988-2.8455.9988-2.5138 0-4.5517-2.0378-4.5517-4.5517 0-2.5138 2.0379-4.5517 4.5517-4.5517 2.5139 0 4.5517 2.0379 4.5517 4.5517 0 1.0769-.3739 2.0664-.999 2.8458l3.2491 3.2492-.7071.7071zm.7062-3.5529c0 1.9616-1.5901 3.5517-3.5517 3.5517-1.9615 0-3.5517-1.5901-3.5517-3.5517 0-1.9615 1.5902-3.5517 3.5517-3.5517 1.9616 0 3.5517 1.5902 3.5517 3.5517z" fill="%2318a0fb"/%3E%3Cpath d="m18.3972 114.605c-.7793.625-1.7687.998-2.8455.998-2.5138 0-4.5517-2.037-4.5517-4.551s2.0379-4.552 4.5517-4.552c2.5139 0 4.5517 2.038 4.5517 4.552 0 1.077-.3739 2.066-.999 2.846l3.2491 3.249-.7071.707zm.7062-3.553c0 1.961-1.5901 3.551-3.5517 3.551-1.9615 0-3.5517-1.59-3.5517-3.551 0-1.962 1.5902-3.552 3.5517-3.552 1.9616 0 3.5517 1.59 3.5517 3.552z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1578 | } 1579 | 1580 | .icon--share { 1581 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m20 9.5c-1.933 0-3.5 1.567-3.5 3.5 0 1.442.872 2.6803 2.1175 3.2164-1.1371.3667-2.0766 1.1736-2.6175 2.22-.5409-1.0464-1.4803-1.8533-2.6175-2.22 1.2455-.5361 2.1175-1.7744 2.1175-3.2164 0-1.933-1.567-3.5-3.5-3.5s-3.5 1.567-3.5 3.5c0 1.442.87203 2.6803 2.1175 3.2164-1.80889.5833-3.1175 2.2806-3.1175 4.2836v1.5h17v-1.5c0-2.003-1.3086-3.7003-3.1175-4.2836 1.2455-.5361 2.1175-1.7744 2.1175-3.2164 0-1.933-1.567-3.5-3.5-3.5zm-2.5 3.5c0-1.3807 1.1193-2.5 2.5-2.5 1.3808 0 2.5 1.1193 2.5 2.5s-1.1192 2.5-2.5 2.5c-1.3807 0-2.5-1.1193-2.5-2.5zm-1 8v-.5c0-1.933 1.567-3.5 3.5-3.5s3.5 1.567 3.5 3.5v.5zm-1-.5v.5h-7v-.5c0-1.933 1.567-3.5 3.5-3.5s3.5 1.567 3.5 3.5zm-6-7.5c0-1.3807 1.1193-2.5 2.5-2.5 1.3808 0 2.5 1.1193 2.5 2.5s-1.1192 2.5-2.5 2.5c-1.3807 0-2.5-1.1193-2.5-2.5z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m20 41.5c-1.933 0-3.5 1.567-3.5 3.5 0 1.442.872 2.6803 2.1175 3.2164-1.1371.3667-2.0766 1.1736-2.6175 2.22-.5409-1.0464-1.4803-1.8533-2.6175-2.22 1.2455-.5361 2.1175-1.7744 2.1175-3.2164 0-1.933-1.567-3.5-3.5-3.5s-3.5 1.567-3.5 3.5c0 1.442.87203 2.6803 2.1175 3.2164-1.80889.5833-3.1175 2.2806-3.1175 4.2836v1.5h17v-1.5c0-2.003-1.3086-3.7003-3.1175-4.2836 1.2455-.5361 2.1175-1.7744 2.1175-3.2164 0-1.933-1.567-3.5-3.5-3.5zm-2.5 3.5c0-1.3807 1.1193-2.5 2.5-2.5 1.3808 0 2.5 1.1193 2.5 2.5s-1.1192 2.5-2.5 2.5c-1.3807 0-2.5-1.1193-2.5-2.5zm-1 8v-.5c0-1.933 1.567-3.5 3.5-3.5s3.5 1.567 3.5 3.5v.5zm-1-.5v.5h-7v-.5c0-1.933 1.567-3.5 3.5-3.5s3.5 1.567 3.5 3.5zm-6-7.5c0-1.3807 1.1193-2.5 2.5-2.5 1.3808 0 2.5 1.1193 2.5 2.5s-1.1192 2.5-2.5 2.5c-1.3807 0-2.5-1.1193-2.5-2.5z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m20 73.5c-1.933 0-3.5 1.567-3.5 3.5 0 1.442.872 2.6803 2.1175 3.2164-1.1371.3667-2.0766 1.1736-2.6175 2.22-.5409-1.0464-1.4803-1.8533-2.6175-2.22 1.2455-.5361 2.1175-1.7744 2.1175-3.2164 0-1.933-1.567-3.5-3.5-3.5s-3.5 1.567-3.5 3.5c0 1.442.87203 2.6803 2.1175 3.2164-1.80889.5833-3.1175 2.2806-3.1175 4.2836v1.5h17v-1.5c0-2.003-1.3086-3.7003-3.1175-4.2836 1.2455-.5361 2.1175-1.7744 2.1175-3.2164 0-1.933-1.567-3.5-3.5-3.5zm-2.5 3.5c0-1.3807 1.1193-2.5 2.5-2.5 1.3808 0 2.5 1.1193 2.5 2.5s-1.1192 2.5-2.5 2.5c-1.3807 0-2.5-1.1193-2.5-2.5zm-1 8v-.5c0-1.933 1.567-3.5 3.5-3.5s3.5 1.567 3.5 3.5v.5zm-1-.5v.5h-7v-.5c0-1.933 1.567-3.5 3.5-3.5s3.5 1.567 3.5 3.5zm-6-7.5c0-1.3807 1.1193-2.5 2.5-2.5 1.3808 0 2.5 1.1193 2.5 2.5s-1.1192 2.5-2.5 2.5c-1.3807 0-2.5-1.1193-2.5-2.5z" fill="%2318a0fb"/%3E%3Cpath d="m20 105.5c-1.933 0-3.5 1.567-3.5 3.5 0 1.442.872 2.68 2.1175 3.216-1.1371.367-2.0766 1.174-2.6175 2.22-.5409-1.046-1.4803-1.853-2.6175-2.22 1.2455-.536 2.1175-1.774 2.1175-3.216 0-1.933-1.567-3.5-3.5-3.5s-3.5 1.567-3.5 3.5c0 1.442.87203 2.68 2.1175 3.216-1.80889.584-3.1175 2.281-3.1175 4.284v1.5h17v-1.5c0-2.003-1.3086-3.7-3.1175-4.284 1.2455-.536 2.1175-1.774 2.1175-3.216 0-1.933-1.567-3.5-3.5-3.5zm-2.5 3.5c0-1.381 1.1193-2.5 2.5-2.5 1.3808 0 2.5 1.119 2.5 2.5s-1.1192 2.5-2.5 2.5c-1.3807 0-2.5-1.119-2.5-2.5zm-1 8v-.5c0-1.933 1.567-3.5 3.5-3.5s3.5 1.567 3.5 3.5v.5zm-1-.5v.5h-7v-.5c0-1.933 1.567-3.5 3.5-3.5s3.5 1.567 3.5 3.5zm-6-7.5c0-1.381 1.1193-2.5 2.5-2.5 1.3808 0 2.5 1.119 2.5 2.5s-1.1192 2.5-2.5 2.5c-1.3807 0-2.5-1.119-2.5-2.5z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1582 | } 1583 | 1584 | .icon--smiley { 1585 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m15.9999 20c-1.8638 0-3.4299-1.2748-3.8739-3h1.0446c.4119 1.1652 1.5231 2 2.8293 2 1.3063 0 2.4175-.8348 2.8293-2h1.0447c-.444 1.7252-2.0101 3-3.874 3z" fill-opacity=".8"/%3E%3Cpath d="m19.5 14.125c0 .4832-.3918.875-.875.875s-.875-.3918-.875-.875.3918-.875.875-.875.875.3918.875.875z" fill-opacity=".8"/%3E%3Cpath d="m13.125 15c.4832 0 .875-.3918.875-.875s-.3918-.875-.875-.875-.875.3918-.875.875.3918.875.875.875z" fill-opacity=".8"/%3E%3Cpath clip-rule="evenodd" d="m24 16c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8zm-1 0c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7 7 3.134 7 7z" fill-opacity=".8" fill-rule="evenodd"/%3E%3Cpath d="m15.9999 52c-1.8638 0-3.4299-1.2748-3.8739-3h1.0446c.4119 1.1652 1.5231 2 2.8293 2 1.3063 0 2.4175-.8348 2.8293-2h1.0447c-.444 1.7252-2.0101 3-3.874 3z" fill-opacity=".3"/%3E%3Cpath d="m19.5 46.125c0 .4832-.3918.875-.875.875s-.875-.3918-.875-.875.3918-.875.875-.875.875.3918.875.875z" fill-opacity=".3"/%3E%3Cpath d="m13.125 47c.4832 0 .875-.3918.875-.875s-.3918-.875-.875-.875-.875.3918-.875.875.3918.875.875.875z" fill-opacity=".3"/%3E%3Cpath clip-rule="evenodd" d="m24 48c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8zm-1 0c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7 7 3.134 7 7z" fill-opacity=".3" fill-rule="evenodd"/%3E%3C/g%3E%3Cpath d="m15.9999 84c-1.8638 0-3.4299-1.2748-3.8739-3h1.0446c.4119 1.1652 1.5231 2 2.8293 2 1.3063 0 2.4175-.8348 2.8293-2h1.0447c-.444 1.7252-2.0101 3-3.874 3z" fill="%2318a0fb"/%3E%3Cpath d="m19.5 78.125c0 .4832-.3918.875-.875.875s-.875-.3918-.875-.875.3918-.875.875-.875.875.3918.875.875z" fill="%2318a0fb"/%3E%3Cpath d="m13.125 79c.4832 0 .875-.3918.875-.875s-.3918-.875-.875-.875-.875.3918-.875.875.3918.875.875.875z" fill="%2318a0fb"/%3E%3Cpath clip-rule="evenodd" d="m24 80c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8zm-1 0c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7 7 3.134 7 7z" fill="%2318a0fb" fill-rule="evenodd"/%3E%3Cpath d="m15.9999 116c-1.8638 0-3.4299-1.275-3.8739-3h1.0446c.4119 1.165 1.5231 2 2.8293 2 1.3063 0 2.4175-.835 2.8293-2h1.0447c-.444 1.725-2.0101 3-3.874 3z" fill="%23fff"/%3E%3Cpath d="m19.5 110.125c0 .483-.3918.875-.875.875s-.875-.392-.875-.875.3918-.875.875-.875.875.392.875.875z" fill="%23fff"/%3E%3Cpath d="m13.125 111c.4832 0 .875-.392.875-.875s-.3918-.875-.875-.875-.875.392-.875.875.3918.875.875.875z" fill="%23fff"/%3E%3Cpath clip-rule="evenodd" d="m24 112c0 4.418-3.5817 8-8 8s-8-3.582-8-8 3.5817-8 8-8 8 3.582 8 8zm-1 0c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7 7 3.134 7 7z" fill="%23fff" fill-rule="evenodd"/%3E%3C/svg%3E'); 1586 | } 1587 | 1588 | .icon--star-off { 1589 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m18 14-2-6-2 6-6-.0141 5 4.0141-2 6 5-3.7945 5 3.7945-2-6 5-4.0141zm3.1487.9926-3.8689.0091-1.2798-3.8394-1.2798 3.8394-3.8689-.0091 3.3175 2.6633-1.1976 3.5928 3.0288-2.2985 3.0288 2.2985-1.1976-3.5928z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m18 46-2-6-2 6-6-.0141 5 4.0141-2 6 5-3.7945 5 3.7945-2-6 5-4.0141zm3.1487.9926-3.8689.0091-1.2798-3.8394-1.2798 3.8394-3.8689-.0091 3.3175 2.6633-1.1976 3.5928 3.0288-2.2985 3.0288 2.2985-1.1976-3.5928z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m18 78-2-6-2 6-6-.0141 5 4.0141-2 6 5-3.7945 5 3.7945-2-6 5-4.0141zm3.1487.9926-3.8689.0091-1.2798-3.8394-1.2798 3.8394-3.8689-.0091 3.3175 2.6633-1.1976 3.5928 3.0288-2.2985 3.0288 2.2985-1.1976-3.5928z" fill="%2318a0fb"/%3E%3Cpath d="m18 110-2-6-2 6-6-.014 5 4.014-2 6 5-3.794 5 3.794-2-6 5-4.014zm3.1487.993-3.8689.009-1.2798-3.84-1.2798 3.84-3.8689-.009 3.3175 2.663-1.1976 3.593 3.0288-2.299 3.0288 2.299-1.1976-3.593z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1590 | } 1591 | 1592 | .icon--star-on { 1593 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m16 8 2 6 6-.0141-5 4.0141 2 6-5-3.7945-5 3.7945 2-6-5-4.0141 6 .0141z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m16 40 2 6 6-.0141-5 4.0141 2 6-5-3.7945-5 3.7945 2-6-5-4.0141 6 .0141z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m16 72 2 6 6-.0141-5 4.0141 2 6-5-3.7945-5 3.7945 2-6-5-4.0141 6 .0141z" fill="%2318a0fb"/%3E%3Cpath d="m16 104 2 6 6-.014-5 4.014 2 6-5-3.794-5 3.794 2-6-5-4.014 6 .014z" fill="%23fff"/%3E%3C/svg%3E'); 1594 | } 1595 | 1596 | .icon--stroke-weight { 1597 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m10 10h12v1h-12z" fill-opacity=".8"/%3E%3Cpath d="m10 14h12v2h-12z" fill-opacity=".8"/%3E%3Cpath d="m22 19h-12v3h12z" fill-opacity=".8"/%3E%3Cpath d="m10 42h12v1h-12z" fill-opacity=".3"/%3E%3Cpath d="m10 46h12v2h-12z" fill-opacity=".3"/%3E%3Cpath d="m22 51h-12v3h12z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m10 74h12v1h-12z" fill="%2318a0fb"/%3E%3Cpath d="m10 78h12v2h-12z" fill="%2318a0fb"/%3E%3Cpath d="m22 83h-12v3h12z" fill="%2318a0fb"/%3E%3Cpath d="m10 106h12v1h-12z" fill="%23fff"/%3E%3Cpath d="m10 110h12v2h-12z" fill="%23fff"/%3E%3Cpath d="m22 115h-12v3h12z" fill="%23fff"/%3E%3C/svg%3E'); 1598 | } 1599 | 1600 | .icon--styles { 1601 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m11.5 13c0 .8284.6716 1.5 1.5 1.5s1.5-.6716 1.5-1.5-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5z" fill-opacity=".8"/%3E%3Cpath d="m17.5 13c0 .8284.6716 1.5 1.5 1.5s1.5-.6716 1.5-1.5-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5z" fill-opacity=".8"/%3E%3Cpath d="m19 20.5c-.8284 0-1.5-.6716-1.5-1.5s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5-.6716 1.5-1.5 1.5z" fill-opacity=".8"/%3E%3Cpath d="m11.5 19c0 .8284.6716 1.5 1.5 1.5s1.5-.6716 1.5-1.5-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5z" fill-opacity=".8"/%3E%3Cpath d="m11.5 45c0 .8284.6716 1.5 1.5 1.5s1.5-.6716 1.5-1.5-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5z" fill-opacity=".3"/%3E%3Cpath d="m17.5 45c0 .8284.6716 1.5 1.5 1.5s1.5-.6716 1.5-1.5-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5z" fill-opacity=".3"/%3E%3Cpath d="m19 52.5c-.8284 0-1.5-.6716-1.5-1.5s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5-.6716 1.5-1.5 1.5z" fill-opacity=".3"/%3E%3Cpath d="m11.5 51c0 .8284.6716 1.5 1.5 1.5s1.5-.6716 1.5-1.5-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m11.5 77c0 .8284.6716 1.5 1.5 1.5s1.5-.6716 1.5-1.5-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5z" fill="%2318a0fb"/%3E%3Cpath d="m17.5 77c0 .8284.6716 1.5 1.5 1.5s1.5-.6716 1.5-1.5-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5z" fill="%2318a0fb"/%3E%3Cpath d="m19 84.5c-.8284 0-1.5-.6716-1.5-1.5s.6716-1.5 1.5-1.5 1.5.6716 1.5 1.5-.6716 1.5-1.5 1.5z" fill="%2318a0fb"/%3E%3Cpath d="m11.5 83c0 .8284.6716 1.5 1.5 1.5s1.5-.6716 1.5-1.5-.6716-1.5-1.5-1.5-1.5.6716-1.5 1.5z" fill="%2318a0fb"/%3E%3Cpath d="m11.5 109c0 .828.6716 1.5 1.5 1.5s1.5-.672 1.5-1.5-.6716-1.5-1.5-1.5-1.5.672-1.5 1.5z" fill="%23fff"/%3E%3Cpath d="m17.5 109c0 .828.6716 1.5 1.5 1.5s1.5-.672 1.5-1.5-.6716-1.5-1.5-1.5-1.5.672-1.5 1.5z" fill="%23fff"/%3E%3Cpath d="m19 116.5c-.8284 0-1.5-.672-1.5-1.5s.6716-1.5 1.5-1.5 1.5.672 1.5 1.5-.6716 1.5-1.5 1.5z" fill="%23fff"/%3E%3Cpath d="m11.5 115c0 .828.6716 1.5 1.5 1.5s1.5-.672 1.5-1.5-.6716-1.5-1.5-1.5-1.5.672-1.5 1.5z" fill="%23fff"/%3E%3C/svg%3E'); 1602 | } 1603 | 1604 | .icon--tidy-up-grid { 1605 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m10 10h2v2h-2z" fill-opacity=".8"/%3E%3Cpath d="m20 10h2v2h-2z" fill-opacity=".8"/%3E%3Cpath d="m12 15h-2v2h2z" fill-opacity=".8"/%3E%3Cpath d="m20 15h2v2h-2z" fill-opacity=".8"/%3E%3Cpath d="m12 20h-2v2h2z" fill-opacity=".8"/%3E%3Cpath d="m20 20h2v2h-2z" fill-opacity=".8"/%3E%3Cpath d="m17 10h-2v2h2z" fill-opacity=".8"/%3E%3Cpath d="m15 15h2v2h-2z" fill-opacity=".8"/%3E%3Cpath d="m17 20h-2v2h2z" fill-opacity=".8"/%3E%3Cpath d="m10 42h2v2h-2z" fill-opacity=".3"/%3E%3Cpath d="m20 42h2v2h-2z" fill-opacity=".3"/%3E%3Cpath d="m12 47h-2v2h2z" fill-opacity=".3"/%3E%3Cpath d="m20 47h2v2h-2z" fill-opacity=".3"/%3E%3Cpath d="m12 52h-2v2h2z" fill-opacity=".3"/%3E%3Cpath d="m20 52h2v2h-2z" fill-opacity=".3"/%3E%3Cpath d="m17 42h-2v2h2z" fill-opacity=".3"/%3E%3Cpath d="m15 47h2v2h-2z" fill-opacity=".3"/%3E%3Cpath d="m17 52h-2v2h2z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m10 74h2v2h-2z" fill="%2318a0fb"/%3E%3Cpath d="m20 74h2v2h-2z" fill="%2318a0fb"/%3E%3Cpath d="m12 79h-2v2h2z" fill="%2318a0fb"/%3E%3Cpath d="m20 79h2v2h-2z" fill="%2318a0fb"/%3E%3Cpath d="m12 84h-2v2h2z" fill="%2318a0fb"/%3E%3Cpath d="m20 84h2v2h-2z" fill="%2318a0fb"/%3E%3Cpath d="m17 74h-2v2h2z" fill="%2318a0fb"/%3E%3Cpath d="m15 79h2v2h-2z" fill="%2318a0fb"/%3E%3Cpath d="m17 84h-2v2h2z" fill="%2318a0fb"/%3E%3Cpath d="m10 106h2v2h-2z" fill="%23fff"/%3E%3Cpath d="m20 106h2v2h-2z" fill="%23fff"/%3E%3Cpath d="m12 111h-2v2h2z" fill="%23fff"/%3E%3Cpath d="m20 111h2v2h-2z" fill="%23fff"/%3E%3Cpath d="m12 116h-2v2h2z" fill="%23fff"/%3E%3Cpath d="m20 116h2v2h-2z" fill="%23fff"/%3E%3Cpath d="m17 106h-2v2h2z" fill="%23fff"/%3E%3Cpath d="m15 111h2v2h-2z" fill="%23fff"/%3E%3Cpath d="m17 116h-2v2h2z" fill="%23fff"/%3E%3C/svg%3E'); 1606 | } 1607 | 1608 | .icon--tidy-up-list-horiz { 1609 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m10 22.5v-13h2v13z" fill-opacity=".8"/%3E%3Cpath d="m15 22.5v-13h2v13z" fill-opacity=".8"/%3E%3Cpath d="m20 9.5v13h2v-13z" fill-opacity=".8"/%3E%3Cpath d="m10 54.5v-13h2v13z" fill-opacity=".3"/%3E%3Cpath d="m15 54.5v-13h2v13z" fill-opacity=".3"/%3E%3Cpath d="m20 41.5v13h2v-13z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m10 86.5v-13h2v13z" fill="%2318a0fb"/%3E%3Cpath d="m15 86.5v-13h2v13z" fill="%2318a0fb"/%3E%3Cpath d="m20 73.5v13h2v-13z" fill="%2318a0fb"/%3E%3Cpath d="m10 118.5v-13h2v13z" fill="%23fff"/%3E%3Cpath d="m15 118.5v-13h2v13z" fill="%23fff"/%3E%3Cpath d="m20 105.5v13h2v-13z" fill="%23fff"/%3E%3C/svg%3E'); 1610 | } 1611 | 1612 | .icon--tidy-up-list-vert { 1613 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m9.5 10h13v2h-13z" fill-opacity=".8"/%3E%3Cpath d="m9.5 15h13v2h-13z" fill-opacity=".8"/%3E%3Cpath d="m22.5 20h-13v2h13z" fill-opacity=".8"/%3E%3Cpath d="m9.5 42h13v2h-13z" fill-opacity=".3"/%3E%3Cpath d="m9.5 47h13v2h-13z" fill-opacity=".3"/%3E%3Cpath d="m22.5 52h-13v2h13z" fill-opacity=".3"/%3E%3C/g%3E%3Cpath d="m9.5 74h13v2h-13z" fill="%2318a0fb"/%3E%3Cpath d="m9.5 79h13v2h-13z" fill="%2318a0fb"/%3E%3Cpath d="m22.5 84h-13v2h13z" fill="%2318a0fb"/%3E%3Cpath d="m9.5 106h13v2h-13z" fill="%23fff"/%3E%3Cpath d="m9.5 111h13v2h-13z" fill="%23fff"/%3E%3Cpath d="m22.5 116h-13v2h13z" fill="%23fff"/%3E%3C/svg%3E'); 1614 | } 1615 | 1616 | .icon--timer { 1617 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m19 8h-6v-1h6z" fill-opacity=".8"/%3E%3Cpath d="m16.5 17v-5h-1v5c0 .2761.2239.5.5.5s.5-.2239.5-.5z" fill-opacity=".8"/%3E%3Cpath clip-rule="evenodd" d="m22.7146 12.6492 1.5278-1.5279-2.1213-2.1213-1.4818 1.4818c-1.3085-.93298-2.9098-1.4818-4.6393-1.4818-4.4183 0-8 3.5817-8 8s3.5817 8 8 8 8-3.5817 8-8c0-1.6044-.4723-3.0985-1.2854-4.3508zm.2854 4.3508c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7c1.7683 0 3.3835.6557 4.6157 1.7372l.6471.6471c1.0815 1.2322 1.7372 2.8474 1.7372 4.6157zm-1.0077-5.3004.1288.1288.7071-.7071-.7071-.7071-.7013.7013c.2005.1849.3916.3798.5725.5841z" fill-opacity=".8" fill-rule="evenodd"/%3E%3Cpath d="m19 40h-6v-1h6z" fill-opacity=".3"/%3E%3Cpath d="m16.5 49v-5h-1v5c0 .2761.2239.5.5.5s.5-.2239.5-.5z" fill-opacity=".3"/%3E%3Cpath clip-rule="evenodd" d="m22.7146 44.6492 1.5278-1.5279-2.1213-2.1213-1.4818 1.4818c-1.3085-.933-2.9098-1.4818-4.6393-1.4818-4.4183 0-8 3.5817-8 8s3.5817 8 8 8 8-3.5817 8-8c0-1.6044-.4723-3.0985-1.2854-4.3508zm.2854 4.3508c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7c1.7683 0 3.3835.6557 4.6157 1.7372l.6471.6471c1.0815 1.2322 1.7372 2.8474 1.7372 4.6157zm-1.0077-5.3004.1288.1288.7071-.7071-.7071-.7071-.7013.7013c.2005.1849.3916.3798.5725.5841z" fill-opacity=".3" fill-rule="evenodd"/%3E%3C/g%3E%3Cpath d="m19 72h-6v-1h6z" fill="%2318a0fb"/%3E%3Cpath d="m16.5 81v-5h-1v5c0 .2761.2239.5.5.5s.5-.2239.5-.5z" fill="%2318a0fb"/%3E%3Cpath clip-rule="evenodd" d="m22.7146 76.6492 1.5278-1.5279-2.1213-2.1213-1.4818 1.4818c-1.3085-.933-2.9098-1.4818-4.6393-1.4818-4.4183 0-8 3.5817-8 8s3.5817 8 8 8 8-3.5817 8-8c0-1.6044-.4723-3.0985-1.2854-4.3508zm.2854 4.3508c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7c1.7683 0 3.3835.6557 4.6157 1.7372l.6471.6471c1.0815 1.2322 1.7372 2.8474 1.7372 4.6157zm-1.0077-5.3004.1288.1288.7071-.7071-.7071-.7071-.7013.7013c.2005.1849.3916.3798.5725.5841z" fill="%2318a0fb" fill-rule="evenodd"/%3E%3Cpath d="m19 104h-6v-1h6z" fill="%23fff"/%3E%3Cpath d="m16.5 113v-5h-1v5c0 .276.2239.5.5.5s.5-.224.5-.5z" fill="%23fff"/%3E%3Cpath clip-rule="evenodd" d="m22.7146 108.649 1.5278-1.528-2.1213-2.121-1.4818 1.482c-1.3085-.933-2.9098-1.482-4.6393-1.482-4.4183 0-8 3.582-8 8s3.5817 8 8 8 8-3.582 8-8c0-1.604-.4723-3.098-1.2854-4.351zm.2854 4.351c0 3.866-3.134 7-7 7s-7-3.134-7-7 3.134-7 7-7c1.7683 0 3.3835.656 4.6157 1.737l.6471.647c1.0815 1.232 1.7372 2.848 1.7372 4.616zm-1.0077-5.3.1288.128.7071-.707-.7071-.707-.7013.702c.2005.184.3916.379.5725.584z" fill="%23fff" fill-rule="evenodd"/%3E%3C/svg%3E'); 1618 | } 1619 | 1620 | .icon--trash { 1621 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m14 18.5v-4h1v4z" fill-opacity=".8"/%3E%3Cpath d="m17 18.5v-4h1v4z" fill-opacity=".8"/%3E%3Cpath clip-rule="evenodd" d="m19 10.5c0-1.10457-.8954-2-2-2h-2c-1.1046 0-2 .89543-2 2h-3v1h1v10c0 1.1046.8954 2 2 2h6c1.1046 0 2-.8954 2-2v-10h1v-1zm-4-1c-.5523 0-1 .44772-1 1h4c0-.55228-.4477-1-1-1zm5 2h-8v10c0 .5523.4477 1 1 1h6c.5523 0 1-.4477 1-1z" fill-opacity=".8" fill-rule="evenodd"/%3E%3Cpath d="m14 50.5v-4h1v4z" fill-opacity=".3"/%3E%3Cpath d="m17 50.5v-4h1v4z" fill-opacity=".3"/%3E%3Cpath clip-rule="evenodd" d="m19 42.5c0-1.1046-.8954-2-2-2h-2c-1.1046 0-2 .8954-2 2h-3v1h1v10c0 1.1046.8954 2 2 2h6c1.1046 0 2-.8954 2-2v-10h1v-1zm-4-1c-.5523 0-1 .4477-1 1h4c0-.5523-.4477-1-1-1zm5 2h-8v10c0 .5523.4477 1 1 1h6c.5523 0 1-.4477 1-1z" fill-opacity=".3" fill-rule="evenodd"/%3E%3C/g%3E%3Cpath d="m14 82.5v-4h1v4z" fill="%2318a0fb"/%3E%3Cpath d="m17 82.5v-4h1v4z" fill="%2318a0fb"/%3E%3Cpath clip-rule="evenodd" d="m19 74.5c0-1.1046-.8954-2-2-2h-2c-1.1046 0-2 .8954-2 2h-3v1h1v10c0 1.1046.8954 2 2 2h6c1.1046 0 2-.8954 2-2v-10h1v-1zm-4-1c-.5523 0-1 .4477-1 1h4c0-.5523-.4477-1-1-1zm5 2h-8v10c0 .5523.4477 1 1 1h6c.5523 0 1-.4477 1-1z" fill="%2318a0fb" fill-rule="evenodd"/%3E%3Cpath d="m14 114.5v-4h1v4z" fill="%23fff"/%3E%3Cpath d="m17 114.5v-4h1v4z" fill="%23fff"/%3E%3Cpath clip-rule="evenodd" d="m19 106.5c0-1.105-.8954-2-2-2h-2c-1.1046 0-2 .895-2 2h-3v1h1v10c0 1.105.8954 2 2 2h6c1.1046 0 2-.895 2-2v-10h1v-1zm-4-1c-.5523 0-1 .448-1 1h4c0-.552-.4477-1-1-1zm5 2h-8v10c0 .552.4477 1 1 1h6c.5523 0 1-.448 1-1z" fill="%23fff" fill-rule="evenodd"/%3E%3C/svg%3E'); 1622 | } 1623 | 1624 | .icon--type { 1625 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="m10 10h11v3h-1v-2h-4v9.9986h1.9442v1h-4.8884v-1h1.9442v-9.9986h-4v2h-1z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m10 42h11v3h-1v-2h-4v9.9986h1.9442v1h-4.8884v-1h1.9442v-9.9986h-4v2h-1z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m10 74h11v3h-1v-2h-4v9.9986h1.9442v1h-4.8884v-1h1.9442v-9.9986h-4v2h-1z" fill="%2318a0fb"/%3E%3Cpath d="m10 106h11v3h-1v-2h-4v9.999h1.9442v1h-4.8884v-1h1.9442v-9.999h-4v2h-1z" fill="%23fff"/%3E%3C/svg%3E'); 1626 | } 1627 | 1628 | .icon--vector-handles { 1629 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m10.5 13.5-2.5 2.5 2.5 2.5 2-2h2.0854c.2059.5826.7615 1 1.4146 1s1.2087-.4174 1.4146-1h2.0854l2 2 2.5-2.5-2.5-2.5-2 2h-2.0854c-.2059-.5826-.7615-1-1.4146-1s-1.2087.4174-1.4146 1h-2.0854zm1.0858 2.5-1.0858-1.0858-1.08579 1.0858 1.08579 1.0858zm11 0-1.0858-1.0858-1.0858 1.0858 1.0858 1.0858z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m10.5 45.5-2.5 2.5 2.5 2.5 2-2h2.0854c.2059.5826.7615 1 1.4146 1s1.2087-.4174 1.4146-1h2.0854l2 2 2.5-2.5-2.5-2.5-2 2h-2.0854c-.2059-.5826-.7615-1-1.4146-1s-1.2087.4174-1.4146 1h-2.0854zm1.0858 2.5-1.0858-1.0858-1.08579 1.0858 1.08579 1.0858zm11 0-1.0858-1.0858-1.0858 1.0858 1.0858 1.0858z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m10.5 77.5-2.5 2.5 2.5 2.5 2-2h2.0854c.2059.5826.7615 1 1.4146 1s1.2087-.4174 1.4146-1h2.0854l2 2 2.5-2.5-2.5-2.5-2 2h-2.0854c-.2059-.5826-.7615-1-1.4146-1s-1.2087.4174-1.4146 1h-2.0854zm1.0858 2.5-1.0858-1.0858-1.08579 1.0858 1.08579 1.0858zm11 0-1.0858-1.0858-1.0858 1.0858 1.0858 1.0858z" fill="%2318a0fb"/%3E%3Cpath d="m10.5 109.5-2.5 2.5 2.5 2.5 2-2h2.0854c.2059.583.7615 1 1.4146 1s1.2087-.417 1.4146-1h2.0854l2 2 2.5-2.5-2.5-2.5-2 2h-2.0854c-.2059-.583-.7615-1-1.4146-1s-1.2087.417-1.4146 1h-2.0854zm1.0858 2.5-1.0858-1.086-1.08579 1.086 1.08579 1.086zm11 0-1.0858-1.086-1.0858 1.086 1.0858 1.086z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1630 | } 1631 | 1632 | .icon--visible { 1633 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23000"%3E%3Cpath d="m16.0004 18c1.1045 0 2-.8954 2-2s-.8955-2-2-2c-1.1046 0-2 .8954-2 2s.8954 2 2 2z" fill-opacity=".8"/%3E%3Cpath clip-rule="evenodd" d="m16.0001 12c2.878 0 5.3774 1.6211 6.6349 4-1.2575 2.3789-3.7569 4-6.6349 4-2.8781 0-5.3775-1.6211-6.63499-4 1.25749-2.3789 3.75689-4 6.63499-4zm0 7c-2.2999 0-4.3222-1.1942-5.4784-3 1.1562-1.8058 3.1785-3 5.4784-3 2.2998 0 4.3221 1.1942 5.4783 3-1.1562 1.8058-3.1785 3-5.4783 3z" fill-opacity=".8" fill-rule="evenodd"/%3E%3Cpath d="m16.0004 50c1.1045 0 2-.8954 2-2s-.8955-2-2-2c-1.1046 0-2 .8954-2 2s.8954 2 2 2z" fill-opacity=".3"/%3E%3Cpath clip-rule="evenodd" d="m16.0001 44c2.878 0 5.3774 1.6211 6.6349 4-1.2575 2.3789-3.7569 4-6.6349 4-2.8781 0-5.3775-1.6211-6.63499-4 1.25749-2.3789 3.75689-4 6.63499-4zm0 7c-2.2999 0-4.3222-1.1942-5.4784-3 1.1562-1.8058 3.1785-3 5.4784-3 2.2998 0 4.3221 1.1942 5.4783 3-1.1562 1.8058-3.1785 3-5.4783 3z" fill-opacity=".3" fill-rule="evenodd"/%3E%3C/g%3E%3Cpath d="m16.0004 82c1.1045 0 2-.8954 2-2s-.8955-2-2-2c-1.1046 0-2 .8954-2 2s.8954 2 2 2z" fill="%2318a0fb"/%3E%3Cpath clip-rule="evenodd" d="m16.0001 76c2.878 0 5.3774 1.6211 6.6349 4-1.2575 2.3789-3.7569 4-6.6349 4-2.8781 0-5.3775-1.6211-6.63499-4 1.25749-2.3789 3.75689-4 6.63499-4zm0 7c-2.2999 0-4.3222-1.1942-5.4784-3 1.1562-1.8058 3.1785-3 5.4784-3 2.2998 0 4.3221 1.1942 5.4783 3-1.1562 1.8058-3.1785 3-5.4783 3z" fill="%2318a0fb" fill-rule="evenodd"/%3E%3Cpath d="m16.0004 114c1.1045 0 2-.895 2-2s-.8955-2-2-2c-1.1046 0-2 .895-2 2s.8954 2 2 2z" fill="%23fff"/%3E%3Cpath clip-rule="evenodd" d="m16.0001 108c2.878 0 5.3774 1.621 6.6349 4-1.2575 2.379-3.7569 4-6.6349 4-2.8781 0-5.3775-1.621-6.63499-4 1.25749-2.379 3.75689-4 6.63499-4zm0 7c-2.2999 0-4.3222-1.194-5.4784-3 1.1562-1.806 3.1785-3 5.4784-3 2.2998 0 4.3221 1.194 5.4783 3-1.1562 1.806-3.1785 3-5.4783 3z" fill="%23fff" fill-rule="evenodd"/%3E%3C/svg%3E'); 1634 | } 1635 | 1636 | .icon--warning { 1637 | background-image: url('data:image/svg+xml,%3Csvg fill="none" height="128" viewBox="0 0 32 128" width="32" xmlns="http://www.w3.org/2000/svg"%3E%3Cg clip-rule="evenodd" fill-rule="evenodd"%3E%3Cpath d="m16 38 10 18h-20zm-1 11v-4h2v4zm0 2v2h2v-2z" fill="%23000" fill-opacity=".3"/%3E%3Cpath d="m16 6 10 18h-20zm-1 11v-4h2v4zm0 2v2h2v-2z" fill="%23000" fill-opacity=".8"/%3E%3Cpath d="m16 70 10 18h-20zm-1 11v-4h2v4zm0 2v2h2v-2z" fill="%2318a0fb"/%3E%3Cpath d="m16 102 10 18h-20zm-1 11v-4h2v4zm0 2v2h2v-2z" fill="%23fff"/%3E%3C/g%3E%3C/svg%3E'); 1638 | } 1639 | /*# sourceMappingURL=figma-plugin-ds.min.css.map */ 1640 | -------------------------------------------------------------------------------- /src/app/styles/plugin-styles.css: -------------------------------------------------------------------------------- 1 | .logo-wrapper { 2 | background: #f5f5f5; 3 | border-radius: 6px; 4 | padding: 16px; 5 | text-align: center; 6 | } 7 | -------------------------------------------------------------------------------- /src/plugin/controller.ts: -------------------------------------------------------------------------------- 1 | import * as moment from "moment"; 2 | 3 | // Set plugin UI height and width 4 | figma.showUI(__html__, { width: 320, height: 262 }); 5 | 6 | figma.ui.onmessage = async msg => { 7 | let pages = []; 8 | let pageIds = []; 9 | let currentSelection; 10 | // Set the name of the font you want to use. 11 | let fontName = "Inter"; 12 | 13 | // Frame for wrapping the list of pages. 14 | let listFrame = figma.createFrame(); 15 | 16 | // Load our fonts first, load your own brand fonts here. 17 | await figma.loadFontAsync({ family: fontName, style: "Regular" }); 18 | await figma.loadFontAsync({ family: fontName, style: "Bold" }); 19 | 20 | // Utility function for cloning node fills 21 | function clone(val) { 22 | return JSON.parse(JSON.stringify(val)); 23 | } 24 | 25 | // Remove the white fill from the pages list. 26 | const listFills = clone(listFrame.fills); 27 | listFills[0].visible = false; 28 | listFrame.fills = listFills; 29 | 30 | // Check whether or not the user has something selected. 31 | // Used for where to add pages if that option is selected. 32 | if (figma.currentPage.selection.length !== 0) { 33 | currentSelection = figma.currentPage.selection[0]; 34 | } else { 35 | currentSelection = figma.currentPage; 36 | } 37 | 38 | // Loop through our documents pages and add them 39 | // to our own pages array. 40 | figma.root.children.forEach(page => { 41 | pages.push(page.name); 42 | pageIds.push(page.id); 43 | }); 44 | 45 | // Utility function for styling the page names 46 | // and adding them to the list frame. 47 | let createPageItem = (name: string, id: number, arrow: boolean) => { 48 | let textFrame = figma.createText(); 49 | textFrame.fontName = { family: fontName, style: "Regular" }; 50 | textFrame.hyperlink = { type: "NODE", value: id }; 51 | textFrame.textDecoration = "UNDERLINE"; 52 | if (pages.length < 6) { 53 | textFrame.fontSize = 24; 54 | } else { 55 | textFrame.fontSize = 18; 56 | } 57 | 58 | if (arrow === true) { 59 | textFrame.characters = `${name} ->`; 60 | } else { 61 | textFrame.characters = name; 62 | } 63 | 64 | listFrame.appendChild(textFrame); 65 | }; 66 | 67 | if (msg.type === "create-pages") { 68 | // Styles for the frame that contains our list of pages. 69 | listFrame.name = "List of Pages"; 70 | listFrame.layoutMode = "VERTICAL"; 71 | listFrame.counterAxisSizingMode = "AUTO"; 72 | listFrame.verticalPadding = 32; 73 | listFrame.horizontalPadding = 0; 74 | listFrame.itemSpacing = 8; 75 | 76 | currentSelection.appendChild(listFrame); 77 | 78 | let generateList = async pages => { 79 | pages.forEach((page, index) => { 80 | createPageItem(page, pageIds[index], false); 81 | }); 82 | 83 | figma.closePlugin(); 84 | }; 85 | 86 | generateList(pages); 87 | } else if (msg.type === "create-table") { 88 | // Create table of content page 89 | let tableOfContents = figma.createPage(); 90 | figma.currentPage = tableOfContents; 91 | 92 | let page = figma.currentPage; 93 | figma.root.insertChild(0, page); 94 | 95 | // The frame for the entire table of contents. 96 | let coverFrame = figma.createFrame(); 97 | 98 | // Wraps text content. 99 | let wrapperFrame = figma.createFrame(); 100 | 101 | // Frame for wrapping the list of links. 102 | let linksFrame = figma.createFrame(); 103 | 104 | // The right hand image 105 | let imageFrame = figma.createFrame(); 106 | 107 | // This wraps the timestamp and "spacer" frame. 108 | let timeStampFrame = figma.createFrame(); 109 | 110 | // Spacer frame for spacing the timestamp away from the "additional links" section. 111 | let spacerFrame = figma.createFrame(); 112 | 113 | // Timestamp 114 | let timestamp = figma.createText(); 115 | 116 | // Set page name 117 | tableOfContents.name = "Table of Contents"; 118 | 119 | // Set cover frame properties. 120 | coverFrame.name = "Table of Contents"; 121 | coverFrame.layoutMode = "HORIZONTAL"; 122 | coverFrame.resize(960, 480); 123 | coverFrame.counterAxisSizingMode = "AUTO"; 124 | coverFrame.verticalPadding = 0; 125 | coverFrame.horizontalPadding = 0; 126 | coverFrame.cornerRadius = 16; 127 | 128 | // Set wrapper frame properties. 129 | // This wraps all the left hand content (pages, links, name, timestamp). 130 | wrapperFrame.name = "Wrapper frame"; 131 | wrapperFrame.layoutMode = "VERTICAL"; 132 | wrapperFrame.resize(480, 480); 133 | wrapperFrame.counterAxisSizingMode = "FIXED"; 134 | wrapperFrame.verticalPadding = 32; 135 | wrapperFrame.horizontalPadding = 32; 136 | coverFrame.appendChild(wrapperFrame); 137 | 138 | // Create the frame for the right side 139 | imageFrame.name = "Project Image"; 140 | imageFrame.resize(480, 480); 141 | coverFrame.appendChild(imageFrame); 142 | 143 | // Background of the image side of the table of contents. 144 | const fills = clone(imageFrame.fills); 145 | fills[0].color.r = 0.9764705896377563; 146 | fills[0].color.b = 0.9764705896377563; 147 | fills[0].color.g = 0.9764705896377563; 148 | imageFrame.fills = fills; 149 | 150 | // Set the properties of the list frame that contains our pages. 151 | listFrame.name = "List of Pages"; 152 | listFrame.layoutMode = "VERTICAL"; 153 | listFrame.counterAxisSizingMode = "AUTO"; 154 | listFrame.verticalPadding = 32; 155 | listFrame.horizontalPadding = 0; 156 | listFrame.itemSpacing = 8; 157 | wrapperFrame.appendChild(listFrame); 158 | 159 | // Set the properties of the link frame that contains our 'additional links'. 160 | linksFrame.name = "Additional Links"; 161 | linksFrame.layoutMode = "VERTICAL"; 162 | linksFrame.counterAxisSizingMode = "AUTO"; 163 | linksFrame.verticalPadding = 16; 164 | linksFrame.horizontalPadding = 0; 165 | linksFrame.itemSpacing = 8; 166 | wrapperFrame.appendChild(linksFrame); 167 | 168 | // Set the properties of the timestamp frame that contains our date. 169 | timeStampFrame.name = "Timestamp Frame"; 170 | timeStampFrame.layoutMode = "VERTICAL"; 171 | timeStampFrame.counterAxisSizingMode = "AUTO"; 172 | timeStampFrame.verticalPadding = 0; 173 | timeStampFrame.horizontalPadding = 0; 174 | // 46 + 2px spacer frame for 48px total. 175 | timeStampFrame.itemSpacing = 46; 176 | wrapperFrame.appendChild(timeStampFrame); 177 | 178 | spacerFrame.name = "Spacer Frame"; 179 | spacerFrame.resize(100, 2); 180 | timeStampFrame.appendChild(spacerFrame); 181 | 182 | let createHeader = () => { 183 | let coverHead = figma.createText(); 184 | coverHead.fontName = { family: fontName, style: "Bold" }; 185 | coverHead.characters = figma.root.name; 186 | coverHead.fontSize = 32; 187 | wrapperFrame.insertChild(0, coverHead); 188 | }; 189 | 190 | let createLinkLabel = () => { 191 | let linkLabel = figma.createText(); 192 | linkLabel.fontName = { family: fontName, style: "Regular" }; 193 | linkLabel.characters = "Other links"; 194 | linkLabel.fontSize = 16; 195 | linksFrame.appendChild(linkLabel); 196 | }; 197 | 198 | let createAdditionalLink = () => { 199 | let linkListItem = figma.createText(); 200 | linkListItem.fontName = { family: fontName, style: "Regular" }; 201 | linkListItem.characters = "Example Link"; 202 | 203 | if (pages.length < 6) { 204 | linkListItem.fontSize = 20; 205 | } else { 206 | linkListItem.fontSize = 16; 207 | } 208 | 209 | linksFrame.appendChild(linkListItem); 210 | }; 211 | 212 | let createTimestamp = () => { 213 | timestamp.fontName = { family: fontName, style: "Regular" }; 214 | timestamp.characters = moment().format("MMMM Do, YYYY"); 215 | timestamp.fontSize = 16; 216 | timeStampFrame.appendChild(timestamp); 217 | 218 | // Set the timestamp color to #B2B2B2 219 | const fills = clone(timestamp.fills); 220 | fills[0].color.r = 0.6980392336845398; 221 | fills[0].color.b = 0.6980392336845398; 222 | fills[0].color.g = 0.6980392336845398; 223 | timestamp.fills = fills; 224 | }; 225 | 226 | // Updates the height and positions of various layers 227 | // depending on if the project is really large or small. 228 | let updateHeightandPositions = () => { 229 | // If its a small project we want to resize the whole frame 230 | // and remove the auto layout so its still our minimum size of 960 by 480. 231 | if (wrapperFrame.height <= 480) { 232 | coverFrame.counterAxisSizingMode = "FIXED"; 233 | coverFrame.resize(960, 480); 234 | wrapperFrame.layoutMode = "NONE"; 235 | wrapperFrame.resize(480, 480); 236 | 237 | // Position the timestamp in the bottom corner. 238 | timeStampFrame.x = 32; 239 | timeStampFrame.y = coverFrame.height - 32 - timeStampFrame.height; 240 | } 241 | 242 | // Update the right side to match the height of the content/pages frame. 243 | imageFrame.resize(480, wrapperFrame.height); 244 | }; 245 | 246 | let generateTable = async pages => { 247 | // Using selection and viewport requires an array. 248 | // So we can focus and select the table once its generated. 249 | let layerArray = []; 250 | layerArray.push(coverFrame); 251 | 252 | pages.forEach((page, index) => { 253 | createPageItem(page, pageIds[index], true); 254 | }); 255 | 256 | createHeader(); 257 | createLinkLabel(); 258 | createAdditionalLink(); 259 | createTimestamp(); 260 | updateHeightandPositions(); 261 | 262 | figma.currentPage.selection = layerArray; 263 | figma.viewport.scrollAndZoomIntoView(layerArray); 264 | 265 | figma.closePlugin(); 266 | }; 267 | 268 | generateTable(pages); 269 | 270 | figma.ui.postMessage({ 271 | type: "table-created", 272 | message: `done` 273 | }); 274 | } 275 | 276 | figma.closePlugin(); 277 | }; 278 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "outDir": "dist", 5 | "jsx": "react", 6 | "noUnusedLocals": true, 7 | "noUnusedParameters": true, 8 | "experimentalDecorators": true, 9 | "removeComments": true, 10 | "noImplicitAny": false, 11 | "moduleResolution": "node" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": [ 4 | "tslint:recommended", 5 | "tslint-react" 6 | ], 7 | "jsRules": {}, 8 | "rules": { 9 | "ordered-imports": false, 10 | "object-literal-sort-keys": false, 11 | "member-ordering": false, 12 | "await-promise": false, 13 | "interface-name": false, 14 | "quotemark": false, 15 | "curly": false, 16 | "member-access": [true, "no-public"], 17 | "semicolon": false, 18 | "no-trailing-whitespace": false, 19 | "no-console": false, 20 | "jsx-wrap-multiline": false, 21 | "jsx-no-lambda": false 22 | }, 23 | "rulesDirectory": [] 24 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin') 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | const path = require('path') 4 | 5 | module.exports = (env, argv) => ({ 6 | mode: argv.mode === 'production' ? 'production' : 'development', 7 | 8 | // This is necessary because Figma's 'eval' works differently than normal eval 9 | devtool: argv.mode === 'production' ? false : 'inline-source-map', 10 | 11 | entry: { 12 | ui: './src/app/index.tsx', // The entry point for your UI code 13 | code: './src/plugin/controller.ts', // The entry point for your plugin code 14 | }, 15 | 16 | module: { 17 | rules: [ 18 | // Converts TypeScript code to JavaScript 19 | { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }, 20 | 21 | // Enables including CSS by doing "import './file.css'" in your TypeScript code 22 | { test: /\.css$/, loader: [{ loader: 'style-loader' }, { loader: 'css-loader' }] }, 23 | 24 | // Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI 25 | { test: /\.(png|jpg|gif|webp|svg)$/, loader: [{ loader: 'url-loader' }] }, 26 | ], 27 | }, 28 | 29 | // Webpack tries these extensions for you if you omit the extension like "import './file'" 30 | resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] }, 31 | 32 | output: { 33 | filename: '[name].js', 34 | path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist" 35 | }, 36 | 37 | // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it 38 | plugins: [ 39 | new HtmlWebpackPlugin({ 40 | template: './src/app/index.html', 41 | filename: 'ui.html', 42 | inlineSource: '.(js)$', 43 | chunks: ['ui'], 44 | }), 45 | new HtmlWebpackInlineSourcePlugin(), 46 | ], 47 | }) --------------------------------------------------------------------------------