@funidata/fudis-core 1.0.2 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/_index.scss +1 -33
  2. package/_styles.scss +31 -0
  3. package/package.json +3 -2
  4. package/src/components/icon/icon.scss +616 -26
package/_index.scss CHANGED
@@ -1,9 +1,5 @@
1
1
  /**
2
- * Export all Core SCSS files here
3
- */
4
-
5
- /**
6
- * Assets and Foundations
2
+ * Foundations
7
3
  */
8
4
  @forward './src/foundations/borders/tokens';
9
5
  @forward './src/foundations/breakpoints/tokens';
@@ -20,33 +16,5 @@
20
16
  @forward './src/foundations/grid/mixins';
21
17
  @forward './src/foundations/spacing/mixins';
22
18
  @forward './src/foundations/typography/mixins';
23
- @forward './src/foundations/typography/classes';
24
19
  @forward './src/foundations/utilities/mixins';
25
20
  @forward './src/foundations/z-index/mixins';
26
- @forward './src/foundations/spacing/classes';
27
- @forward './src/foundations/utilities/classes';
28
-
29
- /**
30
- * Component styles
31
- */
32
- @forward './src/components/alert/alert';
33
- @forward './src/components/button/button';
34
- @forward './src/components/badge/badge';
35
- @forward './src/components/checkbox/checkbox';
36
- @forward './src/components/checkbox-group/checkbox-group';
37
- @forward './src/components/error-summary/error-summary';
38
- @forward './src/components/fieldset/fieldset';
39
- @forward './src/components/guidance/guidance';
40
- @forward './src/components/horizontal-rule/horizontal-rule';
41
- @forward './src/components/icon/icon';
42
- @forward './src/components/label/label';
43
- @forward './src/components/link/link';
44
- @forward './src/components/loading-spinner/loading-spinner';
45
- @forward './src/components/notification/notification';
46
- @forward './src/components/popover/popover';
47
- @forward './src/components/radio-button/radio-button';
48
- @forward './src/components/radio-button-group/radio-button-group';
49
- @forward './src/components/tab-navigation/tab-navigation';
50
- @forward './src/components/text-area/text-area';
51
- @forward './src/components/text-input/text-input';
52
- @forward './src/components/validator-error-message/validator-error-message';
package/_styles.scss ADDED
@@ -0,0 +1,31 @@
1
+ /**
2
+ * Foundation styles
3
+ */
4
+ @forward './src/foundations/spacing/classes';
5
+ @forward './src/foundations/utilities/classes';
6
+ @forward './src/foundations/typography/classes';
7
+
8
+ /**
9
+ * Component styles
10
+ */
11
+ @forward './src/components/alert/alert';
12
+ @forward './src/components/button/button';
13
+ @forward './src/components/badge/badge';
14
+ @forward './src/components/checkbox/checkbox';
15
+ @forward './src/components/checkbox-group/checkbox-group';
16
+ @forward './src/components/error-summary/error-summary';
17
+ @forward './src/components/fieldset/fieldset';
18
+ @forward './src/components/guidance/guidance';
19
+ @forward './src/components/horizontal-rule/horizontal-rule';
20
+ @forward './src/components/icon/icon';
21
+ @forward './src/components/label/label';
22
+ @forward './src/components/link/link';
23
+ @forward './src/components/loading-spinner/loading-spinner';
24
+ @forward './src/components/notification/notification';
25
+ @forward './src/components/popover/popover';
26
+ @forward './src/components/radio-button/radio-button';
27
+ @forward './src/components/radio-button-group/radio-button-group';
28
+ @forward './src/components/tab-navigation/tab-navigation';
29
+ @forward './src/components/text-area/text-area';
30
+ @forward './src/components/text-input/text-input';
31
+ @forward './src/components/validator-error-message/validator-error-message';
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@funidata/fudis-core",
3
- "version": "1.0.2",
3
+ "version": "2.1.0",
4
4
  "description": "Core styles and foundations for Fudis Design System",
5
5
  "files": [
6
6
  "src",
7
- "./_index.scss"
7
+ "./_index.scss",
8
+ "./_styles.scss"
8
9
  ],
9
10
  "scripts": {
10
11
  "start": "storybook dev -p 6007",
package/src/components/icon/icon.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  @use '../../foundations/spacing/tokens.scss' as spacing;
2
- @use '../../foundations/colors/tokens.scss' as colors;
3
2
  @use '../../foundations/colors/mixins.scss' as colorMixin;
4
3
 
5
4
  /* Only for internal use for this icon class */
@@ -14,6 +13,17 @@
14
13
  mask-size: contain;
15
14
  }
16
15
 
16
+ /* Only for internal use in creating white background for large fill icons */
17
+ @mixin fill-icon-bg() {
18
+ position: absolute;
19
+ transform: translate(12%);
20
+ border-radius: 50%;
21
+ background: white;
22
+ width: calc(var(--icon-size) * 0.8);
23
+ height: calc(var(--icon-size) * 0.8);
24
+ content: '';
25
+ }
26
+
17
27
  .fudis-icon {
18
28
  box-sizing: border-box;
19
29
  display: inline-flex;
@@ -100,11 +110,31 @@
100
110
  }
101
111
  }
102
112
 
113
+ &__alert-fill {
114
+ &::before {
115
+ position: absolute;
116
+ transform: translate(56%);
117
+ border-right: calc(var(--icon-size) * 0.25) solid transparent;
118
+ border-bottom: calc(var(--icon-size) * 0.45) solid white;
119
+ border-left: calc(var(--icon-size) * 0.25) solid transparent;
120
+ width: 0;
121
+ height: 0;
122
+ content: '';
123
+ }
124
+
125
+ &::after {
126
+ @include colorMixin.text-color('red');
127
+ @include icon-mask-base;
128
+
129
+ mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20fill='none'%3E%3Cpath%20fill='%23000'%20d='M16.504%209a1%201%200%200%201%20.86.5l7.5%2013a1%201%200%200%201-.86%201.5h-15a1%201%200%200%201-.87-1.5l7.5-13a1%201%200%200%201%20.87-.5Zm-7.5%2014h15l-7.5-13-7.5%2013Z'/%3E%3Ccircle%20cx='16.504'%20cy='20.75'%20r='.75'%20fill='%23000'/%3E%3Cpath%20fill='%23000'%20d='M16.504%2018.75a.75.75%200%200%201-.75-.75v-3a.75.75%200%200%201%201.5%200v3a.76.76%200%200%201-.75.75Z'/%3E%3C/svg%3E");
130
+ }
131
+ }
132
+
103
133
  &__archive {
104
134
  &::after {
105
135
  @include icon-mask-base;
106
136
 
107
- mask-image: url("data:image/svg+xml,%3Csvg id='archive' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M25.429 11.83a.533.533 0 0 0-.533.533v10.304a1.6 1.6 0 0 1-1.6 1.6H9.78a1.6 1.6 0 0 1-1.6-1.6V12.363a.533.533 0 1 0-1.067 0v10.304a2.667 2.667 0 0 0 2.667 2.666h13.515a2.677 2.677 0 0 0 2.666-2.666V12.363a.533.533 0 0 0-.533-.534Z'/%3E%3Cpath fill-rule='evenodd' d='M8 6.4h17.066a2.667 2.667 0 0 1 2.667 2.667v1.962h-22.4V9.067A2.667 2.667 0 0 1 8 6.4ZM6.4 9.963h20.266v-.896a1.6 1.6 0 0 0-1.6-1.6H8a1.61 1.61 0 0 0-1.6 1.6v.896ZM20.267 17.248c0 .784-.636 1.419-1.42 1.419H14.23a1.419 1.419 0 0 1-1.43-1.419v-.352c0-.79.64-1.43 1.43-1.43h4.619a1.43 1.43 0 0 1 1.419 1.43v.352Zm-6.4-.352v.352a.363.363 0 0 0 .362.352h4.619a.352.352 0 0 0 .352-.352v-.352a.363.363 0 0 0-.352-.363h-4.62a.363.363 0 0 0-.362.363Z' clip-rule='evenodd'/%3E%3C/svg%3E");
137
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M25.429 11.83a.533.533 0 0 0-.533.533v10.304a1.6 1.6 0 0 1-1.6 1.6H9.78a1.6 1.6 0 0 1-1.6-1.6V12.363a.533.533 0 1 0-1.067 0v10.304a2.667 2.667 0 0 0 2.667 2.666h13.515a2.677 2.677 0 0 0 2.666-2.666V12.363a.533.533 0 0 0-.533-.534Z'/%3E%3Cpath fill-rule='evenodd' d='M8 6.4h17.066a2.667 2.667 0 0 1 2.667 2.667v1.962h-22.4V9.067A2.667 2.667 0 0 1 8 6.4ZM6.4 9.963h20.266v-.896a1.6 1.6 0 0 0-1.6-1.6H8a1.61 1.61 0 0 0-1.6 1.6v.896ZM20.267 17.248c0 .784-.636 1.419-1.42 1.419H14.23a1.419 1.419 0 0 1-1.43-1.419v-.352c0-.79.64-1.43 1.43-1.43h4.619a1.43 1.43 0 0 1 1.419 1.43v.352Zm-6.4-.352v.352a.363.363 0 0 0 .362.352h4.619a.352.352 0 0 0 .352-.352v-.352a.363.363 0 0 0-.352-.363h-4.62a.363.363 0 0 0-.362.363Z' clip-rule='evenodd'/%3E%3C/svg%3E");
108
138
  }
109
139
  }
110
140
 
@@ -112,7 +142,7 @@
112
142
  &::after {
113
143
  @include icon-mask-base;
114
144
 
115
- mask-image: url("data:image/svg+xml,%3Csvg id='arrow-big' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M15.925 24.534a1.6 1.6 0 0 1-1.6-1.6v-9.93l-3.06 3.064a1.596 1.596 0 0 1-2.259.005 1.598 1.598 0 0 1-.011-2.258l5.792-5.87c.315-.322.75-.495 1.174-.478.39-.016.858.161 1.166.47l5.861 5.87a1.6 1.6 0 1 1-2.264 2.26l-3.2-3.202v10.07a1.6 1.6 0 0 1-1.6 1.6Z' clip-rule='evenodd'/%3E%3C/svg%3E");
145
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M15.925 24.534a1.6 1.6 0 0 1-1.6-1.6v-9.93l-3.06 3.064a1.596 1.596 0 0 1-2.259.005 1.598 1.598 0 0 1-.011-2.258l5.792-5.87c.315-.322.75-.495 1.174-.478.39-.016.858.161 1.166.47l5.861 5.87a1.6 1.6 0 1 1-2.264 2.26l-3.2-3.202v10.07a1.6 1.6 0 0 1-1.6 1.6Z' clip-rule='evenodd'/%3E%3C/svg%3E");
116
146
  }
117
147
  }
118
148
 
@@ -120,7 +150,7 @@
120
150
  &::after {
121
151
  @include icon-mask-base;
122
152
 
123
- mask-image: url("data:image/svg+xml,%3Csvg id='arrow-dashed' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M23.466 17.067H16v-2.134h7.466v2.134Zm-10.666 0H5.333v-2.134H12.8v2.134Z'/%3E%3Cpath d='m26.506 16-6.016 4.267v-8.534L26.506 16Z'/%3E%3C/svg%3E");
153
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M23.466 17.067H16v-2.134h7.466v2.134Zm-10.666 0H5.333v-2.134H12.8v2.134Z'/%3E%3Cpath d='m26.506 16-6.016 4.267v-8.534L26.506 16Z'/%3E%3C/svg%3E");
124
154
  }
