@limetech/lime-elements 35.0.0-next.13 → 35.0.0-next.17

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 (133) hide show
  1. package/dist/cjs/{component-f7ef9087.js → component-66df95e7.js} +190 -132
  2. package/dist/cjs/{component-f532119f.js → component-67144c1c.js} +47 -3
  3. package/dist/cjs/{component-ed21410d.js → component-ae3bfacf.js} +367 -235
  4. package/dist/cjs/{component-2faaa141.js → component-cf490570.js} +213 -143
  5. package/dist/cjs/{component-10dbdd60.js → component-dd795ff0.js} +7 -5
  6. package/dist/cjs/limel-badge.cjs.entry.js +1 -1
  7. package/dist/cjs/limel-button-group.cjs.entry.js +1 -1
  8. package/dist/cjs/limel-button.cjs.entry.js +1 -1
  9. package/dist/cjs/limel-checkbox.cjs.entry.js +129 -84
  10. package/dist/cjs/limel-chip-set.cjs.entry.js +233 -189
  11. package/dist/cjs/limel-circular-progress.cjs.entry.js +1 -1
  12. package/dist/cjs/limel-date-picker.cjs.entry.js +4 -4
  13. package/dist/cjs/limel-dialog.cjs.entry.js +7 -8
  14. package/dist/cjs/limel-file.cjs.entry.js +4 -4
  15. package/dist/cjs/limel-flex-container.cjs.entry.js +4 -0
  16. package/dist/cjs/limel-form.cjs.entry.js +1 -1
  17. package/dist/cjs/limel-icon-button.cjs.entry.js +4 -4
  18. package/dist/cjs/limel-input-field.cjs.entry.js +5 -5
  19. package/dist/cjs/limel-linear-progress.cjs.entry.js +2 -2
  20. package/dist/cjs/limel-list_3.cjs.entry.js +5 -5
  21. package/dist/cjs/limel-menu-list.cjs.entry.js +84 -68
  22. package/dist/cjs/limel-popover-surface.cjs.entry.js +1 -1
  23. package/dist/cjs/limel-select.cjs.entry.js +3 -3
  24. package/dist/cjs/limel-slider.cjs.entry.js +32 -5
  25. package/dist/cjs/limel-snackbar.cjs.entry.js +77 -71
  26. package/dist/cjs/limel-switch.cjs.entry.js +496 -200
  27. package/dist/cjs/limel-tab-bar.cjs.entry.js +261 -184
  28. package/dist/cjs/limel-table.cjs.entry.js +1 -1
  29. package/dist/collection/components/badge/badge.css +1 -0
  30. package/dist/collection/components/button/button.css +333 -145
  31. package/dist/collection/components/button-group/button-group.css +30 -5
  32. package/dist/collection/components/checkbox/checkbox.css +45 -13
  33. package/dist/collection/components/chip-set/chip-set.css +366 -33
  34. package/dist/collection/components/circular-progress/circular-progress.css +2 -2
  35. package/dist/collection/components/dialog/dialog.css +153 -109
  36. package/dist/collection/components/flex-container/flex-container.js +10 -0
  37. package/dist/collection/components/form/form.css +3 -1
  38. package/dist/collection/components/icon-button/icon-button.css +116 -59
  39. package/dist/collection/components/icon-button/icon-button.js +1 -0
  40. package/dist/collection/components/input-field/input-field.css +337 -29
  41. package/dist/collection/components/linear-progress/linear-progress.css +14 -2
  42. package/dist/collection/components/list/list.css +911 -86
  43. package/dist/collection/components/menu-list/menu-list.css +911 -86
  44. package/dist/collection/components/menu-surface/menu-surface.css +32 -7
  45. package/dist/collection/components/popover-surface/popover-surface.css +1 -0
  46. package/dist/collection/components/select/select.css +424 -17
  47. package/dist/collection/components/slider/slider.css +49 -2
  48. package/dist/collection/components/snackbar/snackbar.css +588 -301
  49. package/dist/collection/components/switch/switch.css +592 -222
  50. package/dist/collection/components/switch/switch.js +18 -12
  51. package/dist/collection/components/tab-bar/tab-bar.css +63 -36
  52. package/dist/collection/components/table/table.css +10 -4
  53. package/dist/collection/style/functions.scss +3 -1
  54. package/dist/esm/{component-89e0ce26.js → component-19eb6e2b.js} +7 -5
  55. package/dist/esm/{component-2630c3d7.js → component-288691f3.js} +367 -235
  56. package/dist/esm/{component-d682c974.js → component-410aad5a.js} +44 -4
  57. package/dist/esm/{component-429e92ee.js → component-5b4ac85a.js} +213 -143
  58. package/dist/esm/{component-834d85a1.js → component-fffa3419.js} +190 -132
  59. package/dist/esm/limel-badge.entry.js +1 -1
  60. package/dist/esm/limel-button-group.entry.js +1 -1
  61. package/dist/esm/limel-button.entry.js +1 -1
  62. package/dist/esm/limel-checkbox.entry.js +129 -84
  63. package/dist/esm/limel-chip-set.entry.js +233 -189
  64. package/dist/esm/limel-circular-progress.entry.js +1 -1
  65. package/dist/esm/limel-date-picker.entry.js +4 -4
  66. package/dist/esm/limel-dialog.entry.js +7 -8
  67. package/dist/esm/limel-file.entry.js +4 -4
  68. package/dist/esm/limel-flex-container.entry.js +4 -0
  69. package/dist/esm/limel-form.entry.js +1 -1
  70. package/dist/esm/limel-icon-button.entry.js +4 -4
  71. package/dist/esm/limel-input-field.entry.js +5 -5
  72. package/dist/esm/limel-linear-progress.entry.js +2 -2
  73. package/dist/esm/limel-list_3.entry.js +5 -5
  74. package/dist/esm/limel-menu-list.entry.js +84 -68
  75. package/dist/esm/limel-popover-surface.entry.js +1 -1
  76. package/dist/esm/limel-select.entry.js +3 -3
  77. package/dist/esm/limel-slider.entry.js +32 -5
  78. package/dist/esm/limel-snackbar.entry.js +77 -71
  79. package/dist/esm/limel-switch.entry.js +496 -200
  80. package/dist/esm/limel-tab-bar.entry.js +261 -184
  81. package/dist/esm/limel-table.entry.js +1 -1
  82. package/dist/lime-elements/lime-elements.esm.js +1 -1
  83. package/dist/lime-elements/p-09593e7a.entry.js +1 -0
  84. package/dist/lime-elements/p-0b43d0dd.entry.js +1 -0
  85. package/dist/lime-elements/p-0f5cbdea.entry.js +1 -0
  86. package/dist/lime-elements/p-1c284626.js +73 -0
  87. package/dist/lime-elements/{p-8ad5e143.entry.js → p-22f5ab58.entry.js} +1 -1
  88. package/dist/lime-elements/p-3084b02c.entry.js +73 -0
  89. package/dist/lime-elements/p-433f8f64.entry.js +82 -0
  90. package/dist/lime-elements/{p-076bd4dc.js → p-48d4ef20.js} +3 -3
  91. package/dist/lime-elements/p-4e486308.entry.js +82 -0
  92. package/dist/lime-elements/p-4f1528ab.entry.js +59 -0
  93. package/dist/lime-elements/{p-3dc1ddbe.entry.js → p-552a5f2c.entry.js} +1 -1
  94. package/dist/lime-elements/{p-e275f502.entry.js → p-57892079.entry.js} +3 -3
  95. package/dist/lime-elements/p-6d6f1f8d.entry.js +82 -0
  96. package/dist/lime-elements/{p-041ae00c.entry.js → p-783e6e99.entry.js} +1 -1
  97. package/dist/lime-elements/p-7c89ad03.entry.js +1 -0
  98. package/dist/lime-elements/p-96697356.entry.js +126 -0
  99. package/dist/lime-elements/{p-8590a1b7.entry.js → p-b4a7d61f.entry.js} +1 -1
  100. package/dist/lime-elements/p-bcaa52f7.entry.js +1 -0
  101. package/dist/lime-elements/{p-268cf1fa.entry.js → p-bf4ee462.entry.js} +1 -1
  102. package/dist/lime-elements/p-c15adec9.entry.js +37 -0
  103. package/dist/lime-elements/p-cbc43682.js +81 -0
  104. package/dist/lime-elements/{p-ace9affc.js → p-d0a7de87.js} +2 -2
  105. package/dist/lime-elements/p-dfba92de.js +126 -0
  106. package/dist/lime-elements/p-e587e8f6.entry.js +1 -0
  107. package/dist/lime-elements/p-e632aab7.entry.js +1 -0
  108. package/dist/lime-elements/p-ec5e5f63.entry.js +131 -0
  109. package/dist/lime-elements/{p-34c7872e.entry.js → p-f15ab9f4.entry.js} +1 -1
  110. package/dist/lime-elements/p-ff5b1f0f.entry.js +59 -0
  111. package/dist/lime-elements/style/functions.scss +3 -1
  112. package/dist/types/components/flex-container/flex-container.d.ts +7 -0
  113. package/dist/types/components/switch/switch.d.ts +2 -2
  114. package/package.json +3 -3
  115. package/dist/lime-elements/p-0fd208f3.entry.js +0 -82
  116. package/dist/lime-elements/p-143705b1.entry.js +0 -1
  117. package/dist/lime-elements/p-169fd2eb.entry.js +0 -131
  118. package/dist/lime-elements/p-24d97176.entry.js +0 -1
  119. package/dist/lime-elements/p-4932c029.entry.js +0 -1
  120. package/dist/lime-elements/p-510bb5a4.entry.js +0 -1
  121. package/dist/lime-elements/p-51aa6433.entry.js +0 -126
  122. package/dist/lime-elements/p-668795a7.js +0 -73
  123. package/dist/lime-elements/p-67a10143.entry.js +0 -37
  124. package/dist/lime-elements/p-7476efe0.entry.js +0 -1
  125. package/dist/lime-elements/p-84689828.entry.js +0 -73
  126. package/dist/lime-elements/p-902347b9.js +0 -81
  127. package/dist/lime-elements/p-90c6fa15.js +0 -126
  128. package/dist/lime-elements/p-90f3e17c.entry.js +0 -37
  129. package/dist/lime-elements/p-c35874db.entry.js +0 -1
  130. package/dist/lime-elements/p-c8c8a946.entry.js +0 -59
  131. package/dist/lime-elements/p-ca664c9f.entry.js +0 -1
  132. package/dist/lime-elements/p-d8167c28.entry.js +0 -82
  133. package/dist/lime-elements/p-df8faeb4.entry.js +0 -59
