material-inspired-component-library 1.2.1 → 1.3.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 (53) hide show
  1. package/README.md +12 -2
  2. package/components/bottomsheet/index.scss +18 -16
  3. package/components/button/README.md +1 -1
  4. package/components/button/index.scss +57 -80
  5. package/components/card/index.scss +33 -31
  6. package/components/checkbox/index.scss +5 -9
  7. package/components/dialog/index.scss +38 -29
  8. package/components/iconbutton/README.md +1 -1
  9. package/components/iconbutton/index.scss +51 -81
  10. package/components/list/index.scss +45 -33
  11. package/components/list/index.ts +10 -9
  12. package/components/menu/README.md +67 -4
  13. package/components/menu/index.scss +43 -39
  14. package/components/menu/index.ts +47 -16
  15. package/components/navigationrail/README.md +99 -0
  16. package/components/navigationrail/index.scss +157 -0
  17. package/components/radio/index.scss +28 -15
  18. package/components/select/index.scss +4 -12
  19. package/components/sidesheet/index.scss +21 -19
  20. package/components/switch/index.scss +11 -8
  21. package/components/textfield/index.scss +16 -7
  22. package/dist/bottomsheet.css +1 -1
  23. package/dist/button.css +1 -1
  24. package/dist/card.css +1 -1
  25. package/dist/checkbox.css +1 -1
  26. package/dist/components/menu/index.d.ts +0 -11
  27. package/dist/dialog.css +1 -1
  28. package/dist/iconbutton.css +1 -1
  29. package/dist/list.css +1 -1
  30. package/dist/menu.css +1 -1
  31. package/dist/micl.css +1 -1
  32. package/dist/micl.js +1 -1
  33. package/dist/navigationrail.css +1 -0
  34. package/dist/navigationrail.js +1 -0
  35. package/dist/radio.css +1 -1
  36. package/dist/select.css +1 -1
  37. package/dist/sidesheet.css +1 -1
  38. package/dist/slider.css +1 -1
  39. package/dist/switch.css +1 -1
  40. package/dist/textfield.css +1 -1
  41. package/docs/dialog.html +4 -4
  42. package/docs/docs.js +2 -2
  43. package/docs/index.html +3 -1
  44. package/docs/menu.html +183 -3
  45. package/docs/micl.css +1 -1
  46. package/docs/micl.js +1 -1
  47. package/docs/navigationrail.html +75 -0
  48. package/micl.ts +10 -8
  49. package/package.json +7 -7
  50. package/styles/statelayer.scss +14 -0
  51. package/styles.scss +1 -1
  52. package/webpack.config.js +37 -0
  53. package/styles/ripple.scss +0 -50
package/components/radio/index.scss CHANGED
@@ -20,7 +20,6 @@
20
20
  // SOFTWARE.
21
21
 
22
22
  @use '../../styles/motion';
23
- @use '../../styles/ripple';
24
23
  @use '../../styles/shapes';
25
24
  @use '../../styles/statelayer';
26
25
 
@@ -31,7 +30,9 @@
31
30
  }
32
31
 
33
32
  input[type=radio].micl-radio {
34
- --md-sys-ripple-background-color: var(--md-sys-color-primary);
33
+ --md-sys-radio-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
34
+ --md-sys-radio-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
35
+ --md-sys-radio-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
35
36
 
36
37
  appearance: none;
37
38
  box-sizing: border-box;
@@ -44,7 +45,6 @@ input[type=radio].micl-radio {
44
45
  background-color: transparent;
45
46
  border-radius: var(--md-sys-shape-corner-full);
46
47
  outline-offset: -7px;
47
- transition: background-color var(--md-sys-motion-duration-long2);
48
48
 
49
49
  &::after {
50
50
  content: "";
@@ -60,28 +60,35 @@ input[type=radio].micl-radio {
60
60
  background-clip: content-box;
61
61
  border-radius: var(--md-sys-shape-corner-full);
62
62
  transition:
63
- padding var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized,
64
- border-color var(--md-sys-motion-duration-medium2) motion.$md-sys-motion-easing-emphasized;
63
+ padding var(--md-sys-radio-motion-duration-reverse) var(--md-sys-radio-motion-effects),
64
+ border-color var(--md-sys-radio-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized;
65
65
  }
66
66
  &:checked::after {
67
67
  border-color: var(--md-sys-color-primary);
68
68
  padding: 3px;
69
69
  transition:
70
- padding var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
71
- border-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized;
70
+ padding var(--md-sys-radio-motion-duration) var(--md-sys-radio-motion-effects),
71
+ border-color var(--md-sys-radio-motion-duration) motion.$md-sys-motion-easing-emphasized;
72
72
  }
73
73
  &:not(:disabled) {
74
74
  --miclripple: 1;
75
75
 
76
- @include ripple.effect;
77
-
76
+ background-image:
77
+ radial-gradient(circle at var(--x, center) var(--y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
78
+ linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
79
+ background-repeat: no-repeat;
80
+ background-size: 10000%, 100%;
78
81
  cursor: pointer;
82
+ transition:
83
+ background-size 3000ms,
84
+ --statelayer-opacity var(--md-sys-radio-motion-duration) linear;
79
85
 
80
86
  &:hover {
81
- background-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-hover-state-layer-opacity));
87
+ --statelayer-color: var(--md-sys-color-on-surface);
88
+ --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
82
89
 
83
90
  &:checked {
84
- background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-hover-state-layer-opacity));
91
+ --statelayer-color: var(--md-sys-color-primary);
85
92
  }
86
93
  &::after {
87
94
  border-color: var(--md-sys-color-on-surface);
@@ -91,11 +98,13 @@ input[type=radio].micl-radio {
91
98
  }
92
99
  }
93
100
  &:focus-visible {
94
- background-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-focus-state-layer-opacity));
101
+ --statelayer-color: var(--md-sys-color-on-surface);
102
+ --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
103
+
95
104
  outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
96
105
 
97
106
  &:checked {
98
- background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-focus-state-layer-opacity));
107
+ --statelayer-color: var(--md-sys-color-primary);
99
108
  }
100
109
  &::after {
101
110
  border-color: var(--md-sys-color-on-surface);
@@ -105,10 +114,14 @@ input[type=radio].micl-radio {
105
114
  }
106
115
  }
107
116
  &:active {
108
- background-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--md-sys-state-pressed-state-layer-opacity));
117
+ --statelayer-color: var(--md-sys-color-on-surface);
118
+ --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
119
+
120
+ background-size: 0%, 100%;
121
+ transition: background-size 0ms;
109
122
 