125
155
  }
126
156
 
@@ -128,15 +158,15 @@
128
158
  &::after {
129
159
  @include icon-mask-base;
130
160
 
131
- mask-image: url("data:image/svg+xml,%3Csvg id='arrow-solid' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M25.868 15.182a1 1 0 0 1 0 1.636l-7.865 5.539a1 1 0 0 1-1.576-.818V10.461a1 1 0 0 1 1.576-.818l7.865 5.54Z'/%3E%3Cpath fill-rule='evenodd' d='M5.5 16a1 1 0 0 1 1-1H20a1 1 0 1 1 0 2H6.5a1 1 0 0 1-1-1Z' clip-rule='evenodd'/%3E%3C/svg%3E");
161
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M25.868 15.182a1 1 0 0 1 0 1.636l-7.865 5.539a1 1 0 0 1-1.576-.818V10.461a1 1 0 0 1 1.576-.818l7.865 5.54Z'/%3E%3Cpath fill-rule='evenodd' d='M5.5 16a1 1 0 0 1 1-1H20a1 1 0 1 1 0 2H6.5a1 1 0 0 1-1-1Z' clip-rule='evenodd'/%3E%3C/svg%3E");
132
162
  }
133
163
  }
134
164
 
135
- &__check {
165
+ &__back {
136
166
  &::after {
137
167
  @include icon-mask-base;
138
168
 
139
- mask-image: url("data:image/svg+xml,%3Csvg id='check' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M22.726 9.437a1.5 1.5 0 0 1 .371 2.088l-7.448 10.667a1.5 1.5 0 0 1-2.347.143l-4.285-4.779a1.5 1.5 0 0 1 2.234-2.003l3.022 3.37 6.364-9.115a1.5 1.5 0 0 1 2.089-.371Z' clip-rule='evenodd'/%3E%3C/svg%3E");
169
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='m18.684 14.403-.018-.003h-7.37l3.486-3.411c.2-.197.2-.513 0-.709a.518.518 0 0 0-.723 0l-4.25 4.16a.686.686 0 0 0 0 .986l4.25 4.16c.2.196.524.196.723 0 .2-.194.2-.512 0-.708l-3.486-3.411h7.37v.004c1.49-.037 2.667 1.19 2.667 2.662s-1.178 2.699-2.667 2.663v.004h-1.6a.533.533 0 0 0 0 1.067h1.6a3.737 3.737 0 0 0 3.733-3.734c0-2.057-1.654-3.756-3.715-3.73' clip-rule='evenodd'/%3E%3C/svg%3E");
140
170
  }
141
171
  }
142
172
 
@@ -144,15 +174,15 @@
144
174
  &::after {
145
175
  @include icon-mask-base;
146
176
 
147
- mask-image: url("data:image/svg+xml,%3Csvg id='brochure' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M11 8.5a.5.5 0 0 0-.5.5v13.5a.5.5 0 0 0 .5.5h7v-2a1.5 1.5 0 0 1 1.5-1.5h2V9a.5.5 0 0 0-.5-.5H11Zm9.793 12H19.5a.5.5 0 0 0-.5.5v1.293l1.793-1.793ZM9.5 9A1.5 1.5 0 0 1 11 7.5h10A1.5 1.5 0 0 1 22.5 9v11.207L18.707 24H11a1.5 1.5 0 0 1-1.5-1.5V9Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M12 12a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
177
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M11 8.5a.5.5 0 0 0-.5.5v13.5a.5.5 0 0 0 .5.5h7v-2a1.5 1.5 0 0 1 1.5-1.5h2V9a.5.5 0 0 0-.5-.5H11Zm9.793 12H19.5a.5.5 0 0 0-.5.5v1.293l1.793-1.793ZM9.5 9A1.5 1.5 0 0 1 11 7.5h10A1.5 1.5 0 0 1 22.5 9v11.207L18.707 24H11a1.5 1.5 0 0 1-1.5-1.5V9Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M12 12a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
148
178
  }
149
179
  }
150
180
 
151
- &__check-indeterminate {
181
+ &__bullets {
152
182
  &::after {
153
183
  @include icon-mask-base;
154
184
 
155
- mask-image: url("data:image/svg+xml,%3Csvg id='check-indeterminate' xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='12' height='3' x='2' y='7' rx='1.5'/%3E%3C/svg%3E");
185
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='7' cy='11' r='1'/%3E%3Crect width='16' height='2' x='10' y='10' rx='1'/%3E%3Ccircle cx='7' cy='16' r='1'/%3E%3Crect width='16' height='2' x='10' y='15' rx='1'/%3E%3Ccircle cx='7' cy='21' r='1'/%3E%3Crect width='16' height='2' x='10' y='20' rx='1'/%3E%3C/svg%3E");
156
186
  }
157
187
  }
158
188
 
@@ -160,47 +190,76 @@
160
190
  &::after {
161
191
  @include icon-mask-base;
162
192
 
163
- mask-image: url("data:image/svg+xml,%3Csvg id='calendar' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M22.394 24.533c.552 0 1.073-.813 1.073-1.365v-12.8c0-.553-.52-.768-1.073-.768H19.2V8.533h-1.066V9.6h-4.267V8.533H12.8V9.6H9.594c-.518 0-1.06.244-1.06.768v12.8c0 .553.507 1.365 1.06 1.365h12.8ZM9.6 10.667h3.2v1.066h1.067v-1.066h4.267v1.066H19.2v-1.066h3.2V12.8H9.6v-2.133Zm0 3.2h12.8v8.868c0 .276-.163.732-.44.732h-12c-.275 0-.36-.456-.36-.732v-8.868Zm4.267 5.333h-2.133v2.133h2.133V19.2Zm0-3.2h-2.133v2.133h2.133V16Zm3.2 3.2h-2.134v2.133h2.133V19.2Zm0-3.2h-2.134v2.133h2.133V16Zm3.2 3.2h-2.133v2.133h2.133V19.2Zm0-3.2h-2.133v2.133h2.133V16Z' clip-rule='evenodd'/%3E%3C/svg%3E");
193
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M22.394 24.533c.552 0 1.073-.813 1.073-1.365v-12.8c0-.553-.52-.768-1.073-.768H19.2V8.533h-1.066V9.6h-4.267V8.533H12.8V9.6H9.594c-.518 0-1.06.244-1.06.768v12.8c0 .553.507 1.365 1.06 1.365h12.8ZM9.6 10.667h3.2v1.066h1.067v-1.066h4.267v1.066H19.2v-1.066h3.2V12.8H9.6v-2.133Zm0 3.2h12.8v8.868c0 .276-.163.732-.44.732h-12c-.275 0-.36-.456-.36-.732v-8.868Zm4.267 5.333h-2.133v2.133h2.133V19.2Zm0-3.2h-2.133v2.133h2.133V16Zm3.2 3.2h-2.134v2.133h2.133V19.2Zm0-3.2h-2.134v2.133h2.133V16Zm3.2 3.2h-2.133v2.133h2.133V19.2Zm0-3.2h-2.133v2.133h2.133V16Z' clip-rule='evenodd'/%3E%3C/svg%3E");
164
194
  }
165
195
  }
166
196
 
167
- &__bullets {
197
+ &__change-log {
168
198
  &::after {
169
199
  @include icon-mask-base;
170
200
 
171
- mask-image: url("data:image/svg+xml,%3Csvg id='bullets' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='7' cy='11' r='1'/%3E%3Crect width='16' height='2' x='10' y='10' rx='1'/%3E%3Ccircle cx='7' cy='16' r='1'/%3E%3Crect width='16' height='2' x='10' y='15' rx='1'/%3E%3Ccircle cx='7' cy='21' r='1'/%3E%3Crect width='16' height='2' x='10' y='20' rx='1'/%3E%3C/svg%3E");
201
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16.5 15.717V11.2h-1v5.083l2.91 1.746.514-.858-2.424-1.454Z' clip-rule='evenodd'/%3E%3Cpath d='M9.066 16a6.934 6.934 0 1 1 3.736 6.152l.494-.95A5.862 5.862 0 1 0 10.138 16H9.066Z'/%3E%3Cpath d='M7.467 16h4.266L9.6 18.667 7.467 16Z'/%3E%3C/svg%3E");
172
202
  }
173
203
  }
174
204
 
175
- &__back {
205
+ &__check-indeterminate {
176
206
  &::after {
177
207
  @include icon-mask-base;
178
208
 
179
- mask-image: url("data:image/svg+xml,%3Csvg id='back' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='m18.684 14.403-.018-.003h-7.37l3.486-3.411c.2-.197.2-.513 0-.709a.518.518 0 0 0-.723 0l-4.25 4.16a.686.686 0 0 0 0 .986l4.25 4.16c.2.196.524.196.723 0 .2-.194.2-.512 0-.708l-3.486-3.411h7.37v.004c1.49-.037 2.667 1.19 2.667 2.662s-1.178 2.699-2.667 2.663v.004h-1.6a.533.533 0 0 0 0 1.067h1.6a3.737 3.737 0 0 0 3.733-3.734c0-2.057-1.654-3.756-3.715-3.73' clip-rule='evenodd'/%3E%3C/svg%3E");
209
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Crect width='12' height='3' x='2' y='7' rx='1.5'/%3E%3C/svg%3E");
180
210
  }
181
211
  }
182
212
 
183
- &__change-log {
213
+ &__check {
184
214
  &::after {
185
215
  @include icon-mask-base;
186
216
 
187
- mask-image: url("data:image/svg+xml,%3Csvg id='change-log' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16.5 15.717V11.2h-1v5.083l2.91 1.746.514-.858-2.424-1.454Z' clip-rule='evenodd'/%3E%3Cpath d='M9.066 16a6.934 6.934 0 1 1 3.736 6.152l.494-.95A5.862 5.862 0 1 0 10.138 16H9.066Z'/%3E%3Cpath d='M7.467 16h4.266L9.6 18.667 7.467 16Z'/%3E%3C/svg%3E");
217
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M22.726 9.437a1.5 1.5 0 0 1 .371 2.088l-7.448 10.667a1.5 1.5 0 0 1-2.347.143l-4.285-4.779a1.5 1.5 0 0 1 2.234-2.003l3.022 3.37 6.364-9.115a1.5 1.5 0 0 1 2.089-.371Z' clip-rule='evenodd'/%3E%3C/svg%3E");
188
218
  }
189
219
  }
190
220
 
191
- &__search {
221
+ &__checkmark-circle {
192
222
  &::after {
193
223
  @include icon-mask-base;
194
224
 
195
- mask-image: url("data:image/svg+xml,%3Csvg id='search' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='m19.114 18.485 3.083 3.2a.917.917 0 0 1 0 1.227.981.981 0 0 1-1.366 0l-3.2-3.2a5.472 5.472 0 0 1-2.634.683 5.397 5.397 0 1 1 5.397-5.333 5.227 5.227 0 0 1-1.28 3.423Zm-5.473-6.65a3.488 3.488 0 0 0-2.11 3.27 3.467 3.467 0 0 0 3.476 3.423 3.488 3.488 0 1 0-1.366-6.693Z' clip-rule='evenodd'/%3E%3C/svg%3E");
225
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M21.573 11.18a1 1 0 0 1 .247 1.393l-5.713 8.181a1 1 0 0 1-1.564.095l-3.287-3.665a1 1 0 0 1 1.489-1.335l2.444 2.726 4.991-7.147a1 1 0 0 1 1.393-.248Z' clip-rule='evenodd'/%3E%3C/svg%3E");
196
226
  }
197
227
  }
198
228
 
199
- &__new-tab {
229
+ &__chevron {
200
230
  &::after {
201
231
  @include icon-mask-base;
202
232
 
203
- mask-image: url("data:image/svg+xml,%3Csvg id='new-tab' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M17.571 8H23.464c.296 0 .536.24.536.536V14.429h-1.071v-4.6l-7.657 7.657-.38.379-.757-.758.38-.379 7.656-7.657h-4.6V8ZM9 10.143h7.5v1.071h-6.429V21.93h10.715V15.5h1.071V23H9V10.143Z' clip-rule='evenodd'/%3E%3C/svg%3E");
233
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23000' fill-rule='evenodd' clip-rule='evenodd' d='M13.414 10.133a.61.61 0 0 0-.434 1.044L17.818 16l-4.838 4.822a.61.61 0 0 0 .434 1.045c.157 0 .315-.061.434-.18l5.102-5.085a.848.848 0 0 0 0-1.204l-5.102-5.085a.618.618 0 0 0-.434-.18'/%3E%3C/svg%3E");
234
+ }
235
+ }
236
+
237
+ &__chevron-ring {
238
+ &::after {
239
+ @include icon-mask-base;
240
+
241
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill-rule='evenodd' clip-path='url(%23a)' clip-rule='evenodd'%3E%3Cpath d='M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z'/%3E%3Cpath d='M13.414 10.133a.61.61 0 0 0-.434 1.044L17.818 16l-4.838 4.822a.61.61 0 0 0 .434 1.045c.157 0 .315-.061.434-.18l5.102-5.085a.848.848 0 0 0 0-1.204l-5.102-5.085a.618.618 0 0 0-.434-.18Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h32v32H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
242
+ }
243
+ }
244
+
245
+ &__chevron-ring-fill {
246
+ &::before {
247
+ @include fill-icon-bg;
248
+ }
249
+
250
+ &::after {
251
+ @include colorMixin.text-color('gray-dark');
252
+ @include icon-mask-base;
253
+
254
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill-rule='evenodd' clip-path='url(%23a)' clip-rule='evenodd'%3E%3Cpath d='M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z'/%3E%3Cpath d='M13.414 10.133a.61.61 0 0 0-.434 1.044L17.818 16l-4.838 4.822a.61.61 0 0 0 .434 1.045c.157 0 .315-.061.434-.18l5.102-5.085a.848.848 0 0 0 0-1.204l-5.102-5.085a.618.618 0 0 0-.434-.18Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h32v32H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
255
+ }
256
+ }
257
+
258
+ &__clock {
259
+ &::after {
260
+ @include icon-mask-base;
261
+
262
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M9.066 16a6.933 6.933 0 1 1 13.867 0 6.933 6.933 0 0 1-13.867 0Zm12.8 0A5.867 5.867 0 0 0 16 10.133 5.877 5.877 0 0 0 10.133 16a5.867 5.867 0 0 0 11.733 0Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M16.5 15.71V11.2h-1v5.09l2.908 1.659.496-.869-2.404-1.37Z' clip-rule='evenodd'/%3E%3Cpath d='M11.2 15.467h1.067v1.067H11.2zM19.733 15.467H20.8v1.067h-1.067zM15.467 19.733h1.067V20.8h-1.067z'/%3E%3C/svg%3E");
204
263
  }
205
264
  }
206
265
 
@@ -208,7 +267,23 @@
208
267
  &::after {
209
268
  @include icon-mask-base;
210
269
 
211
- mask-image: url("data:image/svg+xml,%3Csvg id='close' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M20.255 20.932a.672.672 0 0 1-.47-.202l-8.533-8.534a.672.672 0 1 1 .95-.938l8.533 8.533a.672.672 0 0 1 0 .939.715.715 0 0 1-.48.202Z'/%3E%3Cpath d='M11.721 20.932a.714.714 0 0 0 .48-.202l8.533-8.534a.672.672 0 0 0-.949-.938l-8.533 8.533a.672.672 0 0 0 .469 1.141Z'/%3E%3C/svg%3E");
270
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M20.255 20.932a.672.672 0 0 1-.47-.202l-8.533-8.534a.672.672 0 1 1 .95-.938l8.533 8.533a.672.672 0 0 1 0 .939.715.715 0 0 1-.48.202Z'/%3E%3Cpath d='M11.721 20.932a.714.714 0 0 0 .48-.202l8.533-8.534a.672.672 0 0 0-.949-.938l-8.533 8.533a.672.672 0 0 0 .469 1.141Z'/%3E%3C/svg%3E");
271
+ }
272
+ }
273
+
274
+ &__close-big {
275
+ &::after {
276
+ @include icon-mask-base;
277
+
278
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M25.566 6.403a.75.75 0 0 1 0 1.06L7.464 25.567a.75.75 0 0 1-1.06-1.061L24.504 6.403a.75.75 0 0 1 1.06 0Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M6.403 6.403a.75.75 0 0 1 1.06 0l18.103 18.102a.75.75 0 0 1-1.06 1.06L6.402 7.465a.75.75 0 0 1 0-1.061Z' clip-rule='evenodd'/%3E%3C/svg%3E");
279
+ }
280
+ }
281
+
282
+ &__code {
283
+ &::after {
284
+ @include icon-mask-base;
285
+
286
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='m7.563 16.277 3.755 2.464c.15.107.256.203.32.3a.609.609 0 0 1 .096.34.66.66 0 0 1-.086.352.304.304 0 0 1-.256.128.524.524 0 0 1-.16-.032c-.053-.032-.138-.074-.245-.149l-4.064-2.71c-.01 0-.032-.01-.053-.031-.31-.203-.47-.427-.47-.662 0-.234.15-.458.46-.66.031-.022.052-.033.063-.044l4.064-2.666c.096-.054.17-.107.235-.128.064-.022.117-.043.17-.043.107 0 .192.043.246.128a.53.53 0 0 1 .096.33.645.645 0 0 1-.096.353.971.971 0 0 1-.32.298l-3.755 2.432ZM14.508 20.235c-.107.245-.214.416-.31.501a.484.484 0 0 1-.341.128.484.484 0 0 1-.352-.15.468.468 0 0 1-.15-.362c0-.043.011-.085.022-.139a.944.944 0 0 1 .053-.16l4.555-7.669c.117-.256.224-.427.32-.512a.487.487 0 0 1 .33-.139c.15 0 .267.054.374.15.107.096.15.213.15.352 0 .042-.011.085-.022.128-.01.053-.032.096-.053.138l-4.576 7.734ZM24.875 16.277l-3.744-2.432a1.164 1.164 0 0 1-.33-.298.609.609 0 0 1-.097-.342c0-.138.032-.256.085-.33a.286.286 0 0 1 .246-.128c.053 0 .106.01.17.042.064.022.14.075.235.139l4.064 2.667c.01.01.032.021.064.042.31.192.459.416.459.662 0 .234-.15.458-.448.661-.032.021-.054.032-.075.043l-4.064 2.709-.021.01c-.182.107-.31.171-.384.171a.286.286 0 0 1-.246-.128c-.064-.085-.085-.202-.085-.352 0-.128.032-.234.096-.341.064-.096.17-.203.33-.299l3.745-2.496Z'/%3E%3C/svg%3E");
212
287
  }
213
288
  }
214
289
 
@@ -216,15 +291,123 @@
216
291
  &::after {
217
292
  @include icon-mask-base;
218
293
 
219
- mask-image: url("data:image/svg+xml,%3Csvg id='exclamation-mark-circle' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z' clip-rule='evenodd'/%3E%3Cpath d='M16 18.5c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm0-1.5c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z'/%3E%3C/svg%3E");
294
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z' clip-rule='evenodd'/%3E%3Cpath d='M16 18.5c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm0-1.5c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z'/%3E%3C/svg%3E");
220
295
  }
221
296
  }
222
297
 
223
- &__checkmark-circle {
298
+ &__exclamation-mark-circle-fill {
299
+ &::before {
300
+ @include colorMixin.bg-color('red');
301
+
302
+ position: absolute;
303
+ transform: translate(33%);
304
+ border-radius: 50%;
305
+ width: calc(var(--icon-size) * 0.6);
306
+ height: calc(var(--icon-size) * 0.6);
307
+ content: '';
308
+ }
309
+
310
+ &::after {
311
+ @include colorMixin.text-color('white');
312
+ @include icon-mask-base;
313
+
314
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3E%3Cpath fill='%23fff' d='M16 18.5c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm0-1.5c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z'/%3E%3C/svg%3E");
315
+ }
316
+ }
317
+
318
+ &__decrease-indent {
319
+ &::after {
320
+ @include icon-mask-base;
321
+
322
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M9.066 16.533h9.6v-1.067h-9.6v1.067ZM9.066 14.4h9.6v-1.067h-9.6V14.4ZM9.066 12.267h13.867V11.2H9.066v1.067ZM9.066 18.667h9.6V17.6h-9.6v1.067ZM9.066 20.8h13.867v-1.067H9.066V20.8ZM19.733 16l3.2 2.133v-4.266L19.733 16Z' clip-rule='evenodd'/%3E%3C/svg%3E");
323
+ }
324
+ }
325
+
326
+ &__delete {
327
+ &::after {
328
+ @include icon-mask-base;
329
+
330
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M9.067 25.067v-16h13.867v16H9.067ZM10.134 24h11.733V10.133H10.134V24Z' clip-rule='evenodd'/%3E%3Cpath d='M15.467 12.267h1.067V20.8h-1.067zM12.267 14.4h1.067v6.4h-1.067zM18.667 14.4h1.067v6.4h-1.067zM6.934 9.067h18.133v1.067H6.934zM13.334 6.933v2.134h1.067V8h3.2v1.067h1.066V6.933h-5.333Z'/%3E%3C/svg%3E");
331
+ }
332
+ }
333
+
334
+ &__dot {
335
+ &::after {
336
+ @include icon-mask-base;
337
+
338
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='4.267'/%3E%3C/svg%3E");
339
+ }
340
+ }
341
+
342
+ &__edit {
343
+ &::after {
344
+ @include icon-mask-base;
345
+
346
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='m7.797 24.235 4.64-1.248-3.381-3.382-1.26 4.63ZM9.637 19.04l8.794-8.795 3.387 3.386-8.795 8.795-3.386-3.387ZM22.517 12.907l1.494-1.483a.768.768 0 0 0 0-1.067L21.706 8a.757.757 0 0 0-1.066 0l-1.494 1.483 3.371 3.424Z'/%3E%3C/svg%3E");
347
+ }
348
+ }
349
+
350
+ &__editor {
224
351
  &::after {
225
352
  @include icon-mask-base;
226
353
 
227
- mask-image: url("data:image/svg+xml,%3Csvg id='checkmark-circle' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M21.573 11.18a1 1 0 0 1 .247 1.393l-5.713 8.181a1 1 0 0 1-1.564.095l-3.287-3.665a1 1 0 0 1 1.489-1.335l2.444 2.726 4.991-7.147a1 1 0 0 1 1.393-.248Z' clip-rule='evenodd'/%3E%3C/svg%3E");
354
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='m11.246 16.85 4.258-9.58a.532.532 0 0 1 .713-.29c.133.058.23.165.279.29l4.258 9.58a.533.533 0 0 1-.975.433L18.498 14.4h-4.996l-1.281 2.883a.533.533 0 1 1-.975-.433Zm2.73-3.517h4.048L16 8.78l-2.023 4.553ZM13.679 24a1.004 1.004 0 1 1-2.008 0 1.004 1.004 0 0 1 2.008 0Zm5.521-1.004a1.004 1.004 0 1 0 0 2.008 1.004 1.004 0 0 0 0-2.008ZM14.934 24a1.004 1.004 0 1 1 2.008 0 1.004 1.004 0 0 1-2.008 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
355
+ }
356
+ }
357
+
358
+ &__exlamation-mark-circle {
359
+ &::after {
360
+ @include icon-mask-base;
361
+
362
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z' clip-rule='evenodd'/%3E%3Cpath d='M16 18.5c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm0-1.5c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z'/%3E%3C/svg%3E");
363
+ }
364
+ }
365
+
366
+ &__eye-blind {
367
+ &::after {
368
+ @include icon-mask-base;
369
+
370
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M15.8 11.2c-2.1 0-3.8.4-5.1 1-.9 1.8-.7 4 .4 5.7l.7-.7c-1-1.6-1-3.8.3-5.4 1.2-.4 2.4-.6 3.7-.6 0 .1.1.1.1.1.6 0 1.2 0 1.8.1l.1-.1c-.7-.1-1.4-.1-2-.1ZM20.5 12l-.5.5c1 1.9.6 4.2-1 5.7-.9.9-2.1 1.3-3.2 1.3-.8 0-1.5-.2-2.2-.5l-.7.7c.3.2.6.3.9.4.6.1 1.2.1 1.9.1.8 0 1.5-.1 2.2-.2.7-.3 1.3-.6 1.8-1.2 1.8-1.7 2.3-4.4 1.3-6.6-.1 0-.3-.1-.5-.2Z'/%3E%3Cpath d='M15.8 12c-1.5 0-2.7 1.2-2.7 2.7 0 .4.1.7.2 1l3.5-3.5c-.3-.1-.6-.2-1-.2ZM18.4 14.1l-3.2 3.2c.2 0 .4.1.6.1 1.5 0 2.7-1.2 2.7-2.7 0-.2 0-.4-.1-.6Z'/%3E%3Cpath d='M15.8 10.2c-3.7 0-6.3 1.3-8 2.6-.8.6-1.4 1.3-1.8 1.8-.2.2-.3.5-.4.6l-.1.2v.1l.4.2-.4.2v.1l.1.2c.1.1.2.4.4.6.4.5 1 1.2 1.8 1.8.5.4 1 .7 1.6 1.1l.7-.7c-.7-.3-1.2-.7-1.7-1.1-.7-.6-1.3-1.2-1.6-1.6-.1-.2-.3-.4-.3-.5.1-.1.2-.3.3-.5.3-.4.9-1 1.6-1.6.6-.5 1.3-1 2.2-1.4 1.3-.6 3-1 5.1-1 .7 0 1.3 0 1.9.1l.9-.9c-.8-.2-1.7-.3-2.7-.3ZM26.1 15.4l-.4.2.4.2.1-.2-.1-.2Zm-4.9-4.1-.7.7c.2.1.4.2.6.2.8.4 1.5.8 2.1 1.3.7.6 1.3 1.2 1.6 1.6.1.2.3.4.3.5-.1.1-.2.3-.3.5-.3.4-.9 1-1.6 1.6-1.2.9-2.8 1.9-5.2 2.2-.7.1-1.4.2-2.2.2-.7 0-1.3 0-1.9-.1-.4-.1-.8-.1-1.2-.2l-.8.8c1.1.3 2.4.5 3.9.5 3.7 0 6.3-1.3 8-2.6.8-.7 1.4-1.3 1.8-1.8.2-.2.3-.5.4-.6v-.2l-.4-.2.4-.2v-.1l-.1-.2c-.1-.1-.2-.4-.4-.6-.4-.5-1-1.2-1.8-1.8-.6-.6-1.5-1.1-2.5-1.5Z'/%3E%3Cpath d='m5.9 15.7-.4-.2-.1.2.1.2.4-.2Z'/%3E%3C/svg%3E");
371
+ }
372
+ }
373
+
374
+ &__eye {
375
+ &::after {
376
+ @include icon-mask-base;
377
+
378
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M15.75 10.23c1.451-.01 2.894.21 4.274.654l.14.045.094.114a5.737 5.737 0 1 1-8.87 0l.387.317-.151-.476a13.863 13.863 0 0 1 4.127-.653Zm-3.68 1.562a4.737 4.737 0 1 0 7.505-.001 12.596 12.596 0 0 0-3.817-.56h-.001c-1.25.007-2.492.196-3.686.56Z' clip-rule='evenodd'/%3E%3Cpath d='M15.807 12.01a2.667 2.667 0 1 0 2.667 2.667 2.656 2.656 0 0 0-2.667-2.666Z'/%3E%3Cpath fill-rule='evenodd' d='M6.307 15.915Zm.143-.235a7.3 7.3 0 0 1 .34-.478 9.683 9.683 0 0 1 1.62-1.638c1.49-1.19 3.854-2.397 7.344-2.397s5.854 1.206 7.344 2.397a9.686 9.686 0 0 1 1.62 1.638c.148.192.26.356.34.478a7.37 7.37 0 0 1-.341.478 9.715 9.715 0 0 1-1.623 1.638c-1.491 1.191-3.856 2.397-7.34 2.397-3.485 0-5.849-1.206-7.34-2.397a9.717 9.717 0 0 1-1.623-1.638 7.327 7.327 0 0 1-.34-.478Zm19.192 0c.442-.234.442-.234.441-.235v-.002l-.003-.005-.008-.014a3.061 3.061 0 0 0-.136-.227 8.103 8.103 0 0 0-.426-.605 10.678 10.678 0 0 0-1.788-1.81c-1.646-1.315-4.226-2.615-7.968-2.615s-6.322 1.3-7.968 2.616a10.678 10.678 0 0 0-1.788 1.809 8.111 8.111 0 0 0-.533.781 3.033 3.033 0 0 0-.029.05l-.008.015-.002.005-.001.002.44.235-.44-.234-.125.235.124.234.442-.235-.442.235.001.001.001.002.003.004.008.015a3.798 3.798 0 0 0 .135.226c.095.15.236.358.428.606.383.496.969 1.153 1.79 1.808 1.647 1.316 4.227 2.616 7.964 2.616s6.316-1.3 7.964-2.616a10.719 10.719 0 0 0 1.79-1.808 8.113 8.113 0 0 0 .535-.782l.028-.05.008-.015.003-.004v-.002s.001-.001-.44-.236Zm0 0 .441.235.125-.234-.125-.236-.441.235Z' clip-rule='evenodd'/%3E%3C/svg%3E");
379
+ }
380
+ }
381
+
382
+ &__fail {
383
+ &::after {
384
+ @include icon-mask-base;
385
+
386
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M12.11 9.934a1.545 1.545 0 1 0-2.184 2.168l10.06 10.053c.284.289.67.454 1.075.461h.033c.4-.01.783-.171 1.07-.451l.007-.007.007-.007c.586-.6.586-1.557 0-2.157L12.11 9.934Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M20.093 9.724a1.553 1.553 0 0 1 2.194 2.17l-.028.035L12.02 22.162c-.289.282-.673.444-1.077.454h-.033a1.553 1.553 0 0 1-1.084-2.637l.006-.006L20.061 9.75l.032-.026Z' clip-rule='evenodd'/%3E%3C/svg%3E");
387
+ }
388
+ }
389
+
390
+ &__hourglass {
391
+ &::after {
392
+ @include icon-mask-base;
393
+
394
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='m16.896 16 3.904-2.848V9.6h1.067V8.533H10.134V9.6H11.2v3.552L15.095 16 11.2 18.848V22.4h-1.067v1.067h11.733V22.4H20.8v-3.552L16.896 16Zm-4.628-3.392L16 15.338l3.733-2.73V9.6h-7.466v3.008Zm7.466 9.792v-3.008l-3.733-2.73-3.733 2.73V22.4h7.466Zm-6.4-10.336v-.33h5.333v.33L16 14.016l-2.666-1.952Zm5.333 8.203h-5.333v1.066h5.333v-1.066Z' clip-rule='evenodd'/%3E%3C/svg%3E");
395
+ }
396
+ }
397
+
398
+ &__increase-indent {
399
+ &::after {
400
+ @include icon-mask-base;
401
+
402
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M13.333 16.533h9.6v-1.067h-9.6v1.067ZM13.333 18.667h9.6V17.6h-9.6v1.067ZM9.066 20.8h13.867v-1.067H9.066V20.8ZM13.333 14.4h9.6v-1.067h-9.6V14.4ZM9.066 12.267h13.867V11.2H9.066v1.067ZM9.066 18.133l3.2-2.133-3.2-2.133v4.266Z' clip-rule='evenodd'/%3E%3C/svg%3E");
403
+ }
404
+ }
405
+
406
+ &__info {
407
+ &::after {
408
+ @include icon-mask-base;
409
+
410
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='11.5' r='1.5'/%3E%3Cpath d='M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z'/%3E%3C/svg%3E");
228
411
  }
229
412
  }
230
413
 
@@ -232,7 +415,414 @@
232
415
  &::after {
233
416
  @include icon-mask-base;
234
417
 
235
- mask-image: url("data:image/svg+xml,%3Csvg id='info-circle' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z' clip-rule='evenodd'/%3E%3Ccircle cx='16' cy='11.5' r='1.5'/%3E%3Cpath d='M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z'/%3E%3C/svg%3E");
418
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z' clip-rule='evenodd'/%3E%3Ccircle cx='16' cy='11.5' r='1.5'/%3E%3Cpath d='M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z'/%3E%3C/svg%3E");
419
+ }
420
+ }
421
+
422
+ &__info-circle-fill {
423
+ &::before {
424
+ position: absolute;
425
+ transform: translate(30%);
426
+ border-radius: 50%;
427
+ background: white;
428
+ width: calc(var(--icon-size) * 0.6);
429
+ height: calc(var(--icon-size) * 0.6);
430
+ content: '';
431
+ }
432
+
433
+ &::after {
434
+ @include colorMixin.text-color('primary');
435
+ @include icon-mask-base;
436
+
437
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 25a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 1c5.523 0 10-4.477 10-10S21.523 6 16 6 6 10.477 6 16s4.477 10 10 10Z' clip-rule='evenodd'/%3E%3Ccircle cx='16' cy='11.5' r='1.5'/%3E%3Cpath d='M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z'/%3E%3C/svg%3E");
438
+ }
439
+ }
440
+
441
+ &__junction {
442
+ &::after {
443
+ @include icon-mask-base;
444
+
445
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M19.2 8.565h-8.533L6.4 11.232l4.267 2.667H19.2V8.565ZM22.294 14.965h-8.533V20.3h8.533l4.267-2.667-4.267-2.667ZM16.427 21.365a.528.528 0 0 0-.533.534v3.2c0 .298.234.533.533.533a.528.528 0 0 0 .533-.533v-3.2a.528.528 0 0 0-.533-.534ZM16.427 7.477a.528.528 0 0 0 .533-.533V5.867a.528.528 0 0 0-.533-.534.528.528 0 0 0-.533.534v1.077c0 .299.234.533.533.533Z'/%3E%3C/svg%3E");
446
+ }
447
+ }
448
+
449
+ &__link {
450
+ &::after {
451
+ @include icon-mask-base;
452
+
453
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M20.707 11.121a1 1 0 0 0-1.414 0l-.354.354a1 1 0 0 1-1.414-1.414l.354-.354a3 3 0 0 1 4.242 0l.707.707a3 3 0 0 1 0 4.243l-4.242 4.242a2.5 2.5 0 0 1-3.536 0 1 1 0 1 1 1.415-1.414.5.5 0 0 0 .707 0l4.242-4.242a1 1 0 0 0 0-1.415l-.707-.707Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M11.868 21.374a1 1 0 0 0 1.414 0l.354-.353a1 1 0 0 1 1.414 1.414l-.354.354a3 3 0 0 1-4.242 0l-.707-.708a3 3 0 0 1 0-4.242l3.889-3.89a3 3 0 0 1 4.242 0l.354.354a1 1 0 1 1-1.414 1.414l-.354-.353a1 1 0 0 0-1.414 0l-3.889 3.89a1 1 0 0 0 0 1.413l.707.707Z' clip-rule='evenodd'/%3E%3C/svg%3E");
454
+ }
455
+ }
456
+
457
+ &__list-add {
458
+ &::after {
459
+ @include icon-mask-base;
460
+
461
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M12.5 6.5a.5.5 0 0 1 .5.5v2h2.5V7a.5.5 0 0 1 1 0v2H19V7a.5.5 0 0 1 1 0v2h1a1 1 0 0 1 1 1v1a4.978 4.978 0 0 0-3 1h-6.5a.5.5 0 0 0 0 1H18a4.977 4.977 0 0 0-.9 2h-4.6a.5.5 0 0 0 0 1H17a5 5 0 0 0 5 5v1a1 1 0 0 1-1 1H11a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h1V7a.5.5 0 0 1 .5-.5Zm0 11.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M22 12.5a.5.5 0 0 1 .5.5v2.5H25a.5.5 0 0 1 0 1h-2.5V19a.5.5 0 0 1-1 0v-2.5H19a.5.5 0 0 1 0-1h2.5V13a.5.5 0 0 1 .5-.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
462
+ }
463
+ }
464
+
465
+ &__list-minus {
466
+ &::after {
467
+ @include icon-mask-base;
468
+
469
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M12.5 6.5a.5.5 0 0 1 .5.5v2h2.5V7a.5.5 0 0 1 1 0v2H19V7a.5.5 0 0 1 1 0v2h1a1 1 0 0 1 1 1v1a4.978 4.978 0 0 0-3 1h-6.5a.5.5 0 0 0 0 1H18a4.977 4.977 0 0 0-.9 2h-4.6a.5.5 0 0 0 0 1H17a5 5 0 0 0 5 5v1a1 1 0 0 1-1 1H11a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1h1V7a.5.5 0 0 1 .5-.5Zm0 11.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M18.5 16a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
470
+ }
471
+ }
472
+
473
+ &__lock {
474
+ &::after {
475
+ @include icon-mask-base;
476
+
477
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M20.8 13.43h-1.066v-.534a3.733 3.733 0 1 0-7.467 0v.533h-1.066c-.59 0-1.067.478-1.067 1.067v6.933a1.6 1.6 0 0 0 1.6 1.6h8.533a1.6 1.6 0 0 0 1.6-1.6v-6.933c0-.59-.477-1.067-1.067-1.067Zm-7.466-.534a2.667 2.667 0 1 1 5.333 0v.533h-5.333v-.533Zm6.933 9.067a.533.533 0 0 0 .533-.534v-6.933h-9.6v6.933a.544.544 0 0 0 .534.534h8.533Z' clip-rule='evenodd'/%3E%3Cpath d='M17.6 17.163a1.6 1.6 0 1 0-2.4 1.376v1.557a.8.8 0 1 0 1.6 0v-1.557a1.59 1.59 0 0 0 .8-1.376Z'/%3E%3C/svg%3E");
478
+ }
479
+ }
480
+
481
+ &__lock-open {
482
+ &::after {
483
+ @include icon-mask-base;
484
+
485
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M12.267 12.279v-.06 3.344H20.8c.59 0 1.067.477 1.067 1.066v6.934a1.6 1.6 0 0 1-1.6 1.6h-8.533a1.6 1.6 0 0 1-1.6-1.6v-6.934c0-.589.477-1.066 1.066-1.066h1.067v-3.284Zm8 11.817a.533.533 0 0 0 .533-.533v-6.934h-9.6v6.934a.544.544 0 0 0 .534.533h8.533Z' clip-rule='evenodd'/%3E%3Cpath d='M17.6 19.296a1.6 1.6 0 1 0-2.4 1.376v1.557a.8.8 0 1 0 1.6 0v-1.557a1.59 1.59 0 0 0 .8-1.376Z'/%3E%3Cpath fill-rule='evenodd' d='M12.268 16.106V11.66C12.268 9.708 13.976 8 16 8c2.025 0 3.733 1.708 3.733 3.66v.073h-1.067v-.073c0-1.363-1.23-2.593-2.666-2.593s-2.667 1.23-2.667 2.593v4.446h-1.066Z' clip-rule='evenodd'/%3E%3C/svg%3E");
486
+ }
487
+ }
488
+
489
+ &__magic-wand {
490
+ &::after {
491
+ @include icon-mask-base;
492
+
493
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='m14.264 16.686-7.643 7.717a.722.722 0 0 0 0 1.04c.147.148.294.148.588.148s.44 0 .588-.149l7.643-7.717a.722.722 0 0 0 0-1.039c-.294-.296-.882-.296-1.176 0' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M19.703 13.125c.147 0 .441 0 .588-.149l2.94-2.968a.722.722 0 0 0 0-1.039.706.706 0 0 0-1.03 0l-2.939 2.968c-.294.149-.294.594-.147.89.147.15.441.298.588.298M20.29 16.686a.706.706 0 0 0-1.028 0 .722.722 0 0 0 0 1.04l2.94 2.967c.146.149.293.149.587.149s.441 0 .588-.149a.722.722 0 0 0 0-1.039l-3.087-2.968ZM12.5 8.82a.706.706 0 0 0-1.028 0 .722.722 0 0 0 0 1.04l2.94 2.968c.146.148.293.148.587.148s.441 0 .588-.148a.722.722 0 0 0 0-1.039L12.5 8.821ZM17.351 17.577c-.44 0-.735.296-.735.742v4.007c0 .445.294.742.735.742s.735-.297.735-.742v-4.007c0-.445-.44-.742-.735-.742' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M17.351 6.446c-.44 0-.735.297-.735.742v4.007c0 .445.294.742.735.742s.735-.296.735-.742V7.188c0-.445-.44-.742-.735-.742' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M9.854 15.5h3.969c.44 0 .735-.298.735-.743s-.441-.742-.735-.742H9.854c-.44 0-.735.297-.735.742s.294.742.735.742' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M24.847 14.015h-3.969c-.44 0-.734.297-.734.742s.294.742.735.742h3.968c.441 0 .735-.297.735-.742s-.441-.742-.735-.742' clip-rule='evenodd'/%3E%3C/svg%3E");
494
+ }
495
+ }
496
+
497
+ &__mail {
498
+ &::after {
499
+ @include icon-mask-base;
500
+
501
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M24 10H8l8 7 8-7Z'/%3E%3Cpath d='m16 18.5-8-7V21a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-9.5l-8 7Z'/%3E%3C/svg%3E");
502
+ }
503
+ }
504
+
505
+ &__menu {
506
+ &::after {
507
+ @include icon-mask-base;
508
+
509
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M28.8 9.067H3.2V5.333h25.6v3.734Zm0 4.8H3.2V17.6h25.6v-3.733Zm0 8.533H3.2v3.733h25.6V22.4Z'/%3E%3C/svg%3E");
510
+ }
511
+ }
512
+
513
+ &__message {
514
+ &::after {
515
+ @include icon-mask-base;
516
+
517
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M11 25.5V22h3.5L11 25.5Z'/%3E%3Cpath fill-rule='evenodd' d='M7 11a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-9Zm3 5.75a.75.75 0 0 1 .75-.75h6.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1-.75-.75Zm.75-4.75a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5h-10.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
518
+ }
519
+ }
520
+
521
+ &__minus {
522
+ &::after {
523
+ @include icon-mask-base;
524
+
525
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M10 15h12v1H10z'/%3E%3C/svg%3E");
526
+ }
527
+ }
528
+
529
+ &__minus-ring-fill {
530
+ &::before {
531
+ @include fill-icon-bg;
532
+ }
533
+
534
+ &::after {
535
+ @include colorMixin.text-color('primary');
536
+ @include icon-mask-base;
537
+
538
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3E%3Cpath fill='%231076DB' fill-rule='evenodd' d='M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z' clip-rule='evenodd'/%3E%3Cpath fill='%231076DB' d='M10 15h12v1H10z'/%3E%3C/svg%3E");
539
+ }
540
+ }
541
+
542
+ &__new-tab {
543
+ &::after {
544
+ @include icon-mask-base;
545
+
546
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M17.571 8H23.464c.296 0 .536.24.536.536V14.429h-1.071v-4.6l-7.657 7.657-.38.379-.757-.758.38-.379 7.656-7.657h-4.6V8ZM9 10.143h7.5v1.071h-6.429V21.93h10.715V15.5h1.071V23H9V10.143Z' clip-rule='evenodd'/%3E%3C/svg%3E");
547
+ }
548
+ }
549
+
550
+ &__notebook {
551
+ &::after {
552
+ @include icon-mask-base;
553
+
554
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M13 7a.5.5 0 0 0-1 0v2h-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V10a1 1 0 0 0-1-1h-1V7a.5.5 0 0 0-1 0v2h-2.5V7a.5.5 0 0 0-1 0v2H13V7Zm-1 11.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5Zm.5-3.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7Zm-.5-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
555
+ }
556
+ }
557
+
558
+ &__notification {
559
+ &::after {
560
+ @include icon-mask-base;
561
+
562
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 24a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0 1a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z' clip-rule='evenodd'/%3E%3Cg clip-path='url(%23a)'%3E%3Ccircle cx='16' cy='11.5' r='1.5'/%3E%3Cpath d='M17 20.5v-6h-3v1h1v5h-1v1h4v-1h-1Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M8 8h16v16H8z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
563
+ }
564
+ }
565
+
566
+ &__numbering {
567
+ &::after {
568
+ @include icon-mask-base;
569
+
570
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M8.897 8v4.732H7.812V9.078l-1.015.623-.483-.735L7.91 8h.987ZM7.705 13.902c.34 0 .632.06.875.182.247.121.434.285.56.49.13.205.196.432.196.679 0 .252-.051.492-.154.721-.103.229-.285.492-.546.791-.261.294-.642.667-1.14 1.12h1.938l-.112.847h-3.08v-.784c.574-.565.992-.99 1.253-1.274.261-.29.443-.53.546-.721.107-.191.161-.387.161-.588 0-.191-.056-.34-.168-.448a.582.582 0 0 0-.441-.168.845.845 0 0 0-.448.119 1.61 1.61 0 0 0-.413.371l-.65-.518a2.15 2.15 0 0 1 .699-.602c.275-.145.583-.217.924-.217ZM7.701 19.902c.331 0 .614.054.847.161.238.107.418.252.539.434.126.182.189.385.189.609 0 .285-.082.523-.245.714-.159.191-.385.329-.679.413.317.033.576.147.777.343.2.191.301.464.301.819 0 .266-.07.511-.21.735-.14.22-.348.394-.623.525-.27.13-.595.196-.973.196-.69 0-1.232-.238-1.624-.714l.595-.581c.159.159.313.275.462.35.154.07.322.105.504.105.22 0 .397-.06.532-.182.135-.121.203-.29.203-.504 0-.243-.065-.415-.196-.518-.126-.107-.317-.161-.574-.161h-.392l.119-.763h.273c.21 0 .376-.054.497-.161.121-.107.182-.259.182-.455a.49.49 0 0 0-.168-.399c-.112-.098-.266-.147-.462-.147-.331 0-.64.138-.924.413l-.546-.595a2.24 2.24 0 0 1 1.596-.637Z'/%3E%3Cpath fill-rule='evenodd' d='M12.347 10.232a.5.5 0 0 1 .5-.5h12.5a.5.5 0 0 1 0 1h-12.5a.5.5 0 0 1-.5-.5ZM12.347 16.732a.5.5 0 0 1 .5-.5h12.5a.5.5 0 0 1 0 1h-12.5a.5.5 0 0 1-.5-.5ZM12.347 22.732a.5.5 0 0 1 .5-.5h12.5a.5.5 0 0 1 0 1h-12.5a.5.5 0 0 1-.5-.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
571
+ }
572
+ }
573
+
574
+ &__paperclip {
575
+ &::after {
576
+ @include icon-mask-base;
577
+
578
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M11 8.594a3.594 3.594 0 1 1 7.188 0V21.53a2.156 2.156 0 0 1-4.313 0V11.47a.719.719 0 1 1 1.438 0V21.53a.719.719 0 1 0 1.437 0V8.594a2.157 2.157 0 0 0-4.312 0V21.53a3.593 3.593 0 1 0 7.187 0V11.47a.719.719 0 1 1 1.438 0V21.53a5.032 5.032 0 0 1-10.063 0z'/%3E%3C/svg%3E");
579
+ }
580
+ }
581
+
582
+ &__pdf {
583
+ &::after {
584
+ @include icon-mask-base;
585
+
586
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M7.69 12.363c1.857 0 2.987.757 2.987 2.346 0 1.696-1.226 2.454-2.89 2.454h-.864v2.57H5.515v-7.37H7.69Zm-.01 3.744c.939 0 1.525-.32 1.525-1.398 0-.928-.565-1.312-1.525-1.312h-.757v2.71h.757Zm5.952-3.744c1.941 0 3.776.597 3.776 3.648 0 2.986-1.824 3.722-3.584 3.722h-2.006v-7.37h1.814Zm-.405 1.056v5.258h.693c1.099 0 2.005-.49 2.005-2.666 0-2.219-.96-2.592-2.048-2.592h-.65Zm9.525-.011h-2.613v2.208h2.272v1.045h-2.272v3.072H18.73v-7.37h4.17l-.149 1.045Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M7.5 6A1.5 1.5 0 0 1 9 4.5h15A1.5 1.5 0 0 1 25.5 6v16.207L20.707 27H9a1.5 1.5 0 0 1-1.5-1.5V21h1v4.5a.5.5 0 0 0 .5.5h11v-3a1.5 1.5 0 0 1 1.5-1.5h3V6a.5.5 0 0 0-.5-.5H9a.5.5 0 0 0-.5.5v5h-1V6Zm16.293 16.5H21.5a.5.5 0 0 0-.5.5v2.293l2.793-2.793Z' clip-rule='evenodd'/%3E%3C/svg%3E");
587
+ }
588
+ }
589
+
590
+ &__people {
591
+ &::after {
592
+ @include icon-mask-base;
593
+
594
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='33'%3E%3Cpath fill-rule='evenodd' d='M25 17.197a6 6 0 1 0-6.367-10.164A6 6 0 0 1 21 18.197V19h2a4 4 0 0 1 4 4v1h4v-2a4 4 0 0 0-4-4h-2v-.803ZM14.353 19H15v-.465c-.231.134-.448.29-.646.465Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M22 14c0 2.22-1.207 4.16-3 5.197V20h2a4 4 0 0 1 4 4v2H7v-2a4 4 0 0 1 4-4h2v-.803A6 6 0 1 1 22 14Z' clip-rule='evenodd'/%3E%3C/svg%3E");
595
+ }
596
+ }
597
+
598
+ &__person {
599
+ &::after {
600
+ @include icon-mask-base;
601
+
602
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M22 13c0 2.22-1.207 4.16-3 5.197V19h2a4 4 0 0 1 4 4v2H7v-2a4 4 0 0 1 4-4h2v-.803A6 6 0 1 1 22 13Z' clip-rule='evenodd'/%3E%3C/svg%3E");
603
+ }
604
+ }
605
+
606
+ &__picker {
607
+ &::after {
608
+ @include icon-mask-base;
609
+
610
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16.794 14.851a3.396 3.396 0 0 1 3.392-3.392 3.395 3.395 0 0 1 3.393 3.392 3.396 3.396 0 0 1-3.393 3.392 3.396 3.396 0 0 1-3.392-3.392m10.408 6.512-3.01-3.122a5.22 5.22 0 0 0 1.247-3.39A5.258 5.258 0 0 0 20.186 9.6a5.257 5.257 0 0 0-5.252 5.251 5.258 5.258 0 0 0 5.252 5.25c.932 0 1.807-.246 2.565-.673l3.093 3.208c.361.372.96.383 1.334.023a.915.915 0 0 0 .024-1.296' clip-rule='evenodd'/%3E%3Cpath d='M3.2 17.067h8.533V16H3.2v1.067ZM3.2 12.8h9.6v-1.067H3.2V12.8ZM3.2 8.533h10.667V7.467H3.2v1.066ZM3.2 21.333h9.6v-1.066H3.2v1.066ZM3.2 25.6h8.533v-1.067H3.2V25.6Z'/%3E%3C/svg%3E");
611
+ }
612
+ }
613
+
614
+ &__pin {
615
+ &::after {
616
+ @include icon-mask-base;
617
+
618
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8.34 4C6.5 4 5 5.52 5 7.39c0 .6.16 1.23.43 1.67l.02.04c.07.12.38.52.8 1 .86.99 2.11 2.33 2.11 2.33s1.24-1.36 2.09-2.34c.4-.47.7-.86.77-.97l.04-.07c.28-.44.43-1.07.43-1.67 0-1.86-1.5-3.38-3.35-3.38Zm0 5.24c-1.04 0-1.89-.85-1.89-1.89s.85-1.9 1.89-1.9 1.9.85 1.9 1.89-.85 1.9-1.9 1.9Z'/%3E%3C/svg%3E");
619
+ }
620
+ }
621
+
622
+ &__place {
623
+ &::after {
624
+ @include icon-mask-base;
625
+
626
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M21.867 8.533c0 .295-.219.534-.489.534H10.623c-.27 0-.49-.24-.49-.534 0-.294.22-.533.49-.533h10.755c.27 0 .49.239.49.533M15.623 11.89l-5.333 5.333a.534.534 0 0 0 .754.754l4.423-4.422v9.912a.533.533 0 1 0 1.067 0v-9.912l4.422 4.422a.534.534 0 0 0 .755-.754l-5.334-5.333a.534.534 0 0 0-.754 0' clip-rule='evenodd'/%3E%3C/svg%3E");
627
+ }
628
+ }
629
+
630
+ &__place-ring-fill {
631
+ &::before {
632
+ @include fill-icon-bg;
633
+ }
634
+
635
+ &::after {
636
+ @include colorMixin.text-color('primary');
637
+ @include icon-mask-base;
638
+
639
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3E%3Cpath fill='%231076DB' fill-rule='evenodd' d='M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z' clip-rule='evenodd'/%3E%3Cpath fill='%231076DB' fill-rule='evenodd' d='M23.467 21.733c-.294 0-.533-.219-.533-.489V10.49c0-.27.238-.489.533-.489.294 0 .533.219.533.489v10.755c0 .27-.239.49-.533.49M20.11 15.49l-5.333-5.334a.534.534 0 0 0-.754.754l4.422 4.424H8.532a.533.533 0 1 0 0 1.066h9.913l-4.422 4.423a.534.534 0 0 0 .754.754l5.333-5.334a.534.534 0 0 0 0-.754' clip-rule='evenodd'/%3E%3C/svg%3E");
640
+ }
641
+ }
642
+
643
+ &__plus {
644
+ &::after {
645
+ @include icon-mask-base;
646
+
647
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M16 9h1v13h-1z'/%3E%3Cpath d='M10 15h13v1H10z'/%3E%3C/svg%3E");
648
+ }
649
+ }
650
+
651
+ &__print {
652
+ &::after {
653
+ @include icon-mask-base;
654
+
655
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cmask id='a' width='20' height='20' x='6' y='6' maskUnits='userSpaceOnUse' style='mask-type:luminance'%3E%3Cpath fill-rule='evenodd' d='M6.4 6.933h19.2v18.134H6.4V6.933Z' clip-rule='evenodd'/%3E%3C/mask%3E%3Cpath fill-rule='evenodd' d='m21.654 24-11.414.107v-6.4c0-.214.107-.32.214-.32H21.44c.107 0 .214.106.214.32V24ZM10.24 8h11.414v1.813H10.24V8Zm12.587 16.107V22.08c.107 0 .213.107.32.107h1.173c.747 0 1.28-.64 1.28-1.387v-8.32c0-1.387-1.066-2.56-2.346-2.56h-.427V7.893c0-.533-.533-.96-1.067-.96H10.24c-.64 0-1.066.427-1.066.96V9.92h-.427c-1.28 0-2.347 1.173-2.347 2.56v8.213c0 .747.64 1.387 1.28 1.387h1.387v2.027c0 .533.533.96 1.067.96h11.413c.747 0 1.28-.427 1.28-.96Z' clip-rule='evenodd'/%3E%3Cpath d='M11.84 20.053h8.32v-1.066h-8.32v1.066ZM11.84 22.827h8.32V21.76h-8.32v1.067Z'/%3E%3C/svg%3E");
656
+ }
657
+ }
658
+
659
+ &__question-mark {
660
+ &::after {
661
+ @include icon-mask-base;
662
+
663
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M15.992 7c.96 0 1.784.176 2.472.528.704.336 1.232.792 1.584 1.368.352.576.528 1.192.528 1.848 0 .624-.112 1.16-.336 1.608a3.336 3.336 0 0 1-.768 1.056c-.304.272-.712.592-1.224.96-.672.464-1.176.896-1.512 1.296-.336.384-.504.904-.504 1.56v1.08h-2.184v-1.2c0-.688.112-1.272.336-1.752.24-.48.52-.864.84-1.152.32-.288.744-.616 1.272-.984.608-.4 1.056-.76 1.344-1.08.288-.32.432-.736.432-1.248 0-.656-.216-1.16-.648-1.512-.432-.368-1.024-.552-1.776-.552-1.28 0-2.392.576-3.336 1.728L11 9.376C12.344 7.792 14.008 7 15.992 7ZM15.2 20.776c.48 0 .88.16 1.2.48.32.32.48.712.48 1.176 0 .464-.16.864-.48 1.2-.32.32-.72.48-1.2.48a1.6 1.6 0 0 1-1.176-.48 1.68 1.68 0 0 1-.48-1.2c0-.464.16-.856.48-1.176a1.6 1.6 0 0 1 1.176-.48Z'/%3E%3C/svg%3E");
664
+ }
665
+ }
666
+
667
+ &__required {
668
+ &::after {
669
+ @include icon-mask-base;
670
+
671
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M15.745 9a.75.75 0 0 1 .75.75v4.676l3.87-2.32a.75.75 0 0 1 .77 1.287l-3.931 2.357 3.932 2.357a.75.75 0 1 1-.771 1.286l-3.87-2.319v4.676a.75.75 0 0 1-1.5 0v-4.675l-3.859 2.318a.75.75 0 0 1-.772-1.286l3.925-2.357-3.925-2.357a.75.75 0 0 1 .772-1.286l3.86 2.318V9.75a.75.75 0 0 1 .75-.75Z' clip-rule='evenodd'/%3E%3C/svg%3E");
672
+ }
673
+ }
674
+
675
+ &__ring-close {
676
+ &::after {
677
+ @include icon-mask-base;
678
+
679
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z' clip-rule='evenodd'/%3E%3Cpath d='M20.255 20.932a.672.672 0 0 1-.47-.202l-8.533-8.534a.672.672 0 1 1 .95-.938l8.533 8.533a.672.672 0 0 1 0 .939.715.715 0 0 1-.48.202Z'/%3E%3Cpath d='M11.721 20.932a.714.714 0 0 0 .48-.202l8.533-8.534a.672.672 0 0 0-.949-.938l-8.533 8.533a.672.672 0 0 0 .469 1.141Z'/%3E%3C/svg%3E");
680
+ }
681
+ }
682
+
683
+ &__ring-close-fill {
684
+ &::before {
685
+ @include fill-icon-bg;
686
+ }
687
+
688
+ &::after {
689
+ @include colorMixin.text-color('primary');
690
+ @include icon-mask-base;
691
+
692
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z' clip-rule='evenodd'/%3E%3Cpath d='M20.255 20.932a.672.672 0 0 1-.47-.202l-8.533-8.534a.672.672 0 1 1 .95-.938l8.533 8.533a.672.672 0 0 1 0 .939.715.715 0 0 1-.48.202Z'/%3E%3Cpath d='M11.721 20.932a.714.714 0 0 0 .48-.202l8.533-8.534a.672.672 0 0 0-.949-.938l-8.533 8.533a.672.672 0 0 0 .469 1.141Z'/%3E%3C/svg%3E");
693
+ }
694
+ }
695
+
696
+ &__ring-plus {
697
+ &::after {
698
+ @include icon-mask-base;
699
+
700
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z' clip-rule='evenodd'/%3E%3Cpath d='M16 9h1v13h-1z'/%3E%3Cpath d='M10 15h13v1H10z'/%3E%3C/svg%3E");
701
+ }
702
+ }
703
+
704
+ &__ring-plus-fill {
705
+ &::before {
706
+ @include fill-icon-bg;
707
+ }
708
+
709
+ &::after {
710
+ @include colorMixin.text-color('primary');
711
+ @include icon-mask-base;
712
+
713
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16 28c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12Zm0 1c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16s5.82 13 13 13Z' clip-rule='evenodd'/%3E%3Cpath d='M16 9h1v13h-1z'/%3E%3Cpath d='M10 15h13v1H10z'/%3E%3C/svg%3E");
714
+ }
715
+ }
716
+
717
+ &__rosette {
718
+ &::after {
719
+ @include icon-mask-base;
720
+
721
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16.439 20.144a5.925 5.925 0 0 1-5.92-5.919 5.925 5.925 0 0 1 5.92-5.919 5.926 5.926 0 0 1 5.92 5.92 5.926 5.926 0 0 1-5.92 5.918Zm9.385-5.862a.754.754 0 0 0 .532-.305.655.655 0 0 0 .112-.53l-.61-2.758a.656.656 0 0 0-.327-.432.746.746 0 0 0-.61-.05l-2.295.786c-.158-.3-.339-.586-.537-.86l1.73-1.705a.755.755 0 0 0 .227-.572.655.655 0 0 0-.242-.483L21.61 5.596a.65.65 0 0 0-.524-.136.753.753 0 0 0-.51.34L19.27 7.845a6.993 6.993 0 0 0-1.017-.357l.273-2.41a.756.756 0 0 0-.182-.586.654.654 0 0 0-.493-.224h-2.824a.654.654 0 0 0-.492.224.752.752 0 0 0-.183.585l.273 2.411c-.349.094-.687.21-1.01.354l-1.304-2.04a.751.751 0 0 0-.512-.34.65.65 0 0 0-.523.135L9.082 7.373a.655.655 0 0 0-.242.483c-.011.211.071.42.226.572l1.727 1.7c-.199.274-.381.561-.541.863l-2.287-.785a.748.748 0 0 0-.611.051.657.657 0 0 0-.327.432l-.61 2.759a.65.65 0 0 0 .112.529c.123.17.318.281.533.305l2.407.255c.013.28.04.554.085.824l-2.304.748a.747.747 0 0 0-.457.41.65.65 0 0 0 0 .54l1.169 2.571c.077.17.227.299.41.356a.754.754 0 0 0 .606-.078l2.074-1.24c.234.283.493.54.767.784l-3.375 5.905 3.83-.958.996 2.987 3.047-5.338 3.046 5.338.998-2.987 3.83.958-3.293-5.76c.338-.28.65-.592.93-.931l2.078 1.241a.752.752 0 0 0 .607.08.666.666 0 0 0 .41-.357l1.17-2.572a.65.65 0 0 0 0-.538.75.75 0 0 0-.459-.411l-2.309-.75a7.17 7.17 0 0 0 .084-.821l2.415-.256Z' clip-rule='evenodd'/%3E%3C/svg%3E");
722
+ }
723
+ }
724
+
725
+ &__rule {
726
+ &::after {
727
+ @include icon-mask-base;
728
+
729
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M15.467 8.533v7.574a2.666 2.666 0 0 0 0 5.226v2.134h1.067V21.28a2.666 2.666 0 0 0 0-5.227v-7.52h-1.067Zm-4.265 14.934v-6.454a2.666 2.666 0 0 0 0-5.226V9.6h-1.067v2.24a2.666 2.666 0 0 0 0 5.227v6.4h1.067ZM9.069 14.4a1.6 1.6 0 1 1 3.2 0 1.6 1.6 0 0 1-3.2 0Zm12.263-1.6a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2Zm-.534 10.667h1.067v-6.454a2.666 2.666 0 0 0 0-5.226V9.6h-1.067v2.24a2.666 2.666 0 0 0 0 5.227v6.4ZM16 20.267a1.6 1.6 0 1 0 0-3.2 1.6 1.6 0 0 0 0 3.2Z' clip-rule='evenodd'/%3E%3C/svg%3E");
730
+ }
731
+ }
732
+
733
+ &__search {
734
+ &::after {
735
+ @include icon-mask-base;
736
+
737
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='m19.114 18.485 3.083 3.2a.917.917 0 0 1 0 1.227.981.981 0 0 1-1.366 0l-3.2-3.2a5.472 5.472 0 0 1-2.634.683 5.397 5.397 0 1 1 5.397-5.333 5.227 5.227 0 0 1-1.28 3.423Zm-5.473-6.65a3.488 3.488 0 0 0-2.11 3.27 3.467 3.467 0 0 0 3.476 3.423 3.488 3.488 0 1 0-1.366-6.693Z' clip-rule='evenodd'/%3E%3C/svg%3E");
738
+ }
739
+ }
740
+
741
+ &__seats {
742
+ &::after {
743
+ @include icon-mask-base;
744
+
745
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.666 8.067c-.882 0-1.6.717-1.6 1.599s.718 1.6 1.6 1.6c.881 0 1.6-.717 1.6-1.6 0-.881-.717-1.6-1.6-1.6Zm.002 4.267a2.67 2.67 0 0 1-2.666-2.667A2.67 2.67 0 0 1 9.67 7a2.67 2.67 0 0 1 2.666 2.668 2.67 2.67 0 0 1-2.667 2.666ZM9.667 14.468a1.601 1.601 0 0 0 0 3.2c.882 0 1.6-.718 1.6-1.6 0-.882-.717-1.6-1.6-1.6Zm0 4.266A2.671 2.671 0 0 1 7 16.067 2.669 2.669 0 0 1 9.668 13.4a2.67 2.67 0 0 1 2.666 2.668 2.67 2.67 0 0 1-2.667 2.666ZM9.666 25.134a2.668 2.668 0 0 1-1.885-4.553 2.65 2.65 0 0 1 1.884-.78h.002a2.669 2.669 0 0 1 2.666 2.667 2.671 2.671 0 0 1-2.667 2.666ZM16.069 8.069c-.883 0-1.6.717-1.6 1.6a1.6 1.6 0 0 0 1.598 1.599h.002a1.594 1.594 0 0 0 1.6-1.6c0-.881-.718-1.6-1.6-1.6Zm0 4.266h-.001a2.67 2.67 0 0 1-2.666-2.666A2.67 2.67 0 0 1 16.07 7a2.671 2.671 0 0 1 2.666 2.668 2.65 2.65 0 0 1-.78 1.886 2.65 2.65 0 0 1-1.886.78ZM16.067 18.735a2.671 2.671 0 0 1-2.666-2.667 2.67 2.67 0 0 1 2.667-2.667 2.67 2.67 0 0 1 2.667 2.668 2.67 2.67 0 0 1-2.668 2.666M16.066 25.136a2.668 2.668 0 0 1-1.885-4.554 2.65 2.65 0 0 1 1.884-.78h.002a2.669 2.669 0 0 1 2.667 2.667 2.671 2.671 0 0 1-2.668 2.666ZM22.733 8.135c-.882 0-1.6.716-1.6 1.6a1.6 1.6 0 0 0 1.599 1.599c.428 0 .83-.167 1.133-.469a1.602 1.602 0 0 0-1.132-2.73Zm0 4.266h-.001a2.67 2.67 0 0 1-2.666-2.666 2.67 2.67 0 0 1 2.667-2.668A2.671 2.671 0 0 1 25.4 9.735a2.65 2.65 0 0 1-.781 1.886 2.65 2.65 0 0 1-1.886.78ZM22.732 18.737a2.671 2.671 0 0 1-2.666-2.668 2.669 2.669 0 0 1 2.667-2.667A2.671 2.671 0 0 1 25.4 16.07a2.67 2.67 0 0 1-2.668 2.667M22.732 25.137a2.668 2.668 0 0 1-1.885-4.554 2.65 2.65 0 0 1 1.884-.78h.002A2.669 2.669 0 0 1 25.4 22.47a2.671 2.671 0 0 1-2.668 2.667Z'/%3E%3C/svg%3E");
746
+ }
747
+ }
748
+
749
+ &__settings {
750
+ &::after {
751
+ @include icon-mask-base;
752
+
753
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M23.819 16.768v-1.344a1.067 1.067 0 0 0-.864-1.067l-1.259-.181a6.1 6.1 0 0 0-.352-.864l.758-1.013c.32-.425.28-1.021-.096-1.398l-.95-.949a1.067 1.067 0 0 0-1.397-.107l-1.067.768a5.509 5.509 0 0 0-.853-.352l-.181-1.258a1.067 1.067 0 0 0-1.067-.918h-1.344a1.067 1.067 0 0 0-1.067.918L13.9 10.26c-.294.094-.58.211-.853.352l-1.067-.768a1.067 1.067 0 0 0-1.397.107l-.95.95a1.067 1.067 0 0 0-.096 1.397l.758 1.013c-.14.279-.257.567-.352.864l-1.259.181c-.53.075-.923.532-.917 1.067v1.344c-.006.535.387.992.917 1.067l1.259.181c.095.293.213.578.352.853l-.758 1.067a1.067 1.067 0 0 0 .096 1.387l.95.96c.376.376.973.417 1.397.096l1.067-.768c.271.149.557.27.853.362l.181 1.259c.075.53.532.923 1.067.917h1.29c.536.006.992-.387 1.067-.917l.182-1.259c.296-.092.581-.213.853-.362l1.067.768c.424.32 1.02.28 1.397-.096l.95-.96c.37-.375.41-.965.095-1.387l-.757-1.067c.14-.275.257-.56.352-.853l1.259-.181c.53-.075.922-.532.917-1.067Zm-7.2 4.181-.267 1.867h-.981l-.267-1.867-.757-.245a5.093 5.093 0 0 1-.672-.288l-.715-.352-1.504 1.13-.693-.693 1.13-1.514-.362-.704a5.236 5.236 0 0 1-.277-.672l-.246-.758-1.866-.266v-.982l1.866-.266.246-.758c.074-.23.167-.456.277-.672l.363-.714-1.131-1.504.693-.694 1.504 1.131.715-.363c.215-.113.44-.206.672-.277l.757-.245.267-1.867h.981l.267 1.867.757.245c.233.07.458.162.672.277l.715.363 1.504-1.13.693.693-1.13 1.504.362.714c.11.216.204.441.278.672l.245.758 1.867.266v.982l-1.867.266-.245.758a5.25 5.25 0 0 1-.278.672l-.362.704 1.13 1.514-.693.694-1.504-1.131-.715.352c-.216.114-.44.21-.672.288l-.757.245Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M13.152 16.096a2.667 2.667 0 1 1 5.334 0 2.667 2.667 0 0 1-5.334 0Zm4 0a1.333 1.333 0 1 0-2.667 0 1.333 1.333 0 0 0 2.667 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
754
+ }
755
+ }
756
+
757
+ &__shopping-cart {
758
+ &::after {
759
+ @include icon-mask-base;
760
+
761
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M22.524 9.674a1 1 0 0 1 .868 1.117L22.216 20.2H9.784l-1.027-8.194a.387.387 0 0 0-.384-.34h-3.04a1 1 0 1 1 0-2h3.04a2.387 2.387 0 0 1 2.368 2.093l.808 6.441h8.901l.957-7.657a1 1 0 0 1 1.117-.869ZM11.733 25.6a2.133 2.133 0 1 0 0-4.267 2.133 2.133 0 0 0 0 4.267ZM20.267 25.6a2.133 2.133 0 1 0 0-4.267 2.133 2.133 0 0 0 0 4.267Z'/%3E%3Cpath fill-rule='evenodd' d='M22.4 12.233H9.6v-1h12.8v1ZM21.334 15.967H10.667v-1h10.667v1Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M13.366 18.667v-6.934h1v6.934h-1ZM17.634 18.667v-6.934h1v6.934h-1Z' clip-rule='evenodd'/%3E%3C/svg%3E");
762
+ }
763
+ }
764
+
765
+ &__sorter {
766
+ &::after {
767
+ @include icon-mask-base;
768
+
769
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M16.146 10.646a.5.5 0 0 1 .708 0l4.5 4.5a.5.5 0 0 1-.708.708L17 12.207V20.5a.5.5 0 0 1-1 0v-8.293l-3.646 3.647a.5.5 0 0 1-.708-.708l4.5-4.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
770
+ }
771
+ }
772
+
773
+ &__star {
774
+ &::after {
775
+ @include icon-mask-base;
776
+
777
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='m16.811 8.83 2.121 4.298 4.745.69a.533.533 0 0 1 .294.91l-3.432 3.345.81 4.724a.533.533 0 0 1-.773.562l-4.242-2.23-4.244 2.23a.532.532 0 0 1-.772-.562l.809-4.724-3.43-3.346a.533.533 0 0 1 .294-.91l4.743-.689 2.122-4.297a.532.532 0 0 1 .955 0' clip-rule='evenodd'/%3E%3C/svg%3E");
778
+ }
779
+ }
780
+
781
+ &__switch {
782
+ &::after {
783
+ @include icon-mask-base;
784
+
785
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M17.597 14.933a.528.528 0 0 0-.533.534v2.666h-6.71l2.294-2.293a.528.528 0 0 0 0-.757.528.528 0 0 0-.758 0l-3.2 3.2a.481.481 0 0 0-.117.181.533.533 0 0 0 0 .405.38.38 0 0 0 .118.171l3.2 3.2a.5.5 0 0 0 .373.16.5.5 0 0 0 .373-.16.528.528 0 0 0 0-.757L10.354 19.2h7.243a.528.528 0 0 0 .534-.533v-3.2a.528.528 0 0 0-.534-.534Z'/%3E%3Cpath d='M24.488 12.47a.534.534 0 0 0 0-.406.488.488 0 0 0-.117-.17l-3.2-3.2a.528.528 0 0 0-.758 0 .528.528 0 0 0 0 .757l2.294 2.282h-7.243a.528.528 0 0 0-.533.534v3.2c0 .298.234.533.533.533a.528.528 0 0 0 .533-.533V12.8h6.71l-2.294 2.293a.528.528 0 0 0 0 .758c.107.096.246.149.384.149a.5.5 0 0 0 .374-.16l3.2-3.2a.38.38 0 0 0 .117-.17Z'/%3E%3C/svg%3E");
786
+ }
787
+ }
788
+
789
+ &__three-dots {
790
+ &::after {
791
+ @include icon-mask-base;
792
+
793
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill-rule='evenodd' d='M8.96 16a3.2 3.2 0 1 1-6.4 0 3.2 3.2 0 0 1 6.4 0ZM16 12.8a3.2 3.2 0 1 0 0 6.4 3.2 3.2 0 0 0 0-6.4Zm7.04 3.2a3.2 3.2 0 1 1 6.4 0 3.2 3.2 0 0 1-6.4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
794
+ }
795
+ }
796
+
797
+ &__waiting-approval {
798
+ &::after {
799
+ @include icon-mask-base;
800
+
801
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill-rule='evenodd' clip-path='url(%23a)' clip-rule='evenodd'%3E%3Cpath d='m10.896 16 3.904-2.848V9.6h1.067V8.533H4.134V9.6H5.2v3.552L9.094 16 5.2 18.848V22.4H4.134v1.067h11.733V22.4H14.8v-3.552L10.896 16Zm-4.628-3.392L10 15.338l3.733-2.73V9.6H6.268v3.008Zm7.466 9.792v-3.008l-3.733-2.73-3.733 2.73V22.4h7.466Zm-6.4-10.336v-.33h5.333v.33l-2.666 1.952-2.667-1.952Zm5.333 8.203H7.334v1.066h5.333v-1.066ZM26.573 11.18a1 1 0 0 1 .247 1.393l-5.713 8.181a1 1 0 0 1-1.564.095l-3.287-3.665a1 1 0 0 1 1.488-1.335l2.445 2.726 4.991-7.147a1 1 0 0 1 1.393-.248Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h32v32H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
802
+ }
803
+ }
804
+
805
+ &__waiting-decline {
806
+ &::after {
807
+ @include icon-mask-base;
808
+
809
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill-rule='evenodd' clip-path='url(%23a)' clip-rule='evenodd'%3E%3Cpath d='m10.896 16 3.904-2.848V9.6h1.067V8.533H4.134V9.6H5.2v3.552L9.094 16 5.2 18.848V22.4H4.134v1.067h11.733V22.4H14.8v-3.552L10.896 16Zm-4.628-3.392L10 15.338l3.733-2.73V9.6H6.268v3.008Zm7.466 9.792v-3.008l-3.733-2.73-3.733 2.73V22.4h7.466Zm-6.4-10.336v-.33h5.333v.33l-2.666 1.952-2.667-1.952Zm5.333 8.203H7.334v1.066h5.333v-1.066ZM17.293 11.293a1 1 0 0 1 1.414 0l3.793 3.793 3.793-3.793a1 1 0 0 1 1.414 1.414L23.914 16.5l3.793 3.793a1 1 0 0 1-1.414 1.414L22.5 17.914l-3.793 3.793a1 1 0 0 1-1.414-1.414l3.793-3.793-3.793-3.793a1 1 0 0 1 0-1.414Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h32v32H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
810
+ }
811
+ }
812
+
813
+ &__zoom-in {
814
+ &::after {
815
+ @include icon-mask-base;
816
+
817
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M15.5 23a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17Zm0 2C21.299 25 26 20.299 26 14.5S21.299 4 15.5 4 5 8.701 5 14.5 9.701 25 15.5 25Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M21.293 21.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414Z' clip-rule='evenodd'/%3E%3Cpath d='M15 8h1v13h-1z'/%3E%3Cpath d='M9 14h13v1H9z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h32v32H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
818
+ }
819
+ }
820
+
821
+ &__zoom-out {
822
+ &::after {
823
+ @include icon-mask-base;
824
+
825
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill-rule='evenodd' d='M15.5 23a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17Zm0 2C21.299 25 26 20.299 26 14.5S21.299 4 15.5 4 5 8.701 5 14.5 9.701 25 15.5 25Z' clip-rule='evenodd'/%3E%3Cpath fill-rule='evenodd' d='M21.293 21.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414Z' clip-rule='evenodd'/%3E%3Cpath d='M9 14h12v1H9z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h32v32H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
236
826
  }
237
827
  }
238
828
  }