package/dist/collection/components/button/button.css CHANGED
@@ -78,29 +78,6 @@
78
78
  }
79
79
 
80
80
  .mdc-button {
81
- -moz-osx-font-smoothing: grayscale;
82
- -webkit-font-smoothing: antialiased;
83
- font-family: Roboto, sans-serif;
84
- /* @alternate */
85
- font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
86
- font-size: 0.875rem;
87
- /* @alternate */
88
- font-size: var(--mdc-typography-button-font-size, 0.875rem);
89
- line-height: 2.25rem;
90
- /* @alternate */
91
- line-height: var(--mdc-typography-button-line-height, 2.25rem);
92
- font-weight: 500;
93
- /* @alternate */
94
- font-weight: var(--mdc-typography-button-font-weight, 500);
95
- letter-spacing: 0.0892857143em;
96
- /* @alternate */
97
- letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em);
98
- text-decoration: none;
99
- /* @alternate */
100
- text-decoration: var(--mdc-typography-button-text-decoration, none);
101
- text-transform: none;
102
- /* @alternate */
103
- text-transform: var(--mdc-typography-button-text-transform, none);
104
81
  /* @alternate */
105
82
  position: relative;
106
83
  display: inline-flex;
@@ -116,12 +93,14 @@
116
93
  -webkit-appearance: none;