110
123
  &:checked {
111
- background-color: rgb(from var(--md-sys-color-primary) r g b / var(--md-sys-state-pressed-state-layer-opacity));
124
+ --statelayer-color: var(--md-sys-color-primary);
112
125
  }
113
126
  &::after {
114
127
  border-color: var(--md-sys-color-on-surface);
package/components/select/index.scss CHANGED
@@ -21,19 +21,13 @@
21
21
 
22
22
  @use '../../styles/elevation';
23
23
  @use '../../styles/motion';
24
- @use '../../styles/ripple';
25
24
  @use '../../styles/shapes';
26
25
  @use '../../styles/statelayer';
27
26
  @use '../../styles/typography';
28
27
 
29
28
  .micl-textfield-filled > select,
30
29
  .micl-textfield-outlined > select {
31
- --md-sys-option-one-height: var(--md-sys-list-item-one-height);
32
- --md-sys-option-one-padding: var(--md-sys-list-item-one-padding);
33
- --md-sys-option-two-padding: 8px;
34
- --md-sys-option-three-padding: 12px;
35
- --md-sys-option-space: 16px;
36
- --md-sys-option-padding-inline: 16px;
30
+ --md-sys-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
37
31
 
38
32
  appearance: base-select;
39
33
 
@@ -64,11 +58,6 @@
64
58
  --md-sys-list-item-space: 12px;
65
59
  --md-sys-list-item-padding-inline: 16px;
66
60
  --md-sys-list-item-container-color: var(--md-sys-color-surface-container);
67
- --md-sys-motion-duration-long2: 500ms;
68
- --md-sys-state-hover-state-layer-opacity: #{statelayer.$md-sys-state-hover-state-layer-opacity};
69
- --md-sys-state-focus-state-layer-opacity: #{statelayer.$md-sys-state-focus-state-layer-opacity};
70
- --md-sys-state-pressed-state-layer-opacity: #{statelayer.$md-sys-state-pressed-state-layer-opacity};
71
- --md-sys-state-focus-indicator-thickness: #{statelayer.$md-sys-state-focus-indicator-thickness};
72
61
 
73
62
  border-radius: 0px;
74
63
 
@@ -104,6 +93,9 @@
104
93
  color: var(--md-sys-color-on-surface-variant);
105
94
  white-space: normal;
106
95
  }
96
+ &::checkmark {
97
+ color: var(--md-sys-color-on-surface);
98
+ }
107
99
  }
108
100
  }
109
101
 