117
94
  overflow: visible;
118
95
  vertical-align: middle;
96
+ background: transparent;
119
97
  }
120
98
  .mdc-button .mdc-elevation-overlay {
121
99
  width: 100%;
122
100
  height: 100%;
123
101
  top: 0;
124
102
  /* @noflip */
103
+ /*rtl:ignore*/
125
104
  left: 0;
126
105
  }
127
106
  .mdc-button::-moz-focus-inner {
@@ -140,87 +119,110 @@
140
119
  }
141
120
  .mdc-button .mdc-button__icon {
142
121
  /* @noflip */
122
+ /*rtl:ignore*/
143
123
  margin-left: 0;
144
124
  /* @noflip */
125
+ /*rtl:ignore*/
145
126
  margin-right: 8px;
146
127
  display: inline-block;
147
- font-size: 1.125rem;
148
- height: 1.125rem;
128
+ position: relative;
149
129
  vertical-align: top;
150
- width: 1.125rem;
151
130
  }
152
131
  [dir=rtl] .mdc-button .mdc-button__icon, .mdc-button .mdc-button__icon[dir=rtl] {
132
+ /*rtl:begin:ignore*/
153
133
  /* @noflip */
134
+ /*rtl:ignore*/
154
135
  margin-left: 8px;
155
136
  /* @noflip */
137
+ /*rtl:ignore*/
156
138
  margin-right: 0;
139
+ /*rtl:end:ignore*/
140
+ }
141
+
142
+ .mdc-button .mdc-button__label {
143
+ position: relative;
157
144
  }
158
145
  .mdc-button .mdc-button__touch {
159
146
  position: absolute;
160
147
  top: 50%;
161
- right: 0;
162
148
  height: 48px;
163
149
  left: 0;
150
+ right: 0;
164
151
  transform: translateY(-50%);
165
152
  }
166
153
 
167
154
  .mdc-button__label + .mdc-button__icon {
168
155
  /* @noflip */
156
+ /*rtl:ignore*/
169
157
  margin-left: 8px;
170
158
  /* @noflip */
159
+ /*rtl:ignore*/
171
160
  margin-right: 0;
172
161
  }
173
162
  [dir=rtl] .mdc-button__label + .mdc-button__icon, .mdc-button__label + .mdc-button__icon[dir=rtl] {
163
+ /*rtl:begin:ignore*/
174
164
  /* @noflip */
165
+ /*rtl:ignore*/
175
166
  margin-left: 0;
176
167
  /* @noflip */
168
+ /*rtl:ignore*/
177
169
  margin-right: 8px;
170
+ /*rtl:end:ignore*/
178
171
  }
179
172
 
180
173
  svg.mdc-button__icon {
181
174
  fill: currentColor;
182
175
  }
183
176
 
184
- .mdc-button--raised .mdc-button__icon,
185
- .mdc-button--unelevated .mdc-button__icon,
186
- .mdc-button--outlined .mdc-button__icon {
187
- /* @noflip */
188
- margin-left: -4px;
189
- /* @noflip */
190
- margin-right: 8px;
177
+ .mdc-button--touch {
178
+ margin-top: 6px;
179
+ margin-bottom: 6px;
191
180
  }
192
- [dir=rtl] .mdc-button--raised .mdc-button__icon, .mdc-button--raised .mdc-button__icon[dir=rtl],
193
- [dir=rtl] .mdc-button--unelevated .mdc-button__icon,
194
- .mdc-button--unelevated .mdc-button__icon[dir=rtl],
195
- [dir=rtl] .mdc-button--outlined .mdc-button__icon,
196
- .mdc-button--outlined .mdc-button__icon[dir=rtl] {
197
- /* @noflip */
198
- margin-left: 8px;
199
- /* @noflip */
200
- margin-right: -4px;
181
+
182
+ .mdc-button {
183
+ -moz-osx-font-smoothing: grayscale;
184
+ -webkit-font-smoothing: antialiased;
185
+ font-family: Roboto, sans-serif;
186
+ /* @alternate */
187
+ font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
188
+ text-decoration: none;
189
+ /* @alternate */
190
+ text-decoration: var(--mdc-typography-button-text-decoration, none);
201
191
  }
202
- .mdc-button--raised .mdc-button__label + .mdc-button__icon,
203
- .mdc-button--unelevated .mdc-button__label + .mdc-button__icon,
204
- .mdc-button--outlined .mdc-button__label + .mdc-button__icon {
205
- /* @noflip */
206
- margin-left: 8px;
207
- /* @noflip */
208
- margin-right: -4px;
192
+
193
+ .mdc-button {
194
+ padding: 0 8px 0 8px;
209
195
  }
210
- [dir=rtl] .mdc-button--raised .mdc-button__label + .mdc-button__icon, .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl],
211
- [dir=rtl] .mdc-button--unelevated .mdc-button__label + .mdc-button__icon,
212
- .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl],
213
- [dir=rtl] .mdc-button--outlined .mdc-button__label + .mdc-button__icon,
214
- .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] {
215
- /* @noflip */
216
- margin-left: -4px;
217
- /* @noflip */
218
- margin-right: 8px;
196
+
197
+ .mdc-button--unelevated {
198
+ transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
199
+ padding: 0 16px 0 16px;
200
+ }
201
+ .mdc-button--unelevated.mdc-button--icon-trailing {
202
+ padding: 0 12px 0 16px;
203
+ }
204
+ .mdc-button--unelevated.mdc-button--icon-leading {
205
+ padding: 0 16px 0 12px;
219
206
  }
220
207
 
221
- .mdc-button--touch {
222
- margin-top: 6px;
223
- margin-bottom: 6px;
208
+ .mdc-button--raised {
209
+ transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
210
+ padding: 0 16px 0 16px;
211
+ }
212
+ .mdc-button--raised.mdc-button--icon-trailing {
213
+ padding: 0 12px 0 16px;
214
+ }
215
+ .mdc-button--raised.mdc-button--icon-leading {
216
+ padding: 0 16px 0 12px;
217
+ }
218
+
219
+ .mdc-button--outlined {
220
+ border-style: solid;
221
+ transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1);
222
+ }
223
+ .mdc-button--outlined .mdc-button__ripple {
224
+ border-style: solid;
225
+ border-color: transparent;
224
226
  }
225
227
 
226
228
  @keyframes mdc-ripple-fg-radius-in {
@@ -285,6 +287,7 @@ svg.mdc-button__icon {
285
287
  .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after {
286
288
  top: 0;
287
289
  /* @noflip */
290
+ /*rtl:ignore*/
288
291
  left: 0;
289
292
  transform: scale(0);
290
293
  transform-origin: center center;
@@ -292,6 +295,7 @@ svg.mdc-button__icon {
292
295
  .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after {
293
296
  top: var(--mdc-ripple-top, 0);
294
297
  /* @noflip */
298
+ /*rtl:ignore*/
295
299
  left: var(--mdc-ripple-left, 0);
296
300
  }
297
301
  .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after {
@@ -305,6 +309,7 @@ svg.mdc-button__icon {
305
309
  .mdc-button .mdc-button__ripple::after {
306
310
  top: calc(50% - 100%);
307
311
  /* @noflip */
312
+ /*rtl:ignore*/
308
313
  left: calc(50% - 100%);
309
314
  width: 200%;
310
315
  height: 200%;
@@ -319,127 +324,162 @@ svg.mdc-button__icon {
319
324
  width: 100%;
320
325
  height: 100%;
321
326
  overflow: hidden;
327
+ z-index: 0;
322
328
  }
323
329
  .mdc-button:not(.mdc-button--outlined) .mdc-button__ripple {
324
330
  top: 0;
325
331
  left: 0;
326
332
  }
327
333
 
328
- .mdc-button--raised {
334
+ .mdc-button {
335
+ font-family: Roboto, sans-serif;
329
336
  /* @alternate */
330
- box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
331
- transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
332
- }
333
- .mdc-button--raised:hover, .mdc-button--raised:focus {
337
+ font-family: var(--mdc-text-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));
338
+ font-size: 0.875rem;
334
339
  /* @alternate */
335
- box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
336
- }
337
- .mdc-button--raised:active {
340
+ font-size: var(--mdc-text-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));
341
+ letter-spacing: 0.0892857143em;
338
342
  /* @alternate */
339
- box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
340
- }
341
- .mdc-button--raised:disabled {
343
+ letter-spacing: var(--mdc-text-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));
344
+ font-weight: 500;
342
345
  /* @alternate */
343
- box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
344
- }
345
-
346
- .mdc-button--outlined {
347
- border-style: solid;
348
- }
349
-
350
- .mdc-button {
346
+ font-weight: var(--mdc-text-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));
347
+ text-transform: none;
348
+ /* @alternate */
349
+ text-transform: var(--mdc-text-button-label-text-transform, var(--mdc-typography-button-text-transform, none));
351
350
  height: 36px;
351
+ /* @alternate */
352
+ height: var(--mdc-text-button-container-height, 36px);
352
353
  border-radius: 4px;
353
354
  /* @alternate */
354
- border-radius: var(--mdc-shape-small, 4px);
355
- padding: 0 8px 0 8px;
356
- }
357
- .mdc-button:not(:disabled) {
358
- background-color: transparent;
359
- }
360
- .mdc-button:disabled {
361
- background-color: transparent;
355
+ border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px));
362
356
  }
363
357
  .mdc-button:not(:disabled) {
364
358
  color: #26a69a;
365
359
  /* @alternate */
366
- color: var(--mdc-theme-primary, #26a69a);
360
+ color: var(--mdc-text-button-label-text-color, var(--mdc-theme-primary, #26a69a));
367
361
  }
368
362
  .mdc-button:disabled {
369
363
  color: rgba(0, 0, 0, 0.38);
364
+ /* @alternate */
365
+ color: var(--mdc-text-button-disabled-label-text-color, rgba(0, 0, 0, 0.38));
370
366
  }
371
- .mdc-button .mdc-button__ripple::before, .mdc-button .mdc-button__ripple::after {
367
+ .mdc-button .mdc-button__icon {
368
+ font-size: 1.125rem;
369
+ /* @alternate */
370
+ font-size: var(--mdc-text-button-with-icon-icon-size, 1.125rem);
371
+ width: 1.125rem;
372
+ /* @alternate */
373
+ width: var(--mdc-text-button-with-icon-icon-size, 1.125rem);
374
+ height: 1.125rem;
375
+ /* @alternate */
376
+ height: var(--mdc-text-button-with-icon-icon-size, 1.125rem);
377
+ }
378
+ .mdc-button .mdc-button__ripple::before,
379
+ .mdc-button .mdc-button__ripple::after {
372
380
  background-color: #26a69a;
373
381
  /* @alternate */
374
- background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #26a69a));
382
+ background-color: var(--mdc-text-button-hover-state-layer-color, var(--mdc-theme-primary, #26a69a));
375
383
  }
376
384
  .mdc-button:hover .mdc-button__ripple::before, .mdc-button.mdc-ripple-surface--hover .mdc-button__ripple::before {
377
- opacity: 0.08;
385
+ opacity: 0.04;
378
386
  /* @alternate */
379
- opacity: var(--mdc-ripple-hover-opacity, 0.08);
387
+ opacity: var(--mdc-text-button-hover-state-layer-opacity, 0.04);
380
388
  }
381
389
  .mdc-button.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
382
390
  transition-duration: 75ms;
383
- opacity: 0.24;
391
+ opacity: 0.12;
384
392
  /* @alternate */
385
- opacity: var(--mdc-ripple-focus-opacity, 0.24);
393
+ opacity: var(--mdc-text-button-focus-state-layer-opacity, 0.12);
386
394
  }
387
395
  .mdc-button:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
388
396
  transition: opacity 150ms linear;
389
397
  }
390
398
  .mdc-button:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {
391
399
  transition-duration: 75ms;
392
- opacity: 0.24;
400
+ opacity: 0.12;
393
401
  /* @alternate */
394
- opacity: var(--mdc-ripple-press-opacity, 0.24);
402
+ opacity: var(--mdc-text-button-pressed-state-layer-opacity, 0.12);
395
403
  }
396
404
  .mdc-button.mdc-ripple-upgraded {
397
- --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
405
+ --mdc-ripple-fg-opacity: var(--mdc-text-button-pressed-state-layer-opacity, 0.12);
398
406
  }
399
407
  .mdc-button .mdc-button__ripple {
400
408
  border-radius: 4px;
401
409
  /* @alternate */
402
- border-radius: var(--mdc-shape-small, 4px);
410
+ border-radius: var(--mdc-text-button-container-shape, var(--mdc-shape-small, 4px));
403
411
  }
404
412
 
405
413
  .mdc-button--unelevated {
406
- padding: 0 16px 0 16px;
414
+ font-family: Roboto, sans-serif;
415
+ /* @alternate */
416
+ font-family: var(--mdc-filled-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));
417
+ font-size: 0.875rem;
418
+ /* @alternate */
419
+ font-size: var(--mdc-filled-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));
420
+ letter-spacing: 0.0892857143em;
421
+ /* @alternate */
422
+ letter-spacing: var(--mdc-filled-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));
423
+ font-weight: 500;
424
+ /* @alternate */
425
+ font-weight: var(--mdc-filled-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));
426
+ text-transform: none;
427
+ /* @alternate */
428
+ text-transform: var(--mdc-filled-button-label-text-transform, var(--mdc-typography-button-text-transform, none));
407
429
  height: 36px;
430
+ /* @alternate */
431
+ height: var(--mdc-filled-button-container-height, 36px);
408
432
  border-radius: 4px;
409
433
  /* @alternate */
410
- border-radius: var(--mdc-shape-small, 4px);
434
+ border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px));
411
435
  }
412
436
  .mdc-button--unelevated:not(:disabled) {
413
437
  background-color: #26a69a;
414
438
  /* @alternate */
415
- background-color: var(--mdc-theme-primary, #26a69a);
439
+ background-color: var(--mdc-filled-button-container-color, var(--mdc-theme-primary, #26a69a));
416
440
  }
417
441
  .mdc-button--unelevated:disabled {
418
442
  background-color: rgba(0, 0, 0, 0.12);
443
+ /* @alternate */
444
+ background-color: var(--mdc-filled-button-disabled-container-color, rgba(0, 0, 0, 0.12));
419
445
  }
420
446
  .mdc-button--unelevated:not(:disabled) {
421
447
  color: #fff;
422
448
  /* @alternate */
423
- color: var(--mdc-theme-on-primary, #fff);
449
+ color: var(--mdc-filled-button-label-text-color, var(--mdc-theme-on-primary, #fff));
424
450
  }
425
451
  .mdc-button--unelevated:disabled {
426
452
  color: rgba(0, 0, 0, 0.38);
453
+ /* @alternate */
454
+ color: var(--mdc-filled-button-disabled-label-text-color, rgba(0, 0, 0, 0.38));
455
+ }
456
+ .mdc-button--unelevated .mdc-button__icon {
457
+ font-size: 1.125rem;
458
+ /* @alternate */
459
+ font-size: var(--mdc-filled-button-with-icon-icon-size, 1.125rem);
460
+ width: 1.125rem;
461
+ /* @alternate */
462
+ width: var(--mdc-filled-button-with-icon-icon-size, 1.125rem);
463
+ height: 1.125rem;
464
+ /* @alternate */
465
+ height: var(--mdc-filled-button-with-icon-icon-size, 1.125rem);
427
466
  }
428
- .mdc-button--unelevated .mdc-button__ripple::before, .mdc-button--unelevated .mdc-button__ripple::after {
467
+ .mdc-button--unelevated .mdc-button__ripple::before,
468
+ .mdc-button--unelevated .mdc-button__ripple::after {
429
469
  background-color: #fff;
430
470
  /* @alternate */
431
- background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff));
471
+ background-color: var(--mdc-filled-button-hover-state-layer-color, var(--mdc-theme-on-primary, #fff));
432
472
  }
433
473
  .mdc-button--unelevated:hover .mdc-button__ripple::before, .mdc-button--unelevated.mdc-ripple-surface--hover .mdc-button__ripple::before {
434
474
  opacity: 0.08;
435
475
  /* @alternate */
436
- opacity: var(--mdc-ripple-hover-opacity, 0.08);
476
+ opacity: var(--mdc-filled-button-hover-state-layer-opacity, 0.08);
437
477
  }
438
478
  .mdc-button--unelevated.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--unelevated:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
439
479
  transition-duration: 75ms;
440
480
  opacity: 0.24;
441
481
  /* @alternate */
442
- opacity: var(--mdc-ripple-focus-opacity, 0.24);
482
+ opacity: var(--mdc-filled-button-focus-state-layer-opacity, 0.24);
443
483
  }
444
484
  .mdc-button--unelevated:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
445
485
  transition: opacity 150ms linear;
@@ -448,55 +488,91 @@ svg.mdc-button__icon {
448
488
  transition-duration: 75ms;
449
489
  opacity: 0.24;
450
490
  /* @alternate */
451
- opacity: var(--mdc-ripple-press-opacity, 0.24);
491
+ opacity: var(--mdc-filled-button-pressed-state-layer-opacity, 0.24);
452
492
  }
453
493
  .mdc-button--unelevated.mdc-ripple-upgraded {
454
- --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
494
+ --mdc-ripple-fg-opacity: var(--mdc-filled-button-pressed-state-layer-opacity, 0.24);
455
495
  }
456
496
  .mdc-button--unelevated .mdc-button__ripple {
457
497
  border-radius: 4px;
458
498
  /* @alternate */
459
- border-radius: var(--mdc-shape-small, 4px);
499
+ border-radius: var(--mdc-filled-button-container-shape, var(--mdc-shape-small, 4px));
460
500
  }
461
501
 
462
502
  .mdc-button--raised {
463
- padding: 0 16px 0 16px;
503
+ font-family: Roboto, sans-serif;
504
+ /* @alternate */
505
+ font-family: var(--mdc-protected-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));
506
+ font-size: 0.875rem;
507
+ /* @alternate */
508
+ font-size: var(--mdc-protected-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));
509
+ letter-spacing: 0.0892857143em;
510
+ /* @alternate */
511
+ letter-spacing: var(--mdc-protected-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));
512
+ font-weight: 500;
513
+ /* @alternate */
514
+ font-weight: var(--mdc-protected-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));
515
+ text-transform: none;
516
+ /* @alternate */
517
+ text-transform: var(--mdc-protected-button-label-text-transform, var(--mdc-typography-button-text-transform, none));
464
518
  height: 36px;
519
+ /* @alternate */
520
+ height: var(--mdc-protected-button-container-height, 36px);
465
521
  border-radius: 4px;
466
522
  /* @alternate */
467
- border-radius: var(--mdc-shape-small, 4px);
523
+ border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px));
524
+ box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
525
+ /* @alternate */
526
+ box-shadow: var(--mdc-protected-button-container-elevation, var(--mdc-elevation-box-shadow-for-gss));
527
+ --mdc-elevation-box-shadow-for-gss: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
468
528
  }
469
529
  .mdc-button--raised:not(:disabled) {
470
530
  background-color: #26a69a;
471
531
  /* @alternate */
472
- background-color: var(--mdc-theme-primary, #26a69a);
532
+ background-color: var(--mdc-protected-button-container-color, var(--mdc-theme-primary, #26a69a));
473
533
  }
474
534
  .mdc-button--raised:disabled {
475
535
  background-color: rgba(0, 0, 0, 0.12);
536
+ /* @alternate */
537
+ background-color: var(--mdc-protected-button-disabled-container-color, rgba(0, 0, 0, 0.12));
476
538
  }
477
539
  .mdc-button--raised:not(:disabled) {
478
540
  color: #fff;
479
541
  /* @alternate */
480
- color: var(--mdc-theme-on-primary, #fff);
542
+ color: var(--mdc-protected-button-label-text-color, var(--mdc-theme-on-primary, #fff));
481
543
  }
482
544
  .mdc-button--raised:disabled {
483
545
  color: rgba(0, 0, 0, 0.38);
546
+ /* @alternate */
547
+ color: var(--mdc-protected-button-disabled-label-text-color, rgba(0, 0, 0, 0.38));
484
548
  }
485
- .mdc-button--raised .mdc-button__ripple::before, .mdc-button--raised .mdc-button__ripple::after {
549
+ .mdc-button--raised .mdc-button__icon {
550
+ font-size: 1.125rem;
551
+ /* @alternate */
552
+ font-size: var(--mdc-protected-button-with-icon-icon-size, 1.125rem);
553
+ width: 1.125rem;
554
+ /* @alternate */
555
+ width: var(--mdc-protected-button-with-icon-icon-size, 1.125rem);
556
+ height: 1.125rem;
557
+ /* @alternate */
558
+ height: var(--mdc-protected-button-with-icon-icon-size, 1.125rem);
559
+ }
560
+ .mdc-button--raised .mdc-button__ripple::before,
561
+ .mdc-button--raised .mdc-button__ripple::after {
486
562
  background-color: #fff;
487
563
  /* @alternate */
488
- background-color: var(--mdc-ripple-color, var(--mdc-theme-on-primary, #fff));
564
+ background-color: var(--mdc-protected-button-hover-state-layer-color, var(--mdc-theme-on-primary, #fff));
489
565
  }
490
566
  .mdc-button--raised:hover .mdc-button__ripple::before, .mdc-button--raised.mdc-ripple-surface--hover .mdc-button__ripple::before {
491
567
  opacity: 0.08;
492
568
  /* @alternate */
493
- opacity: var(--mdc-ripple-hover-opacity, 0.08);
569
+ opacity: var(--mdc-protected-button-hover-state-layer-opacity, 0.08);
494
570
  }
495
571
  .mdc-button--raised.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--raised:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
496
572
  transition-duration: 75ms;
497
573
  opacity: 0.24;
498
574
  /* @alternate */
499
- opacity: var(--mdc-ripple-focus-opacity, 0.24);
575
+ opacity: var(--mdc-protected-button-focus-state-layer-opacity, 0.24);
500
576
  }
501
577
  .mdc-button--raised:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
502
578
  transition: opacity 150ms linear;
@@ -505,86 +581,198 @@ svg.mdc-button__icon {
505
581
  transition-duration: 75ms;
506
582
  opacity: 0.24;
507
583
  /* @alternate */
508
- opacity: var(--mdc-ripple-press-opacity, 0.24);
584
+ opacity: var(--mdc-protected-button-pressed-state-layer-opacity, 0.24);
509
585
  }
510
586
  .mdc-button--raised.mdc-ripple-upgraded {
511
- --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
587
+ --mdc-ripple-fg-opacity: var(--mdc-protected-button-pressed-state-layer-opacity, 0.24);
512
588
  }
513
589
  .mdc-button--raised .mdc-button__ripple {
514
590
  border-radius: 4px;
515
591
  /* @alternate */
516
- border-radius: var(--mdc-shape-small, 4px);
592
+ border-radius: var(--mdc-protected-button-container-shape, var(--mdc-shape-small, 4px));
593
+ }
594
+ .mdc-button--raised.mdc-ripple-upgraded--background-focused, .mdc-button--raised:not(.mdc-ripple-upgraded):focus {
595
+ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
596
+ /* @alternate */
597
+ box-shadow: var(--mdc-protected-button-focus-container-elevation, var(--mdc-elevation-box-shadow-for-gss));
598
+ --mdc-elevation-box-shadow-for-gss: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
599
+ }
600
+ .mdc-button--raised:hover {
601
+ box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
602
+ /* @alternate */
603
+ box-shadow: var(--mdc-protected-button-hover-container-elevation, var(--mdc-elevation-box-shadow-for-gss));
604
+ --mdc-elevation-box-shadow-for-gss: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
605
+ }
606
+ .mdc-button--raised:not(:disabled):active {
607
+ box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
608
+ /* @alternate */
609
+ box-shadow: var(--mdc-protected-button-pressed-container-elevation, var(--mdc-elevation-box-shadow-for-gss));
610
+ --mdc-elevation-box-shadow-for-gss: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
611
+ }
612
+ .mdc-button--raised:disabled {
613
+ box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
614
+ /* @alternate */
615
+ box-shadow: var(--mdc-protected-button-disabled-container-elevation, var(--mdc-elevation-box-shadow-for-gss));
616
+ --mdc-elevation-box-shadow-for-gss: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
517
617
  }
518
-
519
618
  .mdc-button--outlined {
619
+ font-family: Roboto, sans-serif;
620
+ /* @alternate */
621
+ font-family: var(--mdc-outlined-button-label-text-font, var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif)));
622
+ font-size: 0.875rem;
623
+ /* @alternate */
624
+ font-size: var(--mdc-outlined-button-label-text-size, var(--mdc-typography-button-font-size, 0.875rem));
625
+ letter-spacing: 0.0892857143em;
626
+ /* @alternate */
627
+ letter-spacing: var(--mdc-outlined-button-label-text-tracking, var(--mdc-typography-button-letter-spacing, 0.0892857143em));
628
+ font-weight: 500;
629
+ /* @alternate */
630
+ font-weight: var(--mdc-outlined-button-label-text-weight, var(--mdc-typography-button-font-weight, 500));
631
+ text-transform: none;
632
+ /* @alternate */
633
+ text-transform: var(--mdc-outlined-button-label-text-transform, var(--mdc-typography-button-text-transform, none));
520
634
  height: 36px;
635
+ /* @alternate */
636
+ height: var(--mdc-outlined-button-container-height, 36px);
521
637
  border-radius: 4px;
522
638
  /* @alternate */
523
- border-radius: var(--mdc-shape-small, 4px);
639
+ border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px));
524
640
  padding: 0 15px 0 15px;
525
641
  border-width: 1px;
526
- }
527
- .mdc-button--outlined:not(:disabled) {
528
- background-color: transparent;
529
- }
530
- .mdc-button--outlined:disabled {
531
- background-color: transparent;
642
+ /* @alternate */
643
+ border-width: var(--mdc-outlined-button-outline-width, 1px);
532
644
  }
533
645
  .mdc-button--outlined:not(:disabled) {
534
646
  color: #26a69a;
535
647
  /* @alternate */
536
- color: var(--mdc-theme-primary, #26a69a);
648
+ color: var(--mdc-outlined-button-label-text-color, var(--mdc-theme-primary, #26a69a));
537
649
  }
538
650
  .mdc-button--outlined:disabled {
539
651
  color: rgba(0, 0, 0, 0.38);
652
+ /* @alternate */
653
+ color: var(--mdc-outlined-button-disabled-label-text-color, rgba(0, 0, 0, 0.38));
654
+ }
655
+ .mdc-button--outlined .mdc-button__icon {
656
+ font-size: 1.125rem;
657
+ /* @alternate */
658
+ font-size: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);
659
+ width: 1.125rem;
660
+ /* @alternate */
661
+ width: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);
662
+ height: 1.125rem;
663
+ /* @alternate */
664
+ height: var(--mdc-outlined-button-with-icon-icon-size, 1.125rem);
540
665
  }
541
- .mdc-button--outlined .mdc-button__ripple::before, .mdc-button--outlined .mdc-button__ripple::after {
666
+ .mdc-button--outlined .mdc-button__ripple::before,
667
+ .mdc-button--outlined .mdc-button__ripple::after {
542
668
  background-color: #26a69a;
543
669
  /* @alternate */
544
- background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #26a69a));
670
+ background-color: var(--mdc-outlined-button-hover-state-layer-color, var(--mdc-theme-primary, #26a69a));
545
671
  }
546
672
  .mdc-button--outlined:hover .mdc-button__ripple::before, .mdc-button--outlined.mdc-ripple-surface--hover .mdc-button__ripple::before {
547
- opacity: 0.08;
673
+ opacity: 0.04;
548
674
  /* @alternate */
549
- opacity: var(--mdc-ripple-hover-opacity, 0.08);
675
+ opacity: var(--mdc-outlined-button-hover-state-layer-opacity, 0.04);
550
676
  }
551
677
  .mdc-button--outlined.mdc-ripple-upgraded--background-focused .mdc-button__ripple::before, .mdc-button--outlined:not(.mdc-ripple-upgraded):focus .mdc-button__ripple::before {
552
678
  transition-duration: 75ms;
553
- opacity: 0.24;
679
+ opacity: 0.12;
554
680
  /* @alternate */
555
- opacity: var(--mdc-ripple-focus-opacity, 0.24);
681
+ opacity: var(--mdc-outlined-button-focus-state-layer-opacity, 0.12);
556
682
  }
557
683
  .mdc-button--outlined:not(.mdc-ripple-upgraded) .mdc-button__ripple::after {
558
684
  transition: opacity 150ms linear;
559
685
  }
560
686
  .mdc-button--outlined:not(.mdc-ripple-upgraded):active .mdc-button__ripple::after {
561
687
  transition-duration: 75ms;
562
- opacity: 0.24;
688
+ opacity: 0.12;
563
689
  /* @alternate */
564
- opacity: var(--mdc-ripple-press-opacity, 0.24);
690
+ opacity: var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12);
565
691
  }
566
692
  .mdc-button--outlined.mdc-ripple-upgraded {
567
- --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.24);
693
+ --mdc-ripple-fg-opacity: var(--mdc-outlined-button-pressed-state-layer-opacity, 0.12);
568
694
  }
569
695
  .mdc-button--outlined .mdc-button__ripple {
570
696
  border-radius: 4px;
571
697
  /* @alternate */
572
- border-radius: var(--mdc-shape-small, 4px);
698
+ border-radius: var(--mdc-outlined-button-container-shape, var(--mdc-shape-small, 4px));
573
699
  }
574
700
  .mdc-button--outlined:not(:disabled) {
575
701
  border-color: rgba(0, 0, 0, 0.12);
702
+ /* @alternate */
703
+ border-color: var(--mdc-outlined-button-outline-color, rgba(0, 0, 0, 0.12));
576
704
  }
577
705
  .mdc-button--outlined:disabled {
578
706
  border-color: rgba(0, 0, 0, 0.12);
707
+ /* @alternate */
708
+ border-color: var(--mdc-outlined-button-disabled-outline-color, rgba(0, 0, 0, 0.12));
709
+ }
710
+ .mdc-button--outlined.mdc-button--icon-trailing {
711
+ padding: 0 11px 0 15px;
712
+ }
713
+ .mdc-button--outlined.mdc-button--icon-leading {
714
+ padding: 0 15px 0 11px;
579
715
  }
580
716
  .mdc-button--outlined .mdc-button__ripple {
581
- top: -1px;
582
- left: -1px;
583
- border: 1px solid transparent;
717
+ top: calc(-1 * 1px);
718
+ /* @alternate */
719
+ top: calc(-1 * var(--mdc-outlined-button-outline-width, 1px));
720
+ left: calc(-1 * 1px);
721
+ /* @alternate */
722
+ left: calc(-1 * var(--mdc-outlined-button-outline-width, 1px));
723
+ border-width: 1px;
724
+ /* @alternate */
725
+ border-width: var(--mdc-outlined-button-outline-width, 1px);
584
726
  }
585
727
  .mdc-button--outlined .mdc-button__touch {
586
- left: -1px;
728
+ left: calc(-1 * 1px);
729
+ /* @alternate */
730
+ left: calc(-1 * var(--mdc-outlined-button-outline-width, 1px));
587
731
  width: calc(100% + 2 * 1px);
732
+ /* @alternate */
733
+ width: calc(100% + 2 * var(--mdc-outlined-button-outline-width, 1px));
734
+ }
735
+
736
+ .mdc-button--raised .mdc-button__icon,
737
+ .mdc-button--unelevated .mdc-button__icon,
738
+ .mdc-button--outlined .mdc-button__icon {
739
+ /* @noflip */
740
+ /*rtl:ignore*/
741
+ margin-left: -4px;
742
+ /* @noflip */
743
+ /*rtl:ignore*/
744
+ margin-right: 8px;
745
+ }
746
+ [dir=rtl] .mdc-button--raised .mdc-button__icon, [dir=rtl] .mdc-button--unelevated .mdc-button__icon, [dir=rtl] .mdc-button--outlined .mdc-button__icon, .mdc-button--raised .mdc-button__icon[dir=rtl], .mdc-button--unelevated .mdc-button__icon[dir=rtl], .mdc-button--outlined .mdc-button__icon[dir=rtl] {
747
+ /*rtl:begin:ignore*/
748
+ /* @noflip */
749
+ /*rtl:ignore*/
750
+ margin-left: 8px;
751
+ /* @noflip */
752
+ /*rtl:ignore*/
753
+ margin-right: -4px;
754
+ /*rtl:end:ignore*/
755
+ }
756
+
757
+ .mdc-button--raised .mdc-button__label + .mdc-button__icon,
758
+ .mdc-button--unelevated .mdc-button__label + .mdc-button__icon,
759
+ .mdc-button--outlined .mdc-button__label + .mdc-button__icon {
760
+ /* @noflip */
761
+ /*rtl:ignore*/
762
+ margin-left: 8px;
763
+ /* @noflip */
764
+ /*rtl:ignore*/
765
+ margin-right: -4px;
766
+ }
767
+ [dir=rtl] .mdc-button--raised .mdc-button__label + .mdc-button__icon, [dir=rtl] .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, [dir=rtl] .mdc-button--outlined .mdc-button__label + .mdc-button__icon, .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] {
768
+ /*rtl:begin:ignore*/
769
+ /* @noflip */
770
+ /*rtl:ignore*/
771
+ margin-left: -4px;
772
+ /* @noflip */
773
+ /*rtl:ignore*/
774
+ margin-right: 8px;
775
+ /*rtl:end:ignore*/
588
776
  }
589
777
 
590
778
  :host {