package/components/sidesheet/index.scss CHANGED
@@ -30,6 +30,9 @@ dialog.micl-sidesheet {
30
30
  --md-sys-sidesheet-spring-buffer: 200px;
31
31
  --md-sys-sidesheet-padding-standard: 24px;
32
32
  --md-sys-sidesheet-padding-modal: 16px;
33
+ --md-sys-sidesheet-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
34
+ --md-sys-sidesheet-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
35
+ --md-sys-sidesheet-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
33
36
 
34
37
  box-sizing: border-box;
35
38
  display: none;
@@ -53,10 +56,10 @@ dialog.micl-sidesheet {
53
56
  opacity: 0;
54
57
  overflow: hidden;
55
58
  transition:
56
- display var(--md-sys-motion-duration-medium1) allow-discrete,
57
- overlay var(--md-sys-motion-duration-medium1) allow-discrete,
58
- opacity var(--md-sys-motion-duration-medium1),
59
- margin-inline-end var(--md-sys-motion-duration-medium1);
59
+ opacity var(--md-sys-sidesheet-motion-duration-reverse) linear,
60
+ margin-inline-end var(--md-sys-sidesheet-motion-duration-reverse) var(--md-sys-sidesheet-motion-spatial),
61
+ overlay var(--md-sys-sidesheet-motion-duration-reverse) linear allow-discrete,
62
+ display var(--md-sys-sidesheet-motion-duration-reverse) linear allow-discrete;
60
63
 
61
64
  .micl-sidesheet__headline {
62
65
  display: flex;
@@ -109,9 +112,9 @@ dialog.micl-sidesheet {
109
112
  &::backdrop {
110
113
  background-color: rgba(0, 0, 0, 0);
111
114
  transition:
112
- display var(--md-sys-motion-duration-long2) linear allow-discrete,
113
- overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
114
- background-color var(--md-sys-motion-duration-long2);
115
+ background-color var(--md-sys-sidesheet-motion-duration) linear,
116
+ overlay var(--md-sys-sidesheet-motion-duration) linear allow-discrete,
117
+ display var(--md-sys-sidesheet-motion-duration) linear allow-discrete;
115
118
  }
116
119
  &[open] {
117
120
  background-color: var(--md-sys-color-surface-container-low);
@@ -132,23 +135,22 @@ dialog.micl-sidesheet {
132
135
  margin-inline-end: calc(-1 * var(--md-sys-sidesheet-spring-buffer));
133
136
  opacity: 1;
134
137
  transition:
135
- display var(--md-sys-motion-duration-long2) linear allow-discrete,
136
- overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
137
- opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate,
138
- margin-inline-end var(--md-sys-motion-duration-long2) linear(motion.$md-sys-motion-spring-default-spatial);
138
+ opacity var(--md-sys-sidesheet-motion-duration) linear,
139
+ margin-inline-end var(--md-sys-sidesheet-motion-duration) var(--md-sys-sidesheet-motion-spatial),
140
+ overlay var(--md-sys-sidesheet-motion-duration) linear allow-discrete,
141
+ display var(--md-sys-sidesheet-motion-duration) linear allow-discrete;
139
142
 
140
143
  @starting-style {
141
- opacity: 0;
142
144
  margin-inline-end: calc(-1 * (var(--md-sys-sidesheet-maxwidth) + var(--md-sys-sidesheet-spring-buffer)));
143
- }
144
- &::backdrop {
145
- @starting-style {
146
- background-color: rgba(0, 0, 0, 0);
147
- }
145
+ opacity: 0;
148
146
  }
149
147
  }
150
148
  &[open]::backdrop {
151
149
  background-color: rgba(0, 0, 0, 0.2);
150
+
151
+ @starting-style {
152
+ background-color: rgba(0, 0, 0, 0);
153
+ }
152
154
  }
153
155
  }
154
156
 
@@ -156,9 +158,9 @@ body:has(dialog.micl-sidesheet[popover]) {
156
158
  box-sizing: border-box;
157
159
  max-width: 100%;
158
160
  margin: 0;
159
- transition: max-width var(--md-sys-motion-duration-medium1);
161
+ transition: max-width var(--md-sys-sidesheet-motion-duration-reverse);
160
162
  }
161
163
  body:has(dialog.micl-sidesheet:popover-open) {
162
164
  max-width: calc(100vw - 400px);
163
- transition: max-width var(--md-sys-motion-duration-long2) linear(motion.$md-sys-motion-spring-default-spatial);
165
+ transition: max-width var(--md-sys-sidesheet-motion-duration) var(--md-sys-sidesheet-motion-spatial);
164
166
  }
package/components/switch/index.scss CHANGED
@@ -34,6 +34,9 @@ input[type=checkbox].micl-switch {
34
34
  --md-sys-switch-unselected-icon: "+";
35
35
  --md-sys-switch-selected-icon: "\AC";
36
36
  --md-sys-switch-outline-width: 2px;
37
+ --md-sys-switch-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
38
+ --md-sys-switch-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
39
+ --md-sys-switch-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
37
40
 
38
41
  appearance: none;
39
42
  position: relative;
@@ -53,7 +56,7 @@ input[type=checkbox].micl-switch {
53
56
  border: var(--md-sys-switch-outline-width) solid var(--md-sys-color-outline);
54
57
  border-radius: inherit;
55
58
  background-color: var(--md-sys-color-surface-container-highest);
56
- transition: background-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized;
59
+ transition: background-color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
57
60
  }
58
61
  &::after {
59
62
  content: var(--md-sys-switch-unselected-icon);
@@ -73,13 +76,13 @@ input[type=checkbox].micl-switch {
73
76
  border-radius: var(--md-sys-shape-corner-full);
74
77
  transform: rotate(135deg);
75
78
  transition:
76
- inset-inline-start var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
77
- border-width var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
78
- font-size var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
79
- line-height var(--md-sys-motion-duration-long4) linear(motion.$md-sys-motion-spring-slow-spatial),
80
- color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized,
81
- border-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized,
82
- background-color var(--md-sys-motion-duration-long4) motion.$md-sys-motion-easing-emphasized;
79
+ inset-inline-start var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
80
+ border-width var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
81
+ font-size var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
82
+ line-height var(--md-sys-switch-motion-duration) var(--md-sys-switch-motion-effects),
83
+ color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
84
+ border-color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized,
85
+ background-color var(--md-sys-switch-motion-duration) motion.$md-sys-motion-easing-emphasized;
83
86
  }
84
87
  &:checked {
85
88
  &::before {
package/components/textfield/index.scss CHANGED
@@ -32,6 +32,9 @@
32
32
  --md-sys-textfield-input-space: 16px;
33
33
  --md-sys-textfield-prefix-space: 1em;
34
34
  --md-sys-textfield-suffix-space: 1em;
35
+ --md-sys-textfield-motion-effects: #{motion.$md-sys-motion-expressive-slow-effects};
36
+ --md-sys-textfield-motion-duration: #{motion.$md-sys-motion-expressive-slow-effects-duration};
37
+ --md-sys-textfield-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-effects-duration};
35
38
 
36
39
  display: grid;
37
40
  grid-template-areas: "textfield" "supporting";
@@ -53,10 +56,10 @@
53
56
  color: var(--md-sys-color-on-surface-variant);
54
57
  z-index: 1;
55
58
  transition:
56
- margin-block-start var(--md-sys-motion-duration-medium2) var(--md-sys-motion-duration-short3),
57
- margin-inline-start var(--md-sys-motion-duration-medium2) var(--md-sys-motion-duration-short3),
58
- font-size var(--md-sys-motion-duration-medium2),
59
- letter-spacing var(--md-sys-motion-duration-medium2);
59
+ margin-block-start var(--md-sys-textfield-motion-duration) var(--md-sys-textfield-motion-effects),
60
+ margin-inline-start var(--md-sys-textfield-motion-duration) var(--md-sys-textfield-motion-effects),
61
+ font-size var(--md-sys-textfield-motion-duration) linear,
62
+ letter-spacing var(--md-sys-textfield-motion-duration) linear;
60
63
  }
61
64
  &> input,
62
65
  &> select,
@@ -121,7 +124,7 @@
121
124
  color: var(--md-sys-color-on-surface-variant);
122
125
  opacity: 0;
123
126
  z-index: 1;
124
- transition: opacity var(--md-sys-motion-duration-long1);
127
+ transition: opacity var(--md-sys-textfield-motion-duration-reverse) linear;
125
128
  }
126
129
  &> .micl-textfield__prefix {
127
130
  width: var(--md-sys-textfield-prefix-space);
@@ -250,19 +253,25 @@
250
253
  &> input:not(:disabled),
251
254
  &> select:not(:disabled),
252
255
  &> textarea:not(:disabled) {
256
+ --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
257
+
253
258
  border-block-end-color: var(--md-sys-color-on-surface);
254
- background-color: color-mix(in srgb, var(--md-sys-color-surface-container-highest), var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity));
255
259
  }
256
260
  }
257
261
  &> input,
258
262
  &> select,
259
263
  &> textarea {
264
+ --statelayer-color: var(--md-sys-color-on-surface);
265
+
260
266
  padding-block-start: 18px;
261
267
  padding-block-end: 2px;
262
- background-color: var(--md-sys-color-surface-container-highest);
263
268
  border-end-start-radius: 0;
264
269
  border-end-end-radius: 0;
265
270
  outline: none;
271
+ background-color: var(--md-sys-color-surface-container-highest);
272
+ background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
273
+ background-repeat: no-repeat;
274
+ transition: --statelayer-opacity var(--md-sys-textfield-motion-duration) linear;
266
275
 
267
276
  &:disabled {
268
277
  background-color: rgb(from var(--md-sys-color-on-surface) r g b / 4%);
package/dist/bottomsheet.css CHANGED
@@ -1 +1 @@
1
- :root{--md-sys-elevation-level0: 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) 0px 0px 0px 0px;--md-sys-elevation-level1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;--md-sys-elevation-level2: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;--md-sys-elevation-level3: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;--md-sys-elevation-level4: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;--md-sys-elevation-level5: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px}:root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms}:root{--md-sys-target-size: 48px;--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-state-hover-state-layer-opacity: 8%;--md-sys-state-focus-state-layer-opacity: 10%;--md-sys-state-pressed-state-layer-opacity: 10%;--md-sys-state-dragged-state-layer-opacity: 16%;--md-sys-state-focus-indicator-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}dialog.micl-bottomsheet{--md-sys-bottomsheet-height: max-content;--md-sys-bottomsheet-margin: 56px;--md-sys-bottomsheet-padding: 24px;--md-sys-bottomsheet-handle-width: 32px;--md-sys-bottomsheet-handle-height: 4px;box-sizing:border-box;position:fixed;top:auto;bottom:0;height:0;max-height:50vh;width:100%;min-width:100%;margin:72px 0 0 0;padding:0;border:none;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-level1);opacity:0;overflow-y:hidden;interpolate-size:allow-keywords}dialog.micl-bottomsheet:not(.micl-bottomsheet--resizing){transition:display var(--md-sys-motion-duration-medium1) allow-discrete,overlay var(--md-sys-motion-duration-medium1) allow-discrete,height var(--md-sys-motion-duration-medium1) linear(0, 0.00003 0.08%, 0.00014 0.17%, 0.00029 0.25%, 0.00054 0.34%, 0.00083 0.42%, 0.00121 0.51%, 0.00162 0.59%, 0.00215 0.68%, 0.00267 0.76%, 0.00334 0.85%, 0.00398 0.93%, 0.00478 1.02%, 0.00554 1.1%, 0.00646, 0.00745, 0.00851 1.37%, 0.00951 1.45%, 0.01069, 0.01194, 0.01325, 0.01463, 0.01607, 0.01757, 0.01914, 0.02076, 0.02245, 0.02419 2.35%, 0.0262 2.45%, 0.02807, 0.03, 0.03198 2.72%, 0.03425 2.82%, 0.03636 2.91%, 0.03876 3.01%, 0.04098 3.1%, 0.0435 3.2%, 0.04583 3.29%, 0.04848 3.39%, 0.05369, 0.05913 3.77%, 0.06508, 0.07127, 0.07769, 0.08432 4.57%, 0.09152 4.78%, 0.09859 4.98%, 0.10622, 0.11406, 0.12211 5.611%, 0.13076, 0.13961 6.051%, 0.14658, 0.15367, 0.16087 6.561%, 0.16862, 0.17647, 0.18444, 0.19252 7.281%, 0.20115, 0.20989, 0.21874, 0.22769 8.041%, 0.23721 8.241%, 0.25702 8.651%, 0.2777 9.071%, 0.29569 9.431%, 0.31491 9.811%, 0.33537 10.211%, 0.35705 10.631%, 0.37681 11.011%, 0.3993 11.441%, 0.4818 13.011%, 0.51583 13.661%, 0.55063 14.331%, 0.58146 14.931%, 0.59926 15.282%, 0.61591 15.612%, 0.6319, 0.64775 16.252%, 0.66295 16.562%, 0.6775, 0.69189, 0.70612 17.462%, 0.72204 17.802%, 0.73726, 0.75226 18.462%, 0.76658, 0.78067 19.102%, 0.7941 19.412%, 0.80773 19.732%, 0.8207, 0.83343, 0.84592, 0.85818, 0.87018, 0.88193 21.592%, 0.89307, 0.90396, 0.91462, 0.92503 22.792%, 0.93486 23.082%, 0.94479 23.382%, 0.95416 23.672%, 0.9636 23.972%, 0.97249 24.262%, 0.98144 24.562%, 0.98986, 0.99805 25.143%, 1.00219, 1.00627 25.443%, 1.01003 25.583%, 1.01399, 1.01789, 1.02172 26.033%, 1.02525 26.173%, 1.02897, 1.03262, 1.03622, 1.03975, 1.04322, 1.04663, 1.04999, 1.05328, 1.05651, 1.05968, 1.06279, 1.06584, 1.06883, 1.07176, 1.07463, 1.07745, 1.0802, 1.0829, 1.08554, 1.08813, 1.09065, 1.09312 29.473%, 1.09569 29.633%, 1.09804, 1.10034, 1.10258 30.083%, 1.10491 30.243%, 1.10704 30.393%, 1.10925 30.553%, 1.11127 30.703%, 1.11336 30.863%, 1.11526 31.013%, 1.11724, 1.11915, 1.12101 31.493%, 1.12269 31.643%, 1.12443, 1.12612, 1.12775 32.123%, 1.12893, 1.13008, 1.1312 32.483%, 1.13238 32.613%, 1.13343, 1.13446, 1.13545 32.973%, 1.1365 33.103%, 1.13743 33.223%, 1.1384 33.353%, 1.13927 33.473%, 1.14018 33.603%, 1.14099 33.723%, 1.14183, 1.14264, 1.14342 34.113%, 1.14411 34.233%, 1.14482, 1.1455, 1.14615, 1.14677, 1.14736, 1.14791, 1.14844, 1.14893, 1.14939, 1.14983, 1.15023, 1.15061, 1.15095, 1.15127 36.054%, 1.15158 36.194%, 1.15184 36.324%, 1.15209 36.464%, 1.15229 36.594%, 1.15248 36.734%, 1.15263 36.864%, 1.15276, 1.15286, 1.15293 37.284%, 1.15296 37.414%, 1.15298, 1.15296, 1.15292, 1.15285, 1.15275, 1.15263 38.254%, 1.15246 38.404%, 1.15228 38.544%, 1.15206 38.694%, 1.15183 38.834%, 1.15155, 1.15125, 1.15092, 1.15056, 1.15017, 1.14976, 1.14932, 1.14886 40.034%, 1.14834 40.194%, 1.14783 40.344%, 1.14725 40.504%, 1.14669 40.654%, 1.14607 40.814%, 1.14513 41.044%, 1.14409, 1.143 41.524%, 1.14181, 1.14057, 1.13927 42.274%, 1.13787, 1.13642, 1.13492 43.054%, 1.13331, 1.13166 43.594%, 1.12989, 1.12808 44.154%, 1.12615 44.444%, 1.12412, 1.12203 45.045%, 1.1202, 1.11833 45.565%, 1.11636, 1.11437 46.105%, 1.11228 46.385%, 1.11008 46.675%, 1.10531 47.295%, 1.10085 47.865%, 1.09578 48.505%, 1.09057 49.155%, 1.07579 50.995%, 1.07124 51.565%, 1.06713 52.085%, 1.06251 52.675%, 1.05826 53.225%, 1.05423 53.755%, 1.05041 54.265%, 1.0482, 1.04601, 1.04385 55.166%, 1.04178, 1.03974 55.746%, 1.0378, 1.03588, 1.03399, 1.03213 56.866%, 1.03036 57.136%, 1.02855 57.416%, 1.02683, 1.02514, 1.02348, 1.02185, 1.02024 58.766%, 1.01844, 1.01667, 1.01494, 1.01325, 1.0116 60.316%, 1.01004 60.616%, 1.00847 60.926%, 1.00699 61.226%, 1.0055 61.536%, 1.00409, 1.00273, 1.0014, 1.00011 62.736%, 0.99882 63.046%, 0.9976 63.346%, 0.99639 63.656%, 0.99525 63.956%, 0.99412 64.266%, 0.99306 64.566%, 0.992, 0.99098, 0.99001, 0.98907, 0.98817, 0.98731, 0.98648, 0.98569 67.047%, 0.98492, 0.98418, 0.98349, 0.98283, 0.98221 68.647%, 0.98173 68.907%, 0.98126 69.177%, 0.98083 69.437%, 0.98041, 0.98001, 0.97963, 0.97929 70.517%, 0.97895 70.797%, 0.97865 71.067%, 0.97836, 0.97809, 0.97785, 0.97763 72.187%, 0.97743 72.477%, 0.97725 72.757%, 0.9771, 0.97696, 0.97685 73.627%, 0.97676, 0.97668, 0.97663, 0.97661 74.827%, 0.9766, 0.97661, 0.97664 75.758%, 0.9767 76.078%, 0.97687 76.718%, 0.97713 77.378%, 0.97748 78.058%, 0.97779 78.578%, 0.97815 79.108%, 0.97855 79.648%, 0.97901 80.208%, 0.97953 80.788%, 0.9801 81.388%, 0.98072 82.008%, 0.98141 82.668%, 0.98262 83.758%, 0.98406 84.988%, 0.98549 86.169%, 0.98928 89.259%, 0.99036 90.159%, 0.99134 90.989%, 0.99235 91.869%, 0.99328 92.699%, 0.99415 93.509%, 0.99496 94.289%, 0.9957 95.03%, 0.99639 95.76%, 0.99705 96.48%, 0.99767, 0.99825 97.9%, 0.9988, 0.99931, 0.9998),opacity var(--md-sys-motion-duration-medium1) cubic-bezier(0.3, 0, 0.8, 0.15)}dialog.micl-bottomsheet.micl-bottomsheet--resizing .micl-bottomsheet__headline{cursor:grabbing}dialog.micl-bottomsheet .micl-bottomsheet__headline{box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--md-sys-target-size);justify-content:center;cursor:grab}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle{box-sizing:content-box;width:var(--md-sys-bottomsheet-handle-width);height:var(--md-sys-bottomsheet-handle-height);padding:16px calc((var(--md-sys-target-size) - var(--md-sys-bottomsheet-handle-width))/2);border:none;border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-on-surface-variant);background-clip:content-box;cursor:pointer}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:var(--md-sys-state-focus-indicator-outer-offset)}dialog.micl-bottomsheet .micl-bottomsheet__content{padding:0 var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding)}dialog.micl-bottomsheet::backdrop{background-color:rgba(0,0,0,0);transition:display var(--md-sys-motion-duration-long2) linear allow-discrete,overlay var(--md-sys-motion-duration-long2) linear allow-discrete,background-color var(--md-sys-motion-duration-long2) linear}dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:var(--md-sys-bottomsheet-height);opacity:1}dialog.micl-bottomsheet:popover-open:not(.micl-bottomsheet--resizing),dialog.micl-bottomsheet[open]:not(.micl-bottomsheet--resizing){transition:display var(--md-sys-motion-duration-long2) linear allow-discrete,overlay var(--md-sys-motion-duration-long2) linear allow-discrete,height var(--md-sys-motion-duration-long2) linear(0, 0.00003 0.08%, 0.00014 0.17%, 0.00029 0.25%, 0.00054 0.34%, 0.00083 0.42%, 0.00121 0.51%, 0.00162 0.59%, 0.00215 0.68%, 0.00267 0.76%, 0.00334 0.85%, 0.00398 0.93%, 0.00478 1.02%, 0.00554 1.1%, 0.00646, 0.00745, 0.00851 1.37%, 0.00951 1.45%, 0.01069, 0.01194, 0.01325, 0.01463, 0.01607, 0.01757, 0.01914, 0.02076, 0.02245, 0.02419 2.35%, 0.0262 2.45%, 0.02807, 0.03, 0.03198 2.72%, 0.03425 2.82%, 0.03636 2.91%, 0.03876 3.01%, 0.04098 3.1%, 0.0435 3.2%, 0.04583 3.29%, 0.04848 3.39%, 0.05369, 0.05913 3.77%, 0.06508, 0.07127, 0.07769, 0.08432 4.57%, 0.09152 4.78%, 0.09859 4.98%, 0.10622, 0.11406, 0.12211 5.611%, 0.13076, 0.13961 6.051%, 0.14658, 0.15367, 0.16087 6.561%, 0.16862, 0.17647, 0.18444, 0.19252 7.281%, 0.20115, 0.20989, 0.21874, 0.22769 8.041%, 0.23721 8.241%, 0.25702 8.651%, 0.2777 9.071%, 0.29569 9.431%, 0.31491 9.811%, 0.33537 10.211%, 0.35705 10.631%, 0.37681 11.011%, 0.3993 11.441%, 0.4818 13.011%, 0.51583 13.661%, 0.55063 14.331%, 0.58146 14.931%, 0.59926 15.282%, 0.61591 15.612%, 0.6319, 0.64775 16.252%, 0.66295 16.562%, 0.6775, 0.69189, 0.70612 17.462%, 0.72204 17.802%, 0.73726, 0.75226 18.462%, 0.76658, 0.78067 19.102%, 0.7941 19.412%, 0.80773 19.732%, 0.8207, 0.83343, 0.84592, 0.85818, 0.87018, 0.88193 21.592%, 0.89307, 0.90396, 0.91462, 0.92503 22.792%, 0.93486 23.082%, 0.94479 23.382%, 0.95416 23.672%, 0.9636 23.972%, 0.97249 24.262%, 0.98144 24.562%, 0.98986, 0.99805 25.143%, 1.00219, 1.00627 25.443%, 1.01003 25.583%, 1.01399, 1.01789, 1.02172 26.033%, 1.02525 26.173%, 1.02897, 1.03262, 1.03622, 1.03975, 1.04322, 1.04663, 1.04999, 1.05328, 1.05651, 1.05968, 1.06279, 1.06584, 1.06883, 1.07176, 1.07463, 1.07745, 1.0802, 1.0829, 1.08554, 1.08813, 1.09065, 1.09312 29.473%, 1.09569 29.633%, 1.09804, 1.10034, 1.10258 30.083%, 1.10491 30.243%, 1.10704 30.393%, 1.10925 30.553%, 1.11127 30.703%, 1.11336 30.863%, 1.11526 31.013%, 1.11724, 1.11915, 1.12101 31.493%, 1.12269 31.643%, 1.12443, 1.12612, 1.12775 32.123%, 1.12893, 1.13008, 1.1312 32.483%, 1.13238 32.613%, 1.13343, 1.13446, 1.13545 32.973%, 1.1365 33.103%, 1.13743 33.223%, 1.1384 33.353%, 1.13927 33.473%, 1.14018 33.603%, 1.14099 33.723%, 1.14183, 1.14264, 1.14342 34.113%, 1.14411 34.233%, 1.14482, 1.1455, 1.14615, 1.14677, 1.14736, 1.14791, 1.14844, 1.14893, 1.14939, 1.14983, 1.15023, 1.15061, 1.15095, 1.15127 36.054%, 1.15158 36.194%, 1.15184 36.324%, 1.15209 36.464%, 1.15229 36.594%, 1.15248 36.734%, 1.15263 36.864%, 1.15276, 1.15286, 1.15293 37.284%, 1.15296 37.414%, 1.15298, 1.15296, 1.15292, 1.15285, 1.15275, 1.15263 38.254%, 1.15246 38.404%, 1.15228 38.544%, 1.15206 38.694%, 1.15183 38.834%, 1.15155, 1.15125, 1.15092, 1.15056, 1.15017, 1.14976, 1.14932, 1.14886 40.034%, 1.14834 40.194%, 1.14783 40.344%, 1.14725 40.504%, 1.14669 40.654%, 1.14607 40.814%, 1.14513 41.044%, 1.14409, 1.143 41.524%, 1.14181, 1.14057, 1.13927 42.274%, 1.13787, 1.13642, 1.13492 43.054%, 1.13331, 1.13166 43.594%, 1.12989, 1.12808 44.154%, 1.12615 44.444%, 1.12412, 1.12203 45.045%, 1.1202, 1.11833 45.565%, 1.11636, 1.11437 46.105%, 1.11228 46.385%, 1.11008 46.675%, 1.10531 47.295%, 1.10085 47.865%, 1.09578 48.505%, 1.09057 49.155%, 1.07579 50.995%, 1.07124 51.565%, 1.06713 52.085%, 1.06251 52.675%, 1.05826 53.225%, 1.05423 53.755%, 1.05041 54.265%, 1.0482, 1.04601, 1.04385 55.166%, 1.04178, 1.03974 55.746%, 1.0378, 1.03588, 1.03399, 1.03213 56.866%, 1.03036 57.136%, 1.02855 57.416%, 1.02683, 1.02514, 1.02348, 1.02185, 1.02024 58.766%, 1.01844, 1.01667, 1.01494, 1.01325, 1.0116 60.316%, 1.01004 60.616%, 1.00847 60.926%, 1.00699 61.226%, 1.0055 61.536%, 1.00409, 1.00273, 1.0014, 1.00011 62.736%, 0.99882 63.046%, 0.9976 63.346%, 0.99639 63.656%, 0.99525 63.956%, 0.99412 64.266%, 0.99306 64.566%, 0.992, 0.99098, 0.99001, 0.98907, 0.98817, 0.98731, 0.98648, 0.98569 67.047%, 0.98492, 0.98418, 0.98349, 0.98283, 0.98221 68.647%, 0.98173 68.907%, 0.98126 69.177%, 0.98083 69.437%, 0.98041, 0.98001, 0.97963, 0.97929 70.517%, 0.97895 70.797%, 0.97865 71.067%, 0.97836, 0.97809, 0.97785, 0.97763 72.187%, 0.97743 72.477%, 0.97725 72.757%, 0.9771, 0.97696, 0.97685 73.627%, 0.97676, 0.97668, 0.97663, 0.97661 74.827%, 0.9766, 0.97661, 0.97664 75.758%, 0.9767 76.078%, 0.97687 76.718%, 0.97713 77.378%, 0.97748 78.058%, 0.97779 78.578%, 0.97815 79.108%, 0.97855 79.648%, 0.97901 80.208%, 0.97953 80.788%, 0.9801 81.388%, 0.98072 82.008%, 0.98141 82.668%, 0.98262 83.758%, 0.98406 84.988%, 0.98549 86.169%, 0.98928 89.259%, 0.99036 90.159%, 0.99134 90.989%, 0.99235 91.869%, 0.99328 92.699%, 0.99415 93.509%, 0.99496 94.289%, 0.9957 95.03%, 0.99639 95.76%, 0.99705 96.48%, 0.99767, 0.99825 97.9%, 0.9988, 0.99931, 0.9998),opacity var(--md-sys-motion-duration-long2) cubic-bezier(0.05, 0.7, 0.1, 1)}@starting-style{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:0;opacity:0}}@starting-style{dialog.micl-bottomsheet:popover-open::backdrop,dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,.2)}@media(min-width: 641px){dialog.micl-bottomsheet{width:min(100vw - 2*var(--md-sys-bottomsheet-margin),640px);max-width:640px;min-width:min(100vw - 2*var(--md-sys-bottomsheet-margin),640px);inset-inline-start:calc((100vw - min(100vw - 2*var(--md-sys-bottomsheet-margin),640px))/2 - var(--md-sys-bottomsheet-margin));margin:var(--md-sys-bottomsheet-margin);margin-bottom:0}}
1
+ :root{--md-sys-elevation-level0: 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) 0px 0px 0px 0px;--md-sys-elevation-level1: rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;--md-sys-elevation-level2: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;--md-sys-elevation-level3: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px;--md-sys-elevation-level4: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;--md-sys-elevation-level5: rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, rgba(0, 0, 0, 0.14) 0px 12px 17px 2px, rgba(0, 0, 0, 0.12) 0px 5px 22px 4px}:root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms}:root{--md-sys-target-size: 48px;--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-state-hover-state-layer-opacity: 8%;--md-sys-state-focus-state-layer-opacity: 10%;--md-sys-state-pressed-state-layer-opacity: 10%;--md-sys-state-dragged-state-layer-opacity: 16%;--md-sys-state-focus-indicator-inner-offset: -3px;--md-sys-state-focus-indicator-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}dialog.micl-bottomsheet{--md-sys-bottomsheet-height: max-content;--md-sys-bottomsheet-margin: 56px;--md-sys-bottomsheet-padding: 24px;--md-sys-bottomsheet-handle-width: 32px;--md-sys-bottomsheet-handle-height: 4px;--md-sys-bottomsheet-motion-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);--md-sys-bottomsheet-motion-duration: 650ms;--md-sys-bottomsheet-motion-duration-reverse: 500ms;box-sizing:border-box;position:fixed;top:auto;bottom:0;height:0;max-height:50vh;width:100%;min-width:100%;margin:72px 0 0 0;padding:0;border:none;border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;background-color:var(--md-sys-color-surface-container-low);box-shadow:var(--md-sys-elevation-level1);opacity:0;overflow-y:hidden;interpolate-size:allow-keywords}dialog.micl-bottomsheet:not(.micl-bottomsheet--resizing){transition:opacity var(--md-sys-bottomsheet-motion-duration-reverse) cubic-bezier(0.3, 0, 0.8, 0.15),height var(--md-sys-bottomsheet-motion-duration-reverse) var(--md-sys-bottomsheet-motion-spatial),overlay var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete,display var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete}dialog.micl-bottomsheet.micl-bottomsheet--resizing .micl-bottomsheet__headline{cursor:grabbing}dialog.micl-bottomsheet .micl-bottomsheet__headline{box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--md-sys-target-size);justify-content:center;cursor:grab}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle{box-sizing:content-box;width:var(--md-sys-bottomsheet-handle-width);height:var(--md-sys-bottomsheet-handle-height);padding:16px calc((var(--md-sys-target-size) - var(--md-sys-bottomsheet-handle-width))/2);border:none;border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-on-surface-variant);background-clip:content-box;cursor:pointer}dialog.micl-bottomsheet .micl-bottomsheet__headline .micl-bottomsheet__draghandle:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:var(--md-sys-state-focus-indicator-outer-offset)}dialog.micl-bottomsheet .micl-bottomsheet__content{padding:0 var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding)}dialog.micl-bottomsheet::backdrop{background-color:rgba(0,0,0,0);transition:overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,background-color var(--md-sys-bottomsheet-motion-duration) linear}dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:var(--md-sys-bottomsheet-height);opacity:1}dialog.micl-bottomsheet:popover-open:not(.micl-bottomsheet--resizing),dialog.micl-bottomsheet[open]:not(.micl-bottomsheet--resizing){transition:opacity var(--md-sys-bottomsheet-motion-duration) cubic-bezier(0.05, 0.7, 0.1, 1),height var(--md-sys-bottomsheet-motion-duration) var(--md-sys-bottomsheet-motion-spatial),overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete}@starting-style{dialog.micl-bottomsheet:popover-open,dialog.micl-bottomsheet[open]{height:0;opacity:0}}dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,.2)}@starting-style{dialog.micl-bottomsheet[open]::backdrop{background-color:rgba(0,0,0,0)}}@media(min-width: 641px){dialog.micl-bottomsheet{width:min(100vw - 2*var(--md-sys-bottomsheet-margin),640px);max-width:640px;min-width:min(100vw - 2*var(--md-sys-bottomsheet-margin),640px);inset-inline-start:calc((100vw - min(100vw - 2*var(--md-sys-bottomsheet-margin),640px))/2 - var(--md-sys-bottomsheet-margin));margin:var(--md-sys-bottomsheet-margin);margin-bottom:0}}