@rolster/styles-foundations 2.7.3 → 3.0.1

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 (192) hide show
  1. package/LICENSE +21 -21
  2. package/dist/design-system-bordered.css +4868 -0
  3. package/dist/design-system-bordered.css.map +1 -0
  4. package/dist/design-system-bordered.min.css +143 -0
  5. package/dist/design-system-filled.css +4783 -0
  6. package/dist/design-system-filled.css.map +1 -0
  7. package/dist/design-system-filled.min.css +141 -0
  8. package/dist/styles.css +363 -1242
  9. package/dist/styles.css.map +1 -1
  10. package/dist/styles.min.css +1 -53
  11. package/dist/styles.rtl.css +363 -1242
  12. package/dist/styles.rtl.min.css +1 -53
  13. package/package.json +41 -39
  14. package/scss/design-system-bordered/_index.scss +96 -0
  15. package/scss/{components → design-system-bordered}/app.scss +228 -145
  16. package/scss/design-system-bordered/atoms/amount.scss +58 -0
  17. package/scss/design-system-bordered/atoms/area-text.scss +100 -0
  18. package/scss/design-system-bordered/atoms/avatar.scss +50 -0
  19. package/scss/design-system-bordered/atoms/badge.scss +51 -0
  20. package/scss/design-system-bordered/atoms/breadcrumb.scss +87 -0
  21. package/scss/design-system-bordered/atoms/button-action.scss +124 -0
  22. package/scss/design-system-bordered/atoms/button-option.scss +49 -0
  23. package/scss/design-system-bordered/atoms/button.scss +249 -0
  24. package/scss/design-system-bordered/atoms/check-box.scss +49 -0
  25. package/scss/design-system-bordered/atoms/icon.scss +39 -0
  26. package/scss/design-system-bordered/atoms/image.scss +37 -0
  27. package/scss/design-system-bordered/atoms/input-decimal.scss +15 -0
  28. package/scss/design-system-bordered/atoms/input-money.scss +15 -0
  29. package/scss/design-system-bordered/atoms/input-number.scss +12 -0
  30. package/scss/design-system-bordered/atoms/input-password.scss +48 -0
  31. package/scss/design-system-bordered/atoms/input-percentage.scss +12 -0
  32. package/scss/design-system-bordered/atoms/input-search.scss +28 -0
  33. package/scss/design-system-bordered/atoms/input-text.scss +12 -0
  34. package/scss/design-system-bordered/atoms/input.scss +97 -0
  35. package/scss/design-system-bordered/atoms/label.scss +20 -0
  36. package/scss/design-system-bordered/atoms/message-icon.scss +21 -0
  37. package/scss/design-system-bordered/atoms/poster.scss +42 -0
  38. package/scss/design-system-bordered/atoms/progress-bar.scss +83 -0
  39. package/scss/design-system-bordered/atoms/progress-circular.scss +59 -0
  40. package/scss/design-system-bordered/atoms/radio-button.scss +55 -0
  41. package/scss/design-system-bordered/atoms/skeleton-text.scss +39 -0
  42. package/scss/design-system-bordered/atoms/skeleton.scss +46 -0
  43. package/scss/design-system-bordered/atoms/spinner.scss +102 -0
  44. package/scss/design-system-bordered/atoms/switch.scss +71 -0
  45. package/scss/design-system-bordered/atoms/tabular-text.scss +38 -0
  46. package/scss/design-system-bordered/molecules/accordion.scss +146 -0
  47. package/scss/design-system-bordered/molecules/alert.scss +52 -0
  48. package/scss/design-system-bordered/molecules/ballot.scss +110 -0
  49. package/scss/design-system-bordered/molecules/button-progress.scss +15 -0
  50. package/scss/design-system-bordered/molecules/button-toggle.scss +100 -0
  51. package/scss/design-system-bordered/molecules/field-area.scss +14 -0
  52. package/scss/{components → design-system-bordered/molecules}/field-box.scss +33 -2
  53. package/scss/design-system-bordered/molecules/field-decimal.scss +14 -0
  54. package/scss/design-system-bordered/molecules/field-file.scss +41 -0
  55. package/scss/design-system-bordered/molecules/field-list-suggestions.scss +65 -0
  56. package/scss/{components → design-system-bordered/molecules}/field-list.scss +52 -36
  57. package/scss/design-system-bordered/molecules/field-money.scss +14 -0
  58. package/scss/design-system-bordered/molecules/field-number.scss +14 -0
  59. package/scss/design-system-bordered/molecules/field-password.scss +23 -0
  60. package/scss/design-system-bordered/molecules/field-percentage.scss +14 -0
  61. package/scss/design-system-bordered/molecules/field-readonly.scss +24 -0
  62. package/scss/design-system-bordered/molecules/field-text.scss +14 -0
  63. package/scss/design-system-bordered/molecules/label-check-box.scss +72 -0
  64. package/scss/design-system-bordered/molecules/label-radio-button.scss +79 -0
  65. package/scss/design-system-bordered/molecules/label-switch.scss +71 -0
  66. package/scss/design-system-bordered/molecules/message-empty.scss +80 -0
  67. package/scss/design-system-bordered/molecules/pagination.scss +114 -0
  68. package/scss/design-system-bordered/molecules/picker-day-range.scss +109 -0
  69. package/scss/design-system-bordered/molecules/picker-day.scss +117 -0
  70. package/scss/design-system-bordered/molecules/picker-month.scss +67 -0
  71. package/scss/design-system-bordered/molecules/picker-selector-title.scss +54 -0
  72. package/scss/design-system-bordered/molecules/picker-year.scss +113 -0
  73. package/scss/design-system-bordered/molecules/slider.scss +74 -0
  74. package/scss/design-system-bordered/molecules/tabs.scss +51 -0
  75. package/scss/design-system-bordered/molecules/toolbar.scss +53 -0
  76. package/scss/design-system-bordered/organisms/bottom-sheet.scss +108 -0
  77. package/scss/design-system-bordered/organisms/card.scss +36 -0
  78. package/scss/design-system-bordered/organisms/confirmation.scss +186 -0
  79. package/scss/{components → design-system-bordered/organisms}/data-table.scss +8 -14
  80. package/scss/design-system-bordered/organisms/dropdown.scss +45 -0
  81. package/scss/design-system-bordered/organisms/field-autocomplete.scss +79 -0
  82. package/scss/design-system-bordered/organisms/field-clock.scss +62 -0
  83. package/scss/design-system-bordered/organisms/field-date-range.scss +60 -0
  84. package/scss/design-system-bordered/organisms/field-date.scss +61 -0
  85. package/scss/design-system-bordered/organisms/field-select.scss +18 -0
  86. package/scss/design-system-bordered/organisms/form-navigation.scss +46 -0
  87. package/scss/design-system-bordered/organisms/image-chooser.scss +50 -0
  88. package/scss/design-system-bordered/organisms/image-editor-modal.scss +23 -0
  89. package/scss/design-system-bordered/organisms/image-editor.scss +118 -0
  90. package/scss/design-system-bordered/organisms/modal-sheet.scss +138 -0
  91. package/scss/design-system-bordered/organisms/modal.scss +75 -0
  92. package/scss/design-system-bordered/organisms/picker-clock.scss +144 -0
  93. package/scss/design-system-bordered/organisms/picker-date-range.scss +84 -0
  94. package/scss/design-system-bordered/organisms/picker-date.scss +86 -0
  95. package/scss/design-system-bordered/organisms/snackbar.scss +93 -0
  96. package/scss/design-system-filled/_index.scss +96 -0
  97. package/scss/design-system-filled/app.scss +233 -0
  98. package/scss/design-system-filled/atoms/amount.scss +58 -0
  99. package/scss/design-system-filled/atoms/area-text.scss +100 -0
  100. package/scss/design-system-filled/atoms/avatar.scss +45 -0
  101. package/scss/design-system-filled/atoms/badge.scss +51 -0
  102. package/scss/design-system-filled/atoms/breadcrumb.scss +87 -0
  103. package/scss/design-system-filled/atoms/button-action.scss +124 -0
  104. package/scss/design-system-filled/atoms/button-option.scss +49 -0
  105. package/scss/design-system-filled/atoms/button.scss +222 -0
  106. package/scss/design-system-filled/atoms/check-box.scss +46 -0
  107. package/scss/design-system-filled/atoms/icon.scss +39 -0
  108. package/scss/design-system-filled/atoms/image.scss +37 -0
  109. package/scss/design-system-filled/atoms/input-decimal.scss +15 -0
  110. package/scss/design-system-filled/atoms/input-money.scss +15 -0
  111. package/scss/design-system-filled/atoms/input-number.scss +12 -0
  112. package/scss/design-system-filled/atoms/input-password.scss +48 -0
  113. package/scss/design-system-filled/atoms/input-percentage.scss +12 -0
  114. package/scss/design-system-filled/atoms/input-search.scss +26 -0
  115. package/scss/design-system-filled/atoms/input-text.scss +12 -0
  116. package/scss/design-system-filled/atoms/input.scss +97 -0
  117. package/scss/design-system-filled/atoms/label.scss +20 -0
  118. package/scss/design-system-filled/atoms/message-icon.scss +21 -0
  119. package/scss/design-system-filled/atoms/poster.scss +32 -0
  120. package/scss/design-system-filled/atoms/progress-bar.scss +83 -0
  121. package/scss/design-system-filled/atoms/progress-circular.scss +59 -0
  122. package/scss/design-system-filled/atoms/radio-button.scss +53 -0
  123. package/scss/design-system-filled/atoms/skeleton-text.scss +39 -0
  124. package/scss/design-system-filled/atoms/skeleton.scss +46 -0
  125. package/scss/design-system-filled/atoms/spinner.scss +102 -0
  126. package/scss/design-system-filled/atoms/switch.scss +71 -0
  127. package/scss/design-system-filled/atoms/tabular-text.scss +38 -0
  128. package/scss/design-system-filled/molecules/accordion.scss +138 -0
  129. package/scss/design-system-filled/molecules/alert.scss +52 -0
  130. package/scss/design-system-filled/molecules/ballot.scss +110 -0
  131. package/scss/design-system-filled/molecules/button-progress.scss +15 -0
  132. package/scss/design-system-filled/molecules/button-toggle.scss +100 -0
  133. package/scss/design-system-filled/molecules/field-area.scss +14 -0
  134. package/scss/design-system-filled/molecules/field-box.scss +170 -0
  135. package/scss/design-system-filled/molecules/field-decimal.scss +14 -0
  136. package/scss/design-system-filled/molecules/field-file.scss +41 -0
  137. package/scss/design-system-filled/molecules/field-list-suggestions.scss +65 -0
  138. package/scss/design-system-filled/molecules/field-list.scss +341 -0
  139. package/scss/design-system-filled/molecules/field-money.scss +14 -0
  140. package/scss/design-system-filled/molecules/field-number.scss +14 -0
  141. package/scss/design-system-filled/molecules/field-password.scss +23 -0
  142. package/scss/design-system-filled/molecules/field-percentage.scss +14 -0
  143. package/scss/design-system-filled/molecules/field-readonly.scss +24 -0
  144. package/scss/design-system-filled/molecules/field-text.scss +14 -0
  145. package/scss/design-system-filled/molecules/label-check-box.scss +72 -0
  146. package/scss/design-system-filled/molecules/label-radio-button.scss +79 -0
  147. package/scss/design-system-filled/molecules/label-switch.scss +71 -0
  148. package/scss/design-system-filled/molecules/message-empty.scss +80 -0
  149. package/scss/design-system-filled/molecules/pagination.scss +114 -0
  150. package/scss/design-system-filled/molecules/picker-day-range.scss +109 -0
  151. package/scss/design-system-filled/molecules/picker-day.scss +110 -0
  152. package/scss/design-system-filled/molecules/picker-month.scss +67 -0
  153. package/scss/design-system-filled/molecules/picker-selector-title.scss +55 -0
  154. package/scss/design-system-filled/molecules/picker-year.scss +113 -0
  155. package/scss/design-system-filled/molecules/slider.scss +74 -0
  156. package/scss/design-system-filled/molecules/tabs.scss +48 -0
  157. package/scss/design-system-filled/molecules/toolbar.scss +53 -0
  158. package/scss/design-system-filled/organisms/bottom-sheet.scss +108 -0
  159. package/scss/design-system-filled/organisms/card.scss +27 -0
  160. package/scss/design-system-filled/organisms/confirmation.scss +186 -0
  161. package/scss/design-system-filled/organisms/data-table.scss +427 -0
  162. package/scss/design-system-filled/organisms/dropdown.scss +44 -0
  163. package/scss/design-system-filled/organisms/field-autocomplete.scss +79 -0
  164. package/scss/design-system-filled/organisms/field-clock.scss +62 -0
  165. package/scss/design-system-filled/organisms/field-date-range.scss +60 -0
  166. package/scss/design-system-filled/organisms/field-date.scss +61 -0
  167. package/scss/design-system-filled/organisms/field-select.scss +18 -0
  168. package/scss/design-system-filled/organisms/form-navigation.scss +46 -0
  169. package/scss/design-system-filled/organisms/form.scss +27 -0
  170. package/scss/design-system-filled/organisms/image-chooser.scss +50 -0
  171. package/scss/design-system-filled/organisms/image-editor-modal.scss +23 -0
  172. package/scss/design-system-filled/organisms/image-editor.scss +118 -0
  173. package/scss/design-system-filled/organisms/modal-sheet.scss +138 -0
  174. package/scss/design-system-filled/organisms/modal.scss +75 -0
  175. package/scss/design-system-filled/organisms/picker-clock.scss +144 -0
  176. package/scss/design-system-filled/organisms/picker-date-range.scss +88 -0
  177. package/scss/design-system-filled/organisms/picker-date.scss +90 -0
  178. package/scss/design-system-filled/organisms/snackbar.scss +93 -0
  179. package/scss/foundations/borders.scss +14 -14
  180. package/scss/foundations/colors.scss +30 -30
  181. package/scss/foundations/elevations.scss +130 -128
  182. package/scss/foundations/flex-boxs.scss +96 -96
  183. package/scss/foundations/helpers.scss +123 -123
  184. package/scss/foundations/sizings.scss +6 -0
  185. package/scss/foundations/themes.scss +230 -230
  186. package/scss/styles.scss +0 -1
  187. package/scss/utilities/helpers.scss +124 -124
  188. package/scss/utilities/layout.scss +83 -83
  189. package/scss/utilities/texts.scss +5 -2
  190. package/scss/utilities/typographics.scss +208 -186
  191. package/scss/components.scss +0 -31
  192. /package/scss/{components → design-system-bordered/organisms}/form.scss +0 -0
@@ -0,0 +1,4783 @@
1
+ .rls-design-system-filled * {
2
+ scrollbar-width: thin;
3
+ scrollbar-color: var(--rls-app-color-500) var(--rls-app-color-200);
4
+ }
5
+ .rls-design-system-filled .rls-app__body {
6
+ --pvt-navbar-dimension: 0rem;
7
+ --pvt-navbar-width: var(--rlc-app-navbar-width, 160rem);
8
+ --pvt-navbar-width-condense: 36rem;
9
+ --pvt-navbar-snackbar: var(--pvt-navbar-width);
10
+ --pvt-navbar-padding: var(--rls-sizing-x8);
11
+ display: flex;
12
+ flex-direction: column;
13
+ padding: 0rem;
14
+ margin: 0rem;
15
+ width: var(--rls-html-max-width);
16
+ height: var(--rls-html-max-height);
17
+ overflow: hidden;
18
+ z-index: var(--rls-z-index-8);
19
+ background: var(--rls-app-color-100);
20
+ }
21
+ .rls-design-system-filled .rls-app__body--navbar-snackbar {
22
+ --rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-snackbar) / 2));
23
+ }
24
+ .rls-design-system-filled .rls-app__body--navbar-condense {
25
+ --pvt-navbar-width: var(--pvt-navbar-width-condense);
26
+ --pvt-nabvar-snackbar: var(--pvt-navbar-width-condense);
27
+ --pvt-navbar-padding: var(--rls-sizing-x8) var(--rls-sizing-x4);
28
+ }
29
+ .rls-design-system-filled .rls-app__header {
30
+ --rlc-toolbar-height: 100%;
31
+ --pvt-header-height: var(--rlc-app-header-height, var(--rls-sizing-x28));
32
+ position: relative;
33
+ width: 100%;
34
+ height: var(--pvt-header-height);
35
+ box-sizing: border-box;
36
+ z-index: var(--rls-z-index-8);
37
+ background: var(--rlc-app-header-background, var(--rls-app-color-050));
38
+ }
39
+ .rls-design-system-filled .rls-app__header + .rls-app__page,
40
+ .rls-design-system-filled .rls-app__header + .rls-app__content {
41
+ height: calc(var(--rls-html-max-height) - var(--pvt-header-height));
42
+ }
43
+ .rls-design-system-filled .rls-app__content {
44
+ position: relative;
45
+ width: 100%;
46
+ height: var(--rls-html-max-height);
47
+ margin: 0rem;
48
+ padding: 0rem;
49
+ overflow: auto;
50
+ box-sizing: border-box;
51
+ background: var(--rlc-app-content-background, var(--rls-app-color-050));
52
+ }
53
+ .rls-design-system-filled .rls-app__page {
54
+ --pvt-toolbar-height: var(
55
+ --rlc-app-page-toolbar-height,
56
+ var(--rls-sizing-x32)
57
+ );
58
+ --pvt-content-padding-top: var(
59
+ --rlc-app-page-content-padding-top,
60
+ var(--rls-sizing-x2)
61
+ );
62
+ position: relative;
63
+ display: flex;
64
+ width: 100%;
65
+ height: var(--rls-html-max-height);
66
+ margin: 0rem;
67
+ padding: 0rem;
68
+ overflow: hidden;
69
+ box-sizing: border-box;
70
+ }
71
+ .rls-design-system-filled .rls-app__page__nav {
72
+ position: relative;
73
+ width: var(--pvt-navbar-width);
74
+ height: 100%;
75
+ margin: 0rem;
76
+ padding: var(--pvt-navbar-padding);
77
+ box-sizing: border-box;
78
+ transition: all 280ms var(--rls-acceleration-curve);
79
+ }
80
+ .rls-design-system-filled .rls-app__page__nav + .rls-app__page__body {
81
+ --rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-width) / 2));
82
+ width: calc(100% - var(--pvt-navbar-width));
83
+ }
84
+ .rls-design-system-filled .rls-app__page__nav__content {
85
+ position: relative;
86
+ width: 100%;
87
+ height: 100%;
88
+ overflow-x: hidden;
89
+ overflow-y: auto;
90
+ box-sizing: border-box;
91
+ border-radius: var(--rls-sizing-x6);
92
+ background: var(--rls-app-color-950);
93
+ transition: width 280ms var(--rls-acceleration-curve);
94
+ }
95
+ .rls-design-system-filled .rls-app__page__nav__menu {
96
+ display: flex;
97
+ flex-direction: column;
98
+ row-gap: var(--rls-sizing-x8);
99
+ }
100
+ .rls-design-system-filled .rls-app__page__nav__option {
101
+ display: flex;
102
+ align-items: center;
103
+ column-gap: var(--rls-sizing-x6);
104
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
105
+ cursor: default;
106
+ border-radius: var(--rls-sizing-x6);
107
+ color: var(--rls-app-color-300);
108
+ background: var(--rls-app-color-800);
109
+ }
110
+ .rls-design-system-filled .rls-app__page__nav__option:hover {
111
+ color: var(--rls-theme-color-950);
112
+ background: var(--rls-theme-color-200);
113
+ }
114
+ .rls-design-system-filled .rls-app__page__nav__option > span {
115
+ white-space: nowrap;
116
+ overflow: hidden;
117
+ text-overflow: ellipsis;
118
+ }
119
+ .rls-design-system-filled .rls-app__page__body {
120
+ display: flex;
121
+ flex-direction: column;
122
+ width: 100%;
123
+ height: 100%;
124
+ margin: 0rem;
125
+ padding: 0rem;
126
+ overflow: hidden;
127
+ box-sizing: border-box;
128
+ transition: width 240ms var(--rls-acceleration-curve);
129
+ }
130
+ .rls-design-system-filled .rls-app__page__toolbar {
131
+ position: absolute;
132
+ top: 0rem;
133
+ display: flex;
134
+ width: 100%;
135
+ height: var(--pvt-toolbar-height);
136
+ justify-content: space-between;
137
+ align-items: center;
138
+ column-gap: var(--rls-sizing-x8);
139
+ padding: var(--rlc-app-toolbar-padding, 0rem var(--rls-sizing-x12));
140
+ box-sizing: border-box;
141
+ z-index: var(--rls-z-index-8);
142
+ background: var(--rls-app-color-100);
143
+ }
144
+ .rls-design-system-filled .rls-app__page__toolbar + .rls-app__page__content {
145
+ padding: calc(var(--pvt-toolbar-height) + var(--pvt-content-padding-top))
146
+ var(--rls-sizing-x8) 0rem var(--rls-sizing-x8);
147
+ }
148
+ .rls-design-system-filled .rls-app__page__content {
149
+ display: flex;
150
+ flex-direction: column;
151
+ width: calc(100% - var(--rls-sizing-x16));
152
+ height: 100%;
153
+ padding: var(--rls-sizing-x8) var(--rls-sizing-x8) 0rem var(--rls-sizing-x8);
154
+ overflow-y: auto;
155
+ overflow-x: hidden;
156
+ }
157
+ .rls-design-system-filled .rls-divider {
158
+ height: var(--rlc-divider-height, var(--rls-sizing-x1));
159
+ background-image: linear-gradient(
160
+ to right,
161
+ var(--rlc-divider-background, var(--rls-app-color-300)) 50%,
162
+ rgba(255, 255, 255, 0) 0%
163
+ );
164
+ background-position: bottom;
165
+ background-size: var(--rlc-divider-size, var(--rls-sizing-x4));
166
+ background-repeat: repeat-x;
167
+ }
168
+ @media screen and (max-width: 640px) {
169
+ .rls-design-system-filled .rls-app__body {
170
+ --pvt-navbar-dimension: 140rem;
171
+ --pvt-navbar-width: var(--pvt-navbar-dimension);
172
+ --pvt-navbar-width-condense: var(--pvt-navbar-dimension);
173
+ --pvt-section-navbar: 0rem;
174
+ --pvt-navbar-snackbar: 0rem;
175
+ }
176
+ .rls-design-system-filled .rls-app__body--navbar-condense {
177
+ --pvt-section-navbar: var(--pvt-navbar-dimension);
178
+ }
179
+ .rls-design-system-filled .rls-app__page {
180
+ width: calc(var(--rls-html-max-width) + var(--pvt-navbar-width));
181
+ left: calc(var(--pvt-section-navbar) * -1);
182
+ transition: left 280ms var(--rls-standard-curve);
183
+ }
184
+ }
185
+ @media screen and (max-width: 480px) {
186
+ .rls-design-system-filled .rls-app__body {
187
+ --pvt-navbar-dimension: calc(100vw - 32rem);
188
+ }
189
+ }
190
+ .rls-design-system-filled .rls-amount {
191
+ --pvt-font-size: var(--rlc-amount-font-size, inherit);
192
+ --pvt-font-weight: var(--rlc-amount-font-weight, inherit);
193
+ --pvt-decimal-width: var(--rlc-amount-decimal-width, 0.5);
194
+ --pvt-decimal-size: var(--rlc-amount-decimal-size, 0.6);
195
+ --pvt-width-separator: var(--rlc-amount-separator, 1.25);
196
+ --rlc-tabular-text-font-size: var(--pvt-font-size);
197
+ --rlc-tabular-text-font-weight: var(--pvt-font-weight);
198
+ --rlc-tabular-text-char-width: calc(
199
+ var(--pvt-font-size) / var(--pvt-width-separator)
200
+ );
201
+ display: flex;
202
+ width: var(--rlc-amount-width, auto);
203
+ height: var(--rlc-amount-height, auto);
204
+ justify-content: var(--rlc-amount-text-align, flex-start);
205
+ align-items: var(--rlc-amount-align-items, initial);
206
+ column-gap: var(--rls-sizing-x2);
207
+ font-size: var(--pvt-font-size);
208
+ font-weight: var(--pvt-font-weight);
209
+ color: var(--rlc-amount-font-color, inherit);
210
+ }
211
+ .rls-design-system-filled .rls-amount[rls-theme] {
212
+ color: var(--rls-theme-color-500);
213
+ }
214
+ .rls-design-system-filled .rls-amount__symbol {
215
+ display: block;
216
+ line-height: calc(var(--pvt-font-size) + 1rem);
217
+ height: calc(var(--pvt-font-size) + 1rem);
218
+ }
219
+ .rls-design-system-filled .rls-amount__content {
220
+ display: flex;
221
+ justify-content: var(--rlc-amount-text-align, flex-start);
222
+ align-items: var(--rlc-amount-align-items, center);
223
+ }
224
+ .rls-design-system-filled .rls-amount__decimal {
225
+ --rlc-tabular-text-char-width: calc(
226
+ var(--pvt-font-size) * var(--pvt-decimal-width)
227
+ );
228
+ --rlc-tabular-text-font-size: calc(
229
+ var(--pvt-font-size) * var(--pvt-decimal-size)
230
+ );
231
+ align-self: flex-end;
232
+ }
233
+ .rls-design-system-filled .rls-area-text {
234
+ --pvt-font-color: var(--rlc-area-text-font-color, var(--rls-app-color-900));
235
+ --pvt-font-size: var(--rlc-area-text-font-size, var(--rls-input-font-size));
236
+ --pvt-font-weight: var(
237
+ --rlc-area-text-font-weight,
238
+ var(--rls-input-font-weight)
239
+ );
240
+ --pvt-letter-spacing: var(
241
+ --rlc-area-text-letter-spacing,
242
+ var(--rls-input-letter-spacing)
243
+ );
244
+ --pvt-line-height: var(--rlc-area-text-line-height, --rls-input-line-height);
245
+ --pvt-min-height: var(
246
+ --rlc-area-text-min-height,
247
+ var(--rls-input-line-height)
248
+ );
249
+ --pvt-padding: var(--rlc-area-text-padding, var(--rls-sizing-x3) 0rem);
250
+ --pvt-text-align: var(--rlc-area-text-text-align, left);
251
+ --pvt-value-font-color: var(--pvt-font-color);
252
+ --pvt-value-opacity: 1;
253
+ --pvt-component-font-color: transparent;
254
+ position: relative;
255
+ width: var(--rlc-area-text-width, 100%);
256
+ }
257
+ .rls-design-system-filled .rls-area-text--focused {
258
+ --pvt-component-font-color: var(--pvt-font-color);
259
+ --pvt-value-font-color: transparent;
260
+ }
261
+ .rls-design-system-filled .rls-area-text--disabled {
262
+ --pvt-value-opacity: 0.5;
263
+ }
264
+ .rls-design-system-filled .rls-area-text__component {
265
+ position: relative;
266
+ width: 100%;
267
+ min-height: var(--pvt-min-height);
268
+ cursor: text;
269
+ border: none;
270
+ outline: none;
271
+ padding: 0rem;
272
+ background: rgba(0, 0, 0, 0);
273
+ resize: none;
274
+ overflow: hidden;
275
+ color: var(--pvt-component-font-color);
276
+ font-weight: var(--rls-font-weight-medium);
277
+ font-size: var(--pvt-font-size);
278
+ line-height: var(--pvt-line-height);
279
+ text-align: var(--pvt-text-align);
280
+ letter-spacing: var(--pvt-letter-spacing);
281
+ }
282
+ .rls-design-system-filled .rls-area-text__component::placeholder {
283
+ color: var(--rls-app-color-400);
284
+ }
285
+ .rls-design-system-filled .rls-area-text__component::selection {
286
+ background: var(--rls-theme-color-700);
287
+ color: var(--rls-app-color-050);
288
+ }
289
+ .rls-design-system-filled .rls-area-text__component:read-only {
290
+ pointer-events: none;
291
+ }
292
+ .rls-design-system-filled .rls-area-text__component:disabled {
293
+ opacity: 0.5;
294
+ }
295
+ .rls-design-system-filled .rls-area-text__value {
296
+ position: absolute;
297
+ top: 0rem;
298
+ left: 0rem;
299
+ width: 100%;
300
+ min-height: var(--pvt-min-height);
301
+ background: rgba(0, 0, 0, 0);
302
+ pointer-events: none;
303
+ overflow: hidden;
304
+ white-space: pre-wrap;
305
+ word-break: break-word;
306
+ opacity: var(--pvt-value-opacity);
307
+ color: var(--pvt-value-font-color);
308
+ font-weight: var(--pvt-font-weight);
309
+ font-size: var(--pvt-font-size);
310
+ line-height: var(--pvt-line-height);
311
+ text-align: var(--pvt-text-align);
312
+ letter-spacing: var(--pvt-letter-spacing);
313
+ }
314
+ .rls-design-system-filled .rls-avatar {
315
+ --rlc-image-width: var(--rlc-avatar-width);
316
+ --rlc-image-height: var(--rlc-avatar-height);
317
+ position: relative;
318
+ display: flex;
319
+ flex: 0 0 auto;
320
+ width: var(--rlc-avatar-width, var(--rls-sizing-x24));
321
+ height: var(--rlc-avatar-height, var(--rls-sizing-x24));
322
+ justify-content: center;
323
+ align-items: center;
324
+ border-radius: var(--rlc-avatar-radius, var(--rls-sizing-x6));
325
+ font-size: var(--rlc-avatar-font-size, var(--rls-title-font-size));
326
+ color: var(--rlc-avatar-color, var(--rls-app-color-950));
327
+ background: var(--rlc-avatar-background, var(--rls-theme-color-200));
328
+ overflow: hidden;
329
+ }
330
+ .rls-design-system-filled .rls-avatar--skeleton {
331
+ background: var(--rls-theme-color-200);
332
+ }
333
+ .rls-design-system-filled .rls-avatar--skeleton > * {
334
+ display: none;
335
+ }
336
+ .rls-design-system-filled .rls-avatar--rounded {
337
+ border-radius: 50%;
338
+ }
339
+ .rls-design-system-filled .rls-avatar > span {
340
+ font-size: inherit;
341
+ }
342
+ .rls-design-system-filled .rls-avatar > img {
343
+ width: 100%;
344
+ object-fit: cover;
345
+ }
346
+ .rls-design-system-filled .rls-badge {
347
+ --pvt-dimension: var(--rlc-badge-dimension, var(--rls-sizing-x12));
348
+ --pvt-font-color: var(--rls-app-color-800);
349
+ --pvt-background: var(--rls-app-color-200);
350
+ --pvt-contrasted-font-color: var(--rls-app-color-800);
351
+ --pvt-contrasted-background: var(--rls-app-color-200);
352
+ position: relative;
353
+ display: inline-block;
354
+ width: auto;
355
+ min-width: var(--pvt-dimension);
356
+ height: var(--pvt-dimension);
357
+ line-height: var(--pvt-dimension);
358
+ padding: var(--rlc-badge-padding, 0rem var(--rls-sizing-x2));
359
+ box-sizing: var(--rlc-badge-box-sizing, border-box);
360
+ font-size: var(--rlc-badge-font-size, var(--rls-caption-font-size));
361
+ font-weight: var(--rlc-badge-font-weight, var(--rls-caption-font-weight));
362
+ text-align: center;
363
+ letter-spacing: var(
364
+ --rlc-badge-letter-spacing,
365
+ var(--rls-caption-letter-spacing)
366
+ );
367
+ color: var(--pvt-font-color);
368
+ background: var(--pvt-background);
369
+ border-radius: var(--rlc-badge-radius, var(--rls-sizing-x2));
370
+ }
371
+ .rls-design-system-filled .rls-badge--contrasted {
372
+ color: var(--pvt-contrasted-font-color);
373
+ background: var(--pvt-contrasted-background);
374
+ }
375
+ .rls-design-system-filled .rls-badge[rls-theme] {
376
+ --pvt-font-color: var(--rls-theme-color-800);
377
+ --pvt-background: var(--rls-theme-color-100);
378
+ --pvt-contrasted-font-color: var(--rls-theme-color-800);
379
+ --pvt-contrasted-background: var(--rls-theme-color-100);
380
+ }
381
+ .rls-design-system-filled .rls-badge > span {
382
+ font-size: inherit;
383
+ letter-spacing: inherit;
384
+ line-height: inherit;
385
+ }
386
+ .rls-design-system-filled .rls-breadcrumb {
387
+ --pvt-height: var(--rlc-breadcrumb-height, var(--rls-sizing-x18));
388
+ --pvt-link-font-color: var(--rls-app-color-600);
389
+ --pvt-label-font-size: var(
390
+ --rlc-breadcrumb-font-size,
391
+ var(--rls-body-font-size)
392
+ );
393
+ --pvt-label-font-weight: var(--rlc-breadcrumb-font-weight, inherit);
394
+ --pvt-label-letter-spacing: var(
395
+ --rlc-breadcrumb-letter-spacing,
396
+ var(--rls-body-letter-spacing)
397
+ );
398
+ display: -webkit-box;
399
+ width: 100%;
400
+ height: var(--pvt-height);
401
+ line-height: var(--pvt-height);
402
+ padding: var(--rlc-breadcrumb-padding, 0rem var(--rls-sizing-x8));
403
+ box-sizing: border-box;
404
+ user-select: none;
405
+ overflow-x: var(--rlc-breadcrumb-overflow-x, auto);
406
+ overflow-y: hidden;
407
+ color: var(--rls-app-color-600);
408
+ font-weight: var(--rls-font-weight-medium);
409
+ }
410
+ .rls-design-system-filled .rls-breadcrumb::-webkit-scrollbar {
411
+ width: 0rem;
412
+ height: 0rem;
413
+ }
414
+ .rls-design-system-filled .rls-breadcrumb__label {
415
+ display: block;
416
+ height: inherit;
417
+ color: inherit;
418
+ line-height: inherit;
419
+ font-weight: var(--pvt-label-font-weight);
420
+ font-size: var(--pvt-label-font-size);
421
+ letter-spacing: var(--pvt-label-letter-spacing);
422
+ }
423
+ .rls-design-system-filled .rls-breadcrumb__label:first-child::before {
424
+ display: none;
425
+ }
426
+ .rls-design-system-filled .rls-breadcrumb__label::before {
427
+ font-family: -rolster-icons;
428
+ display: inline-block;
429
+ content: '';
430
+ margin: 0rem var(--rls-sizing-x2);
431
+ cursor: default;
432
+ color: inherit;
433
+ font-size: var(--rls-sizing-x12);
434
+ font-weight: normal;
435
+ font-style: normal;
436
+ letter-spacing: normal;
437
+ vertical-align: top;
438
+ -webkit-font-smoothing: antialiased;
439
+ }
440
+ .rls-design-system-filled .rls-breadcrumb__label__a {
441
+ display: inline-block;
442
+ }
443
+ .rls-design-system-filled .rls-breadcrumb__label__a[rls-theme] {
444
+ color: var(--rls-theme-color-500);
445
+ }
446
+ .rls-design-system-filled .rls-breadcrumb__label__a--actionable {
447
+ cursor: pointer;
448
+ }
449
+ .rls-design-system-filled .rls-breadcrumb__label__a--actionable:hover {
450
+ text-decoration: underline;
451
+ }
452
+ .rls-design-system-filled .rls-button {
453
+ --pvt-button-content-background: none;
454
+ --pvt-button-content-border: none;
455
+ --pvt-button-content-box-shadow: var(--rlc-button-content-box-shadow, none);
456
+ --pvt-button-content-font-color: var(--rls-theme-color-500);
457
+ --pvt-button-content-animation: none;
458
+ --pvt-button-content-visibility: hidden;
459
+ --pvt-button-ripple-background: var(--rls-theme-color-700);
460
+ --pvt-ghost-background: var(--rls-theme-color-100);
461
+ --pvt-ghost-font-color: var(--rls-theme-color-950);
462
+ --pvt-ghost-border: none;
463
+ --pvt-outline-background: var(--rls-theme-color-100);
464
+ --pvt-outline-font-color: var(--rls-theme-color-950);
465
+ --pvt-outline-border: none;
466
+ --pvt-flat-background: var(--rls-theme-color-100);
467
+ --pvt-flat-font-color: var(--rls-theme-color-950);
468
+ --pvt-flat-border: none;
469
+ --pvt-stroked-background: var(--rls-theme-color-100);
470
+ --pvt-stroked-font-color: var(--rls-theme-color-950);
471
+ --pvt-stroked-border: none;
472
+ --pvt-classic-background: var(--rls-theme-color-300);
473
+ --pvt-classic-font-color: var(--rls-theme-color-950);
474
+ --pvt-classic-border: none;
475
+ --pvt-raised-background: var(--rls-theme-color-300);
476
+ --pvt-raised-font-color: var(--rls-theme-color-950);
477
+ --pvt-raised-border: none;
478
+ --pvt-gradient-background: var(--rls-theme-color-300);
479
+ --pvt-gradient-font-color: var(--rls-theme-color-950);
480
+ --pvt-gradient-border: none;
481
+ position: relative;
482
+ padding: 0rem;
483
+ width: var(--rlc-button-width, auto);
484
+ outline: none;
485
+ background: rgba(0, 0, 0, 0);
486
+ }
487
+ .rls-design-system-filled .rls-button:not(:disabled):not(:active) {
488
+ --pvt-button-content-animation: ripple-squarecenter 1000ms
489
+ var(--rls-standard-curve);
490
+ }
491
+ .rls-design-system-filled .rls-button:not(:disabled):focus {
492
+ --pvt-button-content-visibility: visible;
493
+ }
494
+ .rls-design-system-filled .rls-button:not(:disabled):hover {
495
+ --pvt-ghost-background: var(--rls-theme-color-700);
496
+ --pvt-ghost-font-color: var(--rls-theme-color-050);
497
+ --pvt-ghost-border: none;
498
+ --pvt-outline-background: var(--rls-theme-color-700);
499
+ --pvt-outline-font-color: var(--rls-theme-color-050);
500
+ --pvt-outline-border: none;
501
+ --pvt-stroked-background: var(--rls-theme-color-700);
502
+ --pvt-stroked-font-color: var(--rls-theme-color-050);
503
+ --pvt-stroked-border: none;
504
+ --pvt-classic-background: var(--rls-theme-color-700);
505
+ --pvt-classic-font-color: var(--rls-theme-color-050);
506
+ --pvt-classic-border: none;
507
+ --pvt-flat-background: var(--rls-theme-color-700);
508
+ --pvt-flat-font-color: var(--rls-theme-color-050);
509
+ --pvt-flat-border: none;
510
+ --pvt-raised-background: var(--rls-theme-color-700);
511
+ --pvt-raised-font-color: var(--rls-theme-color-050);
512
+ --pvt-raised-border: none;
513
+ --pvt-gradient-background: var(--rls-theme-color-700);
514
+ --pvt-gradient-font-color: var(--rls-theme-color-050);
515
+ --pvt-gradient-border: none;
516
+ }
517
+ .rls-design-system-filled .rls-button:disabled {
518
+ --pvt-button-content-box-shadow: none;
519
+ opacity: 0.5;
520
+ pointer-events: none;
521
+ }
522
+ .rls-design-system-filled .rls-button__content {
523
+ display: flex;
524
+ justify-content: center;
525
+ align-items: center;
526
+ overflow: hidden;
527
+ column-gap: var(--rlc-button-content-gap, var(--rls-sizing-x2));
528
+ line-height: var(--rls-sizing-x22);
529
+ height: var(--rls-sizing-x22);
530
+ padding: var(--rlc-button-content-padding, 0rem var(--rls-sizing-x6));
531
+ box-sizing: border-box;
532
+ border-radius: var(--rlc-button-content-radius, var(--rls-sizing-x4));
533
+ box-shadow: var(--pvt-button-content-box-shadow);
534
+ color: var(--pvt-button-content-font-color);
535
+ border: var(--pvt-button-content-border);
536
+ background: var(--pvt-button-content-background);
537
+ pointer-events: none;
538
+ }
539
+ .rls-design-system-filled .rls-button__content::before {
540
+ position: absolute;
541
+ display: block;
542
+ content: '';
543
+ top: 50%;
544
+ left: 50%;
545
+ padding-top: calc(100% - var(--rls-sizing-x8));
546
+ padding-left: calc(100% - var(--rls-sizing-x8));
547
+ margin-top: calc(-50% + var(--rls-sizing-x4));
548
+ margin-left: calc(-50% + var(--rls-sizing-x4));
549
+ border-radius: 50%;
550
+ opacity: 0.26;
551
+ transform: scale(0);
552
+ z-index: var(--rls-z-index-2);
553
+ background: var(--pvt-button-ripple-background);
554
+ animation: var(--pvt-button-content-animation);
555
+ visibility: var(--pvt-button-content-visibility);
556
+ }
557
+ .rls-design-system-filled .rls-button__content--ghost {
558
+ --rlc-spinner-color: var(--pvt-ghost-font-color);
559
+ --pvt-button-content-font-color: var(--pvt-ghost-font-color);
560
+ --pvt-button-content-background: var(--pvt-ghost-background);
561
+ --pvt-button-content-border: var(--pvt-ghost-border);
562
+ }
563
+ .rls-design-system-filled .rls-button__content--outline {
564
+ --rlc-spinner-color: var(--pvt-outline-font-color);
565
+ --pvt-button-content-font-color: var(--pvt-outline-font-color);
566
+ --pvt-button-content-background: var(--pvt-outline-background);
567
+ --pvt-button-content-border: var(--pvt-outline-border);
568
+ }
569
+ .rls-design-system-filled .rls-button__content--stroked {
570
+ --rlc-spinner-color: var(--pvt-stroked-font-color);
571
+ --pvt-button-content-font-color: var(--pvt-stroked-font-color);
572
+ --pvt-button-content-background: var(--pvt-stroked-background);
573
+ --pvt-button-content-border: var(--pvt-stroked-border);
574
+ }
575
+ .rls-design-system-filled .rls-button__content--classic {
576
+ --rlc-spinner-color: var(--pvt-classic-font-color);
577
+ --pvt-button-content-font-color: var(--pvt-classic-font-color);
578
+ --pvt-button-content-background: var(--pvt-classic-background);
579
+ --pvt-button-content-border: var(--pvt-classic-border);
580
+ --pvt-button-ripple-background: var(--rls-theme-font-100);
581
+ }
582
+ .rls-design-system-filled .rls-button__content--flat {
583
+ --rlc-spinner-color: var(--pvt-flat-font-color);
584
+ --pvt-button-content-font-color: var(--pvt-flat-font-color);
585
+ --pvt-button-content-background: var(--pvt-flat-background);
586
+ --pvt-button-content-border: var(--pvt-flat-border);
587
+ --pvt-button-ripple-background: var(--rls-theme-font-100);
588
+ }
589
+ .rls-design-system-filled .rls-button__content--raised {
590
+ --rlc-spinner-color: var(--pvt-raised-font-color);
591
+ --pvt-button-content-font-color: var(--pvt-raised-font-color);
592
+ --pvt-button-content-background: var(--pvt-raised-background);
593
+ --pvt-button-content-border: var(--pvt-raised-border);
594
+ --pvt-button-ripple-background: var(--rls-theme-font-900);
595
+ }
596
+ .rls-design-system-filled .rls-button__content--gradient {
597
+ --rlc-spinner-color: var(--pvt-gradient-font-color);
598
+ --pvt-button-content-font-color: var(--pvt-gradient-font-color);
599
+ --pvt-button-content-background: var(--pvt-gradient-background);
600
+ --pvt-button-content-border: var(--pvt-gradient-border);
601
+ --pvt-button-ripple-background: var(--rls-theme-font-900);
602
+ }
603
+ .rls-design-system-filled .rls-button__description {
604
+ display: flex;
605
+ width: auto;
606
+ align-items: center;
607
+ column-gap: var(--rlc-button-description-gap, var(--rls-sizing-x2));
608
+ padding: 0rem var(--rls-sizing-x2);
609
+ line-height: initial;
610
+ font-size: var(--rls-button-font-size);
611
+ letter-spacing: var(--rls-button-letter-spacing);
612
+ font-weight: var(--rlc-button-font-weight, var(--rls-font-weight-medium));
613
+ text-transform: var(--rlc-button-label-text-transform, uppercase);
614
+ text-overflow: ellipsis;
615
+ overflow: hidden;
616
+ white-space: nowrap;
617
+ }
618
+ .rls-design-system-filled .rls-button__description a {
619
+ text-decoration: none;
620
+ color: inherit;
621
+ }
622
+ @keyframes ripple-squarecenter {
623
+ 0% {
624
+ transform: scale(0);
625
+ }
626
+ 20% {
627
+ transform: scale(1);
628
+ }
629
+ 100% {
630
+ opacity: 0;
631
+ transform: scale(1);
632
+ }
633
+ }
634
+ .rls-design-system-filled .rls-button-action {
635
+ --pvt-ripple-dimension: var(
636
+ --rlc-action-ripple-dimension,
637
+ var(--rls-sizing-x18)
638
+ );
639
+ --pvt-ripple-position: var(--rlc-action-ripple-position, -9rem);
640
+ --pvt-ripple-color: var(--rlc-action-ripple-color, var(--rls-app-color-600));
641
+ --pvt-tooltip-transition-delay: 0ms;
642
+ --pvt-tooltip-opacity: 0;
643
+ position: relative;
644
+ width: var(--rls-sizing-x16);
645
+ height: var(--rls-sizing-x16);
646
+ border: none;
647
+ outline: none;
648
+ padding: var(--rls-sizing-x2);
649
+ box-sizing: border-box;
650
+ user-select: none;
651
+ cursor: default;
652
+ border-radius: var(--rlc-action-radius, 50%);
653
+ color: var(--rlc-action-color, var(--rls-app-color-600));
654
+ background: var(--rlc-action-background, transparent);
655
+ }
656
+ .rls-design-system-filled .rls-button-action::before {
657
+ position: absolute;
658
+ display: block;
659
+ content: '';
660
+ top: 50%;
661
+ left: 50%;
662
+ opacity: 0.32;
663
+ visibility: hidden;
664
+ border-radius: 50%;
665
+ transform: scale(0);
666
+ background: var(--pvt-ripple-color);
667
+ padding-top: calc(120% - var(--rls-sizing-x4));
668
+ padding-left: calc(120% - var(--rls-sizing-x4));
669
+ margin-top: calc(-60% + var(--rls-sizing-x2));
670
+ margin-left: calc(-60% + var(--rls-sizing-x2));
671
+ }
672
+ .rls-design-system-filled .rls-button-action:not(:active)::before {
673
+ animation: ripple-button-action 1000ms var(--rls-standard-curve);
674
+ }
675
+ .rls-design-system-filled .rls-button-action:focus::before {
676
+ visibility: visible;
677
+ }
678
+ .rls-design-system-filled .rls-button-action::after {
679
+ position: absolute;
680
+ content: '';
681
+ top: 50%;
682
+ left: 50%;
683
+ opacity: 0.24;
684
+ width: var(--pvt-ripple-dimension);
685
+ height: var(--pvt-ripple-dimension);
686
+ margin-top: var(--pvt-ripple-position);
687
+ margin-left: var(--pvt-ripple-position);
688
+ border-radius: 50%;
689
+ background: var(--pvt-ripple-color);
690
+ transform: scale(0);
691
+ transition: transform 160ms 0ms var(--rls-sharp-curve);
692
+ }
693
+ .rls-design-system-filled .rls-button-action:not(:disabled):hover {
694
+ --pvt-tooltip-opacity: 1;
695
+ --pvt-tooltip-transition-delay: 480ms;
696
+ }
697
+ .rls-design-system-filled .rls-button-action:not(:disabled):hover::after {
698
+ transform: scale(1);
699
+ }
700
+ .rls-design-system-filled .rls-button-action:disabled {
701
+ opacity: 0.5;
702
+ pointer-events: none;
703
+ }
704
+ .rls-design-system-filled .rls-button-action__content {
705
+ pointer-events: none;
706
+ }
707
+ .rls-design-system-filled .rls-button-action__tooltip {
708
+ position: absolute;
709
+ top: calc(100% + var(--rls-sizing-x6));
710
+ left: 50%;
711
+ width: auto;
712
+ float: initial;
713
+ padding: var(--rls-sizing-x4);
714
+ border-radius: var(--rls-sizing-x2);
715
+ white-space: nowrap;
716
+ pointer-events: none;
717
+ transform: translateX(-50%);
718
+ background: var(--rls-app-color-900);
719
+ color: var(--rls-app-color-050);
720
+ transition: opacity 200ms 0ms var(--rls-deceleration-curve);
721
+ opacity: var(--pvt-tooltip-opacity);
722
+ transition-delay: var(--pvt-tooltip-transition-delay);
723
+ }
724
+ @keyframes ripple-button-action {
725
+ 0% {
726
+ transform: scale(0);
727
+ }
728
+ 20% {
729
+ transform: scale(1);
730
+ }
731
+ 100% {
732
+ opacity: 0;
733
+ transform: scale(1);
734
+ }
735
+ }
736
+ .rls-design-system-filled .rls-button-option {
737
+ --pvt-span-color: var(--rls-app-color-800);
738
+ --pvt-background-hover: var(--rls-theme-color-100);
739
+ --rlc-icon-color: var(--rls-app-color-600);
740
+ display: flex;
741
+ width: var(--rlc-button-option, auto);
742
+ flex-direction: column;
743
+ row-gap: var(--rls-sizing-x3);
744
+ align-items: center;
745
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x3);
746
+ box-sizing: border-box;
747
+ outline: none;
748
+ background: rgba(0, 0, 0, 0);
749
+ border: var(--rls-app-border-1-300);
750
+ border-radius: var(--rls-sizing-x4);
751
+ overflow: hidden;
752
+ }
753
+ .rls-design-system-filled .rls-button-option:not(:disabled):hover {
754
+ background: var(--pvt-background-hover);
755
+ }
756
+ .rls-design-system-filled .rls-button-option:disabled {
757
+ opacity: 0.5;
758
+ }
759
+ .rls-design-system-filled .rls-button-option--checked {
760
+ --pvt-background-hover: var(--rls-theme-color-800);
761
+ --pvt-span-color: var(--rls-theme-color-050);
762
+ --rlc-icon-color: var(--rls-theme-color-050);
763
+ background: var(--rls-theme-gradient-500);
764
+ border: var(--rls-theme-border-1-500);
765
+ }
766
+ .rls-design-system-filled .rls-button-option > span {
767
+ font-size: var(--rls-span-font-size);
768
+ letter-spacing: var(--rls-span-letter-spacing);
769
+ color: var(--pvt-span-color);
770
+ font-weight: var(--rls-font-weight-medium);
771
+ }
772
+ .rls-design-system-filled .rls-checkbox {
773
+ --rlc-icon-color: transparent;
774
+ --pvt-dimension: var(--rlc-checkbox-dimension, var(--rls-sizing-x12));
775
+ --rlc-icon-dimension: calc(var(--pvt-dimension) - 2rem);
776
+ --pvt-component-background: transparent;
777
+ position: relative;
778
+ display: flex;
779
+ width: var(--pvt-dimension);
780
+ height: var(--pvt-dimension);
781
+ justify-content: center;
782
+ align-items: center;
783
+ box-sizing: border-box;
784
+ outline: none;
785
+ border-radius: var(--rls-sizing-x3);
786
+ background: var(--rls-app-color-300);
787
+ transition: all 160ms 0ms var(--rls-standard-curve);
788
+ }
789
+ .rls-design-system-filled .rls-checkbox:hover {
790
+ cursor: var(--rlc-checkbox-cursor, initial);
791
+ }
792
+ .rls-design-system-filled .rls-checkbox--checked {
793
+ --rlc-icon-color: var(--rls-app-color-050);
794
+ --pvt-component-background: var(--rls-theme-color-200);
795
+ background: var(--rls-theme-color-500);
796
+ }
797
+ .rls-design-system-filled .rls-checkbox--disabled {
798
+ opacity: 0.5;
799
+ pointer-events: none;
800
+ background: var(--rls-app-color-300);
801
+ }
802
+ .rls-design-system-filled .rls-checkbox--disabled.rls-checkbox--checked {
803
+ --rlc-icon-color: var(--rls-app-color-500);
804
+ }
805
+ .rls-design-system-filled .rls-icon {
806
+ --pvt-icon-dimension: var(--rlc-icon-dimension, var(--rls-sizing-x12));
807
+ --pvt-icon-display: block;
808
+ --pvt-icon-color: var(--rlc-icon-color);
809
+ position: relative;
810
+ flex: 0 0 auto;
811
+ font-size: var(--pvt-icon-dimension);
812
+ width: var(--pvt-icon-dimension);
813
+ height: var(--pvt-icon-dimension);
814
+ line-height: var(--pvt-icon-dimension);
815
+ }
816
+ .rls-design-system-filled .rls-icon--skeleton {
817
+ --pvt-icon-display: none;
818
+ background: var(--rls-theme-color-300);
819
+ border-radius: var(--rls-sizing-x2);
820
+ }
821
+ .rls-design-system-filled .rls-icon[rls-theme] {
822
+ --pvt-icon-color: var(--rls-theme-color-500);
823
+ }
824
+ .rls-design-system-filled .rls-icon > i {
825
+ display: var(--pvt-icon-display);
826
+ color: var(--pvt-icon-color, inherit);
827
+ width: 100%;
828
+ height: 100%;
829
+ line-height: inherit;
830
+ font-size: inherit;
831
+ }
832
+ .rls-design-system-filled .rls-image {
833
+ --pvt-background: transparent;
834
+ --pvt-width: var(--rlc-image-width, 100%);
835
+ --pvt-height: var(--rlc-image-height, 100%);
836
+ --pvt-img-display: none;
837
+ --rlc-skeleton-width: var(--pvt-width);
838
+ --rlc-skeleton-height: var(--pvt-height);
839
+ width: var(--pvt-width);
840
+ height: var(--pvt-height);
841
+ overflow: hidden;
842
+ }
843
+ .rls-design-system-filled .rls-image--complet {
844
+ --pvt-img-display: block;
845
+ background: var(--pvt-background);
846
+ }
847
+ .rls-design-system-filled .rls-image[rls-theme] {
848
+ --pvt-background: var(--rls-theme-color-600);
849
+ }
850
+ .rls-design-system-filled .rls-image > img {
851
+ display: var(--pvt-img-display);
852
+ width: var(--pvt-width);
853
+ height: var(--pvt-height);
854
+ content-visibility: auto;
855
+ }
856
+ .rls-design-system-filled .rls-input {
857
+ --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));
858
+ --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
859
+ --pvt-letter-spacing: var(
860
+ --rlc-input-letter-spacing,
861
+ var(--rls-input-letter-spacing)
862
+ );
863
+ --pvt-height: var(--rlc-input-height, var(--rls-sizing-x12));
864
+ --pvt-text-align: var(--rlc-input-text-align, left);
865
+ --pvt-value-font-color: var(--pvt-font-color);
866
+ --pvt-value-opacity: 1;
867
+ --pvt-component-font-color: transparent;
868
+ --rlc-amount-height: var(--pvt-height);
869
+ --rlc-amount-align-items: center;
870
+ position: relative;
871
+ width: var(--rlc-input-width, 100%);
872
+ }
873
+ .rls-design-system-filled .rls-input--focused {
874
+ --pvt-component-font-color: var(--pvt-font-color);
875
+ --pvt-value-font-color: transparent;
876
+ }
877
+ .rls-design-system-filled .rls-input--disabled {
878
+ --pvt-value-opacity: 0.5;
879
+ }
880
+ .rls-design-system-filled .rls-input__component {
881
+ position: relative;
882
+ width: 100%;
883
+ height: var(--pvt-height);
884
+ line-height: var(--pvt-height);
885
+ padding: 0rem;
886
+ cursor: text;
887
+ border: none;
888
+ outline: none;
889
+ background: rgba(0, 0, 0, 0);
890
+ color: var(--pvt-component-font-color);
891
+ font-weight: var(--rls-font-weight-medium);
892
+ font-size: var(--pvt-font-size);
893
+ text-align: var(--pvt-text-align);
894
+ letter-spacing: var(--pvt-letter-spacing);
895
+ }
896
+ .rls-design-system-filled .rls-input__component::-webkit-outer-spin-button,
897
+ .rls-design-system-filled .rls-input__component::-webkit-inner-spin-button {
898
+ margin: 0rem;
899
+ -webkit-appearance: none;
900
+ }
901
+ .rls-design-system-filled .rls-input__component::placeholder {
902
+ color: var(--rls-app-color-400);
903
+ }
904
+ .rls-design-system-filled .rls-input__component::selection {
905
+ background: var(--rls-theme-color-700);
906
+ color: var(--rls-app-color-050);
907
+ }
908
+ .rls-design-system-filled .rls-input__component:read-only {
909
+ pointer-events: none;
910
+ }
911
+ .rls-design-system-filled .rls-input__component:disabled {
912
+ opacity: 0.5;
913
+ }
914
+ .rls-design-system-filled .rls-input__value {
915
+ position: absolute;
916
+ top: 0rem;
917
+ left: 0rem;
918
+ width: 100%;
919
+ height: var(--pvt-height);
920
+ line-height: var(--pvt-height);
921
+ background: rgba(0, 0, 0, 0);
922
+ pointer-events: none;
923
+ overflow: hidden;
924
+ white-space: nowrap;
925
+ opacity: var(--pvt-value-opacity);
926
+ color: var(--pvt-value-font-color);
927
+ font-weight: var(--rls-font-weight-medium);
928
+ font-size: var(--pvt-font-size);
929
+ text-align: var(--pvt-text-align);
930
+ letter-spacing: var(--pvt-letter-spacing);
931
+ }
932
+ .rls-design-system-filled .rls-input-decimal {
933
+ --rlc-tabular-text-font-size: var(--rls-input-font-size);
934
+ --rlc-tabular-text-char-width: 5.25rem;
935
+ position: relative;
936
+ width: 100%;
937
+ box-sizing: border-box;
938
+ }
939
+ .rls-design-system-filled .rls-input-money {
940
+ --rlc-tabular-text-font-size: var(--rls-input-font-size);
941
+ --rlc-tabular-text-char-width: 5.25rem;
942
+ position: relative;
943
+ width: 100%;
944
+ box-sizing: border-box;
945
+ }
946
+ .rls-design-system-filled .rls-input-number {
947
+ position: relative;
948
+ width: 100%;
949
+ box-sizing: border-box;
950
+ }
951
+ .rls-design-system-filled .rls-input-password {
952
+ position: relative;
953
+ width: var(--rlc-input-password-width, 100%);
954
+ box-sizing: border-box;
955
+ }
956
+ .rls-design-system-filled .rls-input-password__component {
957
+ position: relative;
958
+ float: left;
959
+ width: 100%;
960
+ height: var(--rls-sizing-x12);
961
+ line-height: var(--rls-sizing-x12);
962
+ padding: 0rem;
963
+ cursor: text;
964
+ border: none;
965
+ outline: none;
966
+ background: rgba(0, 0, 0, 0);
967
+ color: var(--rlc-input-font-color);
968
+ font-weight: var(--rls-font-weight-medium);
969
+ font-size: var(--rls-input-font-size);
970
+ letter-spacing: var(--rls-input-letter-spacing);
971
+ }
972
+ .rls-design-system-filled
973
+ .rls-input-password__component::-webkit-outer-spin-button,
974
+ .rls-design-system-filled
975
+ .rls-input-password__component::-webkit-inner-spin-button {
976
+ margin: 0rem;
977
+ -webkit-appearance: none;
978
+ }
979
+ .rls-design-system-filled .rls-input-password__component::placeholder {
980
+ color: var(--rls-app-color-400);
981
+ }
982
+ .rls-design-system-filled .rls-input-password__component::selection {
983
+ background: var(--rls-theme-color-700);
984
+ color: var(--rls-app-color-050);
985
+ }
986
+ .rls-design-system-filled .rls-input-password__component:disabled {
987
+ opacity: 0.5;
988
+ }
989
+ .rls-design-system-filled .rls-input-percentage {
990
+ position: relative;
991
+ width: 100%;
992
+ box-sizing: border-box;
993
+ }
994
+ .rls-design-system-filled .rls-input-search {
995
+ position: relative;
996
+ display: flex;
997
+ align-items: center;
998
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
999
+ box-sizing: border-box;
1000
+ background: var(--rlc-input-search-background, var(--rls-app-color-050));
1001
+ border-radius: var(--rls-sizing-x6);
1002
+ box-shadow: var(--rls-app-shadow-center-2);
1003
+ }
1004
+ .rls-design-system-filled .rls-input-search--disabled {
1005
+ opacity: 0.5;
1006
+ }
1007
+ .rls-design-system-filled .rls-input-search .rls-input__component:disabled,
1008
+ .rls-design-system-filled .rls-input-search .rls-button-action:disabled {
1009
+ opacity: 1 !important;
1010
+ }
1011
+ .rls-design-system-filled .rls-input-text {
1012
+ position: relative;
1013
+ width: 100%;
1014
+ box-sizing: border-box;
1015
+ }
1016
+ .rls-design-system-filled .rls-label {
1017
+ font-size: var(--rlc-label-font-size, var(--rls-smalltext-font-size));
1018
+ letter-spacing: var(
1019
+ --rlc-label-letter-spacing,
1020
+ var(--rls-smalltext-letter-spacing)
1021
+ );
1022
+ line-height: var(--rlc-label-height, var(--rls-smalltext-line-height));
1023
+ font-weight: var(--rlc-label-weight, inherit);
1024
+ }
1025
+ .rls-design-system-filled .rls-label[rls-theme] {
1026
+ color: var(--rls-theme-color-500);
1027
+ }
1028
+ .rls-design-system-filled .rls-message-icon {
1029
+ --rlc-icon-color: var(--rls-theme-color-500);
1030
+ --rlc-icon-dimension: var(--rls-sizing-x8);
1031
+ display: flex;
1032
+ align-items: center;
1033
+ column-gap: var(--rls-sizing-x2);
1034
+ }
1035
+ .rls-design-system-filled .rls-message-icon span {
1036
+ font-size: var(--rls-caption-font-size);
1037
+ letter-spacing: var(--rls-caption-letter-spacing);
1038
+ color: var(--rls-app-color-600);
1039
+ }
1040
+ .rls-design-system-filled .rls-poster {
1041
+ --pvt-height: var(--rlc-poster-height, var(--rls-smalltext-line-height));
1042
+ position: relative;
1043
+ display: block;
1044
+ width: var(--rlc-poster-width, auto);
1045
+ font-weight: inherit;
1046
+ font-size: var(--rlc-poster-font-size, var(--rls-smalltext-font-size));
1047
+ letter-spacing: var(
1048
+ --rlc-poster-letter-spacing,
1049
+ var(--rls-body-letter-spacing)
1050
+ );
1051
+ height: var(--pvt-height);
1052
+ line-height: var(--pvt-height);
1053
+ padding: var(--rlc-poster-padding, var(--rls-sizing-x2) var(--rls-sizing-x4));
1054
+ text-align: var(--rlc-poster-text-align, center);
1055
+ border-radius: var(--rlc-poster-radius, var(--rls-sizing-x4));
1056
+ color: var(--rls-app-color-950);
1057
+ background: var(--rls-app-color-200);
1058
+ }
1059
+ .rls-design-system-filled .rls-poster[rls-theme] {
1060
+ color: var(--rls-theme-color-950);
1061
+ background: var(--rls-theme-color-200);
1062
+ }
1063
+ .rls-design-system-filled .rls-progress-bar {
1064
+ --pvt-component-display: block;
1065
+ --pvt-component-height: var(--rlc-progress-bar-height, var(--rls-sizing-x2));
1066
+ --pvt-component-radius: var(--rlc-progress-bar-radius, 0rem);
1067
+ position: relative;
1068
+ width: 100%;
1069
+ height: var(--pvt-component-height);
1070
+ overflow: hidden;
1071
+ background: var(--rlc-progress-bar-background, var(--rls-theme-color-100));
1072
+ border-radius: var(--pvt-component-radius);
1073
+ }
1074
+ .rls-design-system-filled .rls-progress-bar--indeterminate {
1075
+ --pvt-component-display: none;
1076
+ }
1077
+ .rls-design-system-filled .rls-progress-bar--indeterminate::after,
1078
+ .rls-design-system-filled .rls-progress-bar--indeterminate::before {
1079
+ position: absolute;
1080
+ content: '';
1081
+ top: 0rem;
1082
+ width: 0%;
1083
+ height: var(--pvt-component-height);
1084
+ background: var(--rls-theme-gradient-500);
1085
+ border-radius: var(--pvt-component-radius);
1086
+ }
1087
+ .rls-design-system-filled .rls-progress-bar--indeterminate::after {
1088
+ animation: progress-bar-indeterminate-after 2000ms infinite;
1089
+ }
1090
+ .rls-design-system-filled .rls-progress-bar--indeterminate::before {
1091
+ animation: progress-bar-indeterminate-before 2000ms infinite;
1092
+ }
1093
+ .rls-design-system-filled .rls-progress-bar__component {
1094
+ position: absolute;
1095
+ display: var(--pvt-component-display);
1096
+ top: 0rem;
1097
+ width: 0%;
1098
+ height: var(--pvt-component-height);
1099
+ background: var(--rls-theme-gradient-500);
1100
+ transition: width 320ms 0ms var(--rls-standard-curve);
1101
+ border-radius: var(--pvt-component-radius);
1102
+ }
1103
+ @keyframes progress-bar-indeterminate-before {
1104
+ 0% {
1105
+ width: 100%;
1106
+ left: -125%;
1107
+ }
1108
+ 20% {
1109
+ width: 100%;
1110
+ left: -125%;
1111
+ }
1112
+ 100% {
1113
+ width: 12.5%;
1114
+ left: 100%;
1115
+ }
1116
+ }
1117
+ @keyframes progress-bar-indeterminate-after {
1118
+ 0% {
1119
+ width: 12.5%;
1120
+ left: -12.5%;
1121
+ }
1122
+ 80% {
1123
+ width: 100%;
1124
+ left: 125%;
1125
+ }
1126
+ 100% {
1127
+ width: 100%;
1128
+ left: 125%;
1129
+ }
1130
+ }
1131
+ .rls-design-system-filled .rls-progress-circular {
1132
+ --pvt-dimension: var(
1133
+ --rlc-progress-circular-dimension,
1134
+ var(--rls-sizing-x28)
1135
+ );
1136
+ position: relative;
1137
+ width: var(--pvt-dimension);
1138
+ height: var(--pvt-dimension);
1139
+ padding: var(--rls-sizing-x2);
1140
+ box-sizing: border-box;
1141
+ stroke: var(--rls-theme-color-500);
1142
+ }
1143
+ .rls-design-system-filled .rls-progress-circular__svg {
1144
+ height: 100%;
1145
+ width: 100%;
1146
+ transform: rotate(990deg);
1147
+ animation: progress-circular-svg 3500ms linear infinite;
1148
+ }
1149
+ .rls-design-system-filled .rls-progress-circular__circle {
1150
+ fill: none;
1151
+ stroke-width: 4px;
1152
+ stroke: inherit;
1153
+ stroke-dasharray: 65;
1154
+ stroke-dashoffset: 65;
1155
+ opacity: 1;
1156
+ animation: progress-circular-circle 1750ms var(--rls-standard-curve) infinite;
1157
+ }
1158
+ @keyframes progress-circular-svg {
1159
+ 0% {
1160
+ transform: rotate(0deg);
1161
+ }
1162
+ 50% {
1163
+ transform: rotate(180deg);
1164
+ }
1165
+ 100% {
1166
+ transform: rotate(360deg);
1167
+ }
1168
+ }
1169
+ @keyframes progress-circular-circle {
1170
+ 50% {
1171
+ stroke-dashoffset: 0;
1172
+ }
1173
+ 100% {
1174
+ stroke-dashoffset: -65;
1175
+ }
1176
+ }
1177
+ .rls-design-system-filled .rls-radiobutton {
1178
+ --pvt-dimension: var(--rlc-radiobutton-dimension, var(--rls-sizing-x12));
1179
+ --pvt-component-dimension: calc(var(--pvt-dimension) / 2);
1180
+ --pvt-component-background: transparent;
1181
+ position: relative;
1182
+ display: flex;
1183
+ width: var(--pvt-dimension);
1184
+ height: var(--pvt-dimension);
1185
+ justify-content: center;
1186
+ align-items: center;
1187
+ outline: none;
1188
+ border-radius: 50%;
1189
+ box-sizing: border-box;
1190
+ background: var(--rls-app-color-300);
1191
+ transition: all 160ms 0ms var(--rls-standard-curve);
1192
+ }
1193
+ .rls-design-system-filled .rls-radiobutton:hover {
1194
+ cursor: var(--rlc-radiobutton-cursor, initial);
1195
+ }
1196
+ .rls-design-system-filled .rls-radiobutton--checked {
1197
+ --pvt-component-background: var(--rls-app-color-050);
1198
+ background: var(--rls-theme-color-500);
1199
+ }
1200
+ .rls-design-system-filled .rls-radiobutton--disabled {
1201
+ opacity: 0.5;
1202
+ pointer-events: none;
1203
+ background: var(--rls-app-color-300);
1204
+ border: none;
1205
+ }
1206
+ .rls-design-system-filled .rls-radiobutton--disabled.rls-radiobutton--checked {
1207
+ --pvt-component-background: var(--rls-app-color-500);
1208
+ }
1209
+ .rls-design-system-filled .rls-radiobutton__component {
1210
+ width: var(--pvt-component-dimension);
1211
+ height: var(--pvt-component-dimension);
1212
+ border-radius: 50%;
1213
+ background: var(--pvt-component-background);
1214
+ transition: all 160ms 0ms var(--rls-standard-curve);
1215
+ }
1216
+ .rls-design-system-filled .rls-skeleton {
1217
+ --pvt-height: var(--rlc-skeleton-height, inherit);
1218
+ --pvt-max-height: var(--rlc-skeleton-max-height, inherit);
1219
+ --pvt-min-height: var(--rlc-skeleton-min-height, inherit);
1220
+ --pvt-color-primary: var(--rls-app-color-100);
1221
+ --pvt-color-secondary: var(--rls-app-color-200);
1222
+ position: relative;
1223
+ width: 100%;
1224
+ height: var(--pvt-height);
1225
+ max-height: var(--pvt-max-height);
1226
+ min-height: var(--pvt-min-height);
1227
+ line-height: var(--pvt-height);
1228
+ background: linear-gradient(
1229
+ 90deg,
1230
+ var(--pvt-color-primary) 25%,
1231
+ var(--pvt-color-secondary) 50%,
1232
+ var(--pvt-color-primary) 75%
1233
+ );
1234
+ overflow: hidden;
1235
+ background-size: 200% 100%;
1236
+ animation: skeleton-animation 1600ms infinite;
1237
+ border-radius: var(--rls-sizing-x2);
1238
+ }
1239
+ .rls-design-system-filled .rls-skeleton[rls-theme] {
1240
+ --pvt-color-primary: var(--rls-theme-color-100);
1241
+ --pvt-color-secondary: var(--rls-theme-color-200);
1242
+ }
1243
+ @keyframes skeleton-animation {
1244
+ 0% {
1245
+ background-position: 200% 0;
1246
+ }
1247
+ 100% {
1248
+ background-position: -200% 0;
1249
+ }
1250
+ }
1251
+ .rls-design-system-filled .rls-skeleton-text {
1252
+ --pvt-height: var(--rlc-skeleton-text-height, var(--rls-body-line-height));
1253
+ --rlc-skeleton-height: var(--pvt-height);
1254
+ position: relative;
1255
+ display: block;
1256
+ overflow: inherit;
1257
+ font-weight: inherit;
1258
+ font-size: var(--rlc-skeleton-text-font-size, var(--rls-body-font-size));
1259
+ letter-spacing: var(
1260
+ --rlc-skeleton-text-letter-spacing,
1261
+ var(--rls-body-letter-spacing)
1262
+ );
1263
+ line-height: var(--pvt-height);
1264
+ }
1265
+ .rls-design-system-filled .rls-skeleton-text__value {
1266
+ display: flex;
1267
+ column-gap: var(--rlc-skeleton-text-column-gap, var(--rls-sizing-x4));
1268
+ align-items: center;
1269
+ font-weight: inherit;
1270
+ font-size: inherit;
1271
+ line-height: inherit;
1272
+ letter-spacing: inherit;
1273
+ }
1274
+ .rls-design-system-filled .rls-skeleton-text__value > span {
1275
+ display: block;
1276
+ overflow: hidden;
1277
+ text-overflow: ellipsis;
1278
+ white-space: nowrap;
1279
+ }
1280
+ .rls-design-system-filled .rls-spinner {
1281
+ position: relative;
1282
+ display: block;
1283
+ width: var(--rlc-spinner-dimension, var(--rls-sizing-x12));
1284
+ height: var(--rlc-spinner-dimension, var(--rls-sizing-x12));
1285
+ fill: var(--rlc-spinner-color, var(--rls-app-color-800));
1286
+ }
1287
+ .rls-design-system-filled .rls-spinner__svg {
1288
+ position: absolute;
1289
+ width: 100%;
1290
+ height: 100%;
1291
+ fill: inherit;
1292
+ transform-origin: center center;
1293
+ transform: translateZ(0px);
1294
+ animation: 1s linear 0s infinite normal none running rls-spinner-scale-out;
1295
+ }
1296
+ .rls-design-system-filled .rls-spinner__svg > circle {
1297
+ r: 5;
1298
+ transform: translate(32px, 32px);
1299
+ }
1300
+ .rls-design-system-filled .rls-spinner__svg--1 {
1301
+ top: 0px;
1302
+ left: 9px;
1303
+ animation-delay: -1000ms;
1304
+ animation-duration: 1000ms;
1305
+ }
1306
+ .rls-design-system-filled .rls-spinner__svg--2 {
1307
+ top: 5.78509px;
1308
+ left: 6.8944px;
1309
+ animation-delay: -888.889ms;
1310
+ animation-duration: 1000ms;
1311
+ }
1312
+ .rls-design-system-filled .rls-spinner__svg--3 {
1313
+ top: 8.86327px;
1314
+ left: 1.56283px;
1315
+ animation-delay: -777.778ms;
1316
+ animation-duration: 1000ms;
1317
+ }
1318
+ .rls-design-system-filled .rls-spinner__svg--4 {
1319
+ top: 7.79423px;
1320
+ left: -4.5px;
1321
+ animation-delay: -666.667ms;
1322
+ animation-duration: 1000ms;
1323
+ }
1324
+ .rls-design-system-filled .rls-spinner__svg--5 {
1325
+ top: 3.07818px;
1326
+ left: -8.45723px;
1327
+ animation-delay: -555.556ms;
1328
+ animation-duration: 1000ms;
1329
+ }
1330
+ .rls-design-system-filled .rls-spinner__svg--6 {
1331
+ top: -3.07818px;
1332
+ left: -8.45723px;
1333
+ animation-delay: -444.444ms;
1334
+ animation-duration: 1000ms;
1335
+ }
1336
+ .rls-design-system-filled .rls-spinner__svg--7 {
1337
+ top: -7.79423px;
1338
+ left: -4.5px;
1339
+ animation-delay: -333.333ms;
1340
+ animation-duration: 1000ms;
1341
+ }
1342
+ .rls-design-system-filled .rls-spinner__svg--8 {
1343
+ top: -8.86327px;
1344
+ left: 1.56283px;
1345
+ animation-delay: -222.222ms;
1346
+ animation-duration: 1000ms;
1347
+ }
1348
+ .rls-design-system-filled .rls-spinner__svg--9 {
1349
+ top: -5.78509px;
1350
+ left: 6.8944px;
1351
+ animation-delay: -111.111ms;
1352
+ animation-duration: 1000ms;
1353
+ }
1354
+ @keyframes rls-spinner-scale-out {
1355
+ 0% {
1356
+ transform: scale(1, 1);
1357
+ }
1358
+ 100% {
1359
+ transform: scale(0, 0);
1360
+ }
1361
+ }
1362
+ .rls-design-system-filled .rls-switch {
1363
+ --pvt-component-background: var(--rls-app-color-400);
1364
+ --pvt-component-height: var(
1365
+ --rlc-switch-component-height,
1366
+ var(--rls-sizing-x12)
1367
+ );
1368
+ --pvt-element-left: var(--rls-sizing-x2);
1369
+ --pvt-element-width: var(--rlc-switch-element-width, var(--rls-sizing-x8));
1370
+ --pvt-element-height: var(--rlc-switch-element-height, var(--rls-sizing-x8));
1371
+ --pvt-element-radius: var(--rlc-switch-element-radius, 50%);
1372
+ max-width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
1373
+ }
1374
+ .rls-design-system-filled .rls-switch:hover {
1375
+ cursor: var(--rlc-switch-cursor, initial);
1376
+ }
1377
+ .rls-design-system-filled .rls-switch--capsule {
1378
+ --pvt-component-height: var(--rls-sizing-x8);
1379
+ --pvt-element-height: var(--rls-sizing-x4);
1380
+ --pvt-element-radius: var(--rls-sizing-x4);
1381
+ }
1382
+ .rls-design-system-filled .rls-switch--checked {
1383
+ --pvt-component-background: var(--rls-theme-color-500);
1384
+ --pvt-element-left: calc(
1385
+ 100% - var(--pvt-element-width) - var(--rls-sizing-x2)
1386
+ );
1387
+ }
1388
+ .rls-design-system-filled .rls-switch--disabled {
1389
+ --pvt-component-background: var(--rls-app-color-300);
1390
+ opacity: 0.5;
1391
+ pointer-events: none;
1392
+ }
1393
+ .rls-design-system-filled .rls-switch--disabled.rls-switch--checked {
1394
+ --pvt-component-background: var(--rls-theme-color-400);
1395
+ }
1396
+ .rls-design-system-filled .rls-switch__component {
1397
+ position: relative;
1398
+ width: 100%;
1399
+ height: var(--pvt-component-height);
1400
+ background: var(--pvt-component-background);
1401
+ border-radius: var(--rls-sizing-x6);
1402
+ }
1403
+ .rls-design-system-filled .rls-switch__component__element {
1404
+ position: absolute;
1405
+ top: var(--rls-sizing-x2);
1406
+ left: var(--pvt-element-left);
1407
+ width: var(--pvt-element-width);
1408
+ height: var(--pvt-element-height);
1409
+ border-radius: var(--pvt-element-radius);
1410
+ padding: var(--rls-sizing-x2);
1411
+ box-sizing: border-box;
1412
+ z-index: var(--rls-z-index-2);
1413
+ background: var(--rls-app-color-050);
1414
+ transition: all 160ms var(--rls-standard-curve);
1415
+ }
1416
+ .rls-design-system-filled .rls-tabular-text {
1417
+ --pvt-char-font-size: var(
1418
+ --rlc-tabular-text-font-size,
1419
+ var(--rls-body-font-size)
1420
+ );
1421
+ --pvt-char-font-weight: var(--rlc-tabular-text-font-weight, inherit);
1422
+ --pvt-char-height: var(--pvt-char-font-size);
1423
+ --pvt-char-width: var(--rlc-tabular-text-char-width, 5.5rem);
1424
+ --pvt-pointer-width: var(--rlc-tabular-text-pointer-width, 2rem);
1425
+ display: flex;
1426
+ width: auto;
1427
+ height: var(--pvt-char-height);
1428
+ line-height: var(--pvt-char-height);
1429
+ font-size: var(--pvt-char-font-size);
1430
+ font-weight: var(--pvt-char-font-weight);
1431
+ justify-content: var(--rlc-tabular-text-align, flex-start);
1432
+ }
1433
+ .rls-design-system-filled .rls-tabular-text__char {
1434
+ display: block;
1435
+ width: var(--pvt-char-width);
1436
+ text-align: center;
1437
+ }
1438
+ .rls-design-system-filled .rls-tabular-text__pointer {
1439
+ display: block;
1440
+ width: var(--pvt-pointer-width);
1441
+ text-align: center;
1442
+ }
1443
+ .rls-design-system-filled .rls-accordion {
1444
+ --pvt-background: var(--rls-app-color-100);
1445
+ --pvt-header-background: var(--rls-app-color-200);
1446
+ --pvt-header-hover-background: var(--rls-app-color-300);
1447
+ --pvt-header-radius: var(--rls-sizing-x6);
1448
+ --pvt-title-font-color: var(--rls-app-color-800);
1449
+ --pvt-indicator-color: var(--rls-app-color-700);
1450
+ --pvt-indicator-background: transparent;
1451
+ --pvt-body-overflow: hidden;
1452
+ --pvt-content-font-color: var(--rls-app-color-700);
1453
+ position: relative;
1454
+ display: flex;
1455
+ flex-direction: column;
1456
+ width: 100%;
1457
+ background: var(--pvt-background);
1458
+ box-sizing: border-box;
1459
+ }
1460
+ .rls-design-system-filled .rls-accordion__header {
1461
+ position: relative;
1462
+ display: flex;
1463
+ width: 100%;
1464
+ min-height: var(--rls-sizing-x24);
1465
+ align-items: center;
1466
+ justify-content: space-between;
1467
+ column-gap: var(--rls-sizing-x4);
1468
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
1469
+ background: var(--pvt-header-background);
1470
+ border: none;
1471
+ border-radius: var(--pvt-header-radius);
1472
+ box-sizing: border-box;
1473
+ cursor: pointer;
1474
+ text-align: left;
1475
+ font-family: inherit;
1476
+ transition: background 240ms var(--rls-standard-curve);
1477
+ }
1478
+ .rls-design-system-filled .rls-accordion__header:hover {
1479
+ background: var(--pvt-header-hover-background);
1480
+ }
1481
+ .rls-design-system-filled .rls-accordion__header:focus-visible {
1482
+ outline: var(--rls-app-border-2-500);
1483
+ outline-offset: -2rem;
1484
+ }
1485
+ .rls-design-system-filled .rls-accordion__title {
1486
+ flex: 1 1 auto;
1487
+ color: var(--pvt-title-font-color);
1488
+ font-size: var(--rls-paragraph-font-size);
1489
+ font-weight: var(--rls-font-weight-semibold);
1490
+ letter-spacing: var(--rls-paragraph-letter-spacing);
1491
+ }
1492
+ .rls-design-system-filled .rls-accordion__indicator {
1493
+ --rlc-icon-color: var(--pvt-indicator-color);
1494
+ display: flex;
1495
+ flex: 0 0 auto;
1496
+ width: var(--rls-sizing-x12);
1497
+ height: var(--rls-sizing-x12);
1498
+ align-items: center;
1499
+ justify-content: center;
1500
+ border-radius: 50%;
1501
+ background: var(--pvt-indicator-background);
1502
+ transform: rotate(0deg);
1503
+ transition:
1504
+ transform 360ms var(--rls-standard-curve),
1505
+ background 240ms var(--rls-standard-curve);
1506
+ }
1507
+ .rls-design-system-filled .rls-accordion__body {
1508
+ height: 0rem;
1509
+ overflow: var(--pvt-body-overflow);
1510
+ opacity: 0;
1511
+ transform: translateY(0rem);
1512
+ transition:
1513
+ height 360ms var(--rls-standard-curve),
1514
+ opacity 280ms var(--rls-deceleration-curve),
1515
+ transform 360ms var(--rls-deceleration-curve);
1516
+ }
1517
+ .rls-design-system-filled .rls-accordion__content {
1518
+ background: var(--rls-app-color-050);
1519
+ padding: var(--rlc-accordion-content-padding, var(--rls-sizing-x8));
1520
+ color: var(--pvt-content-font-color);
1521
+ font-size: var(--rls-paragraph-font-size);
1522
+ letter-spacing: var(--rls-paragraph-letter-spacing);
1523
+ box-sizing: border-box;
1524
+ border-radius: 0rem 0rem var(--rls-sizing-x6) var(--rls-sizing-x6);
1525
+ }
1526
+ .rls-design-system-filled .rls-accordion--open {
1527
+ --pvt-indicator-background: var(--rls-app-color-300);
1528
+ --pvt-header-radius: var(--rls-sizing-x6) var(--rls-sizing-x6) 0rem 0rem;
1529
+ --pvt-body-overflow: initial;
1530
+ }
1531
+ .rls-design-system-filled .rls-accordion--open .rls-accordion__body {
1532
+ opacity: 1;
1533
+ transform: translateY(0rem);
1534
+ }
1535
+ .rls-design-system-filled .rls-accordion--open .rls-accordion__indicator {
1536
+ transform: rotate(180deg);
1537
+ }
1538
+ .rls-design-system-filled .rls-accordion--disabled {
1539
+ --pvt-header-background: var(--rls-app-color-200);
1540
+ --pvt-header-hover-background: var(--rls-app-color-200);
1541
+ --pvt-title-font-color: var(--rls-app-color-400);
1542
+ --pvt-indicator-color: var(--rls-app-color-400);
1543
+ }
1544
+ .rls-design-system-filled .rls-accordion--disabled .rls-accordion__header {
1545
+ cursor: not-allowed;
1546
+ }
1547
+ .rls-design-system-filled .rls-accordion[rls-theme] {
1548
+ --pvt-background: var(--rls-theme-color-050);
1549
+ --pvt-header-background: var(--rls-theme-color-100);
1550
+ --pvt-header-hover-background: var(--rls-theme-color-200);
1551
+ --pvt-title-font-color: var(--rls-theme-color-800);
1552
+ --pvt-indicator-color: var(--rls-theme-color-700);
1553
+ --pvt-content-font-color: var(--rls-theme-color-700);
1554
+ }
1555
+ .rls-design-system-filled .rls-accordion[rls-theme].rls-accordion--open {
1556
+ --pvt-indicator-background: var(--rls-theme-color-200);
1557
+ }
1558
+ .rls-design-system-filled .rls-alert {
1559
+ --pvt-icon-background: var(--rls-app-color-600);
1560
+ --pvt-icon-color: var(--rls-app-color-050);
1561
+ --pvt-content-font-color: var(--rls-app-color-500);
1562
+ position: relative;
1563
+ display: flex;
1564
+ align-items: var(--rlc-alert-align-items, flex-start);
1565
+ column-gap: var(--rls-sizing-x6);
1566
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
1567
+ box-sizing: border-box;
1568
+ background: var(--rls-app-color-100);
1569
+ border: var(--rls-app-border-1-300);
1570
+ border-radius: var(--rls-sizing-x4);
1571
+ }
1572
+ .rls-design-system-filled .rls-alert[rls-theme] {
1573
+ --pvt-icon-background: var(--rls-theme-color-500);
1574
+ --pvt-icon-color: var(--rls-theme-color-050);
1575
+ --pvt-content-font-color: var(--rls-theme-color-700);
1576
+ background: var(--rls-theme-color-050);
1577
+ border: var(--rls-theme-border-1-200);
1578
+ }
1579
+ .rls-design-system-filled .rls-alert__icon {
1580
+ --rlc-icon-color: var(--pvt-icon-color);
1581
+ display: flex;
1582
+ width: var(--rls-sizing-x16);
1583
+ height: var(--rls-sizing-x16);
1584
+ align-items: center;
1585
+ justify-content: center;
1586
+ border-radius: 50%;
1587
+ background: var(--pvt-icon-background);
1588
+ }
1589
+ .rls-design-system-filled .rls-alert__icon + .rls-alert__content {
1590
+ max-width: calc(100% - 22rem);
1591
+ }
1592
+ .rls-design-system-filled .rls-alert__content {
1593
+ width: auto;
1594
+ color: var(--pvt-content-font-color);
1595
+ }
1596
+ .rls-design-system-filled .rls-ballot {
1597
+ --rlc-avatar-width: var(--rls-sizing-x20);
1598
+ --rlc-avatar-height: var(--rls-sizing-x20);
1599
+ --pvt-title-font-size: var(
1600
+ --rlc-ballot-title-font-size,
1601
+ var(--rls-label-font-size)
1602
+ );
1603
+ --pvt-title-letter-spacing: var(
1604
+ --rlc-ballot-title-letter-spacing,
1605
+ var(--rls-label-letter-spacing)
1606
+ );
1607
+ --pvt-title-line-height: var(
1608
+ --rlc-ballot-title-line-height,
1609
+ var(--rls-label-line-height)
1610
+ );
1611
+ --pvt-subtitle-font-size: var(
1612
+ --rlc-ballot-subtitle-font-size,
1613
+ var(--rls-smalltext-font-size)
1614
+ );
1615
+ --pvt-subtitle-letter-spacing: var(
1616
+ --rlc-ballot-subtitle-letter-spacing,
1617
+ var(--rls-smalltext-letter-spacing)
1618
+ );
1619
+ --pvt-subtitle-line-height: var(
1620
+ --rlc-ballot-subtitle-line-height,
1621
+ var(--rls-smalltext-line-height)
1622
+ );
1623
+ position: relative;
1624
+ display: flex;
1625
+ width: var(--rlc-ballot-width, 100%);
1626
+ align-items: center;
1627
+ column-gap: var(--rls-sizing-x4);
1628
+ padding: var(--rlc-ballot-padding, var(--rls-sizing-x4));
1629
+ box-sizing: border-box;
1630
+ overflow: hidden;
1631
+ }
1632
+ .rls-design-system-filled .rls-ballot--bordered {
1633
+ border-radius: var(--rls-sizing-x4);
1634
+ border: var(--rls-app-border-2-100);
1635
+ }
1636
+ .rls-design-system-filled .rls-ballot--skeleton {
1637
+ --rls-subtitle-width: 60%;
1638
+ }
1639
+ .rls-design-system-filled .rls-ballot__component {
1640
+ display: flex;
1641
+ overflow: hidden;
1642
+ flex-direction: column;
1643
+ row-gap: var(--rlc-ballot-component-row-gap, var(--rls-sizing-x1));
1644
+ }
1645
+ .rls-design-system-filled .rls-ballot .rls-avatar + .rls-ballot__component {
1646
+ width: calc(100% - var(--rlc-avatar-width) - var(--rls-sizing-x4));
1647
+ }
1648
+ .rls-design-system-filled .rls-ballot__title {
1649
+ --rlc-skeleton-text-font-size: var(--pvt-title-font-size);
1650
+ --rlc-skeleton-text-height: auto;
1651
+ --rlc-skeleton-text-letter-spacing: var(--pvt-title-letter-spacing);
1652
+ position: relative;
1653
+ width: 100%;
1654
+ color: var(--rls-app-color-900);
1655
+ overflow: hidden;
1656
+ white-space: nowrap;
1657
+ text-overflow: ellipsis;
1658
+ font-weight: var(
1659
+ --rlc-ballot-title-font-weight,
1660
+ var(--rls-font-weight-medium)
1661
+ );
1662
+ font-size: var(--pvt-title-font-size);
1663
+ letter-spacing: var(--pvt-title-letter-spacing);
1664
+ line-height: var(--pvt-title-line-height);
1665
+ }
1666
+ .rls-design-system-filled .rls-ballot__subtitle {
1667
+ --rlc-skeleton-text-font-size: var(--pvt-subtitle-font-size);
1668
+ --rlc-skeleton-text-height: auto;
1669
+ --rlc-skeleton-text-letter-spacing: var(--pvt-subtitle-letter-spacing);
1670
+ position: relative;
1671
+ width: var(--rlc-ballot-subtitle-width, 100%);
1672
+ color: var(--rls-app-color-500);
1673
+ font-weight: var(
1674
+ --rlc-ballot-subtitle-font-weight,
1675
+ var(--rls-font-weight-medium)
1676
+ );
1677
+ font-size: var(--pvt-subtitle-font-size);
1678
+ letter-spacing: var(--pvt-subtitle-letter-spacing);
1679
+ line-height: var(--pvt-subtitle-line-height);
1680
+ overflow: var(--rlc-ballot-subtitle-overflow, initial);
1681
+ text-overflow: var(--rlc-ballot-subtitle-text-overflow, initial);
1682
+ white-space: var(--rlc-ballot-subtitle-white-space, initial);
1683
+ }
1684
+ .rls-design-system-filled .rls-button-progress {
1685
+ --rlc-progress-circular-dimension: var(--rls-sizing-x16);
1686
+ position: relative;
1687
+ display: flex;
1688
+ justify-content: center;
1689
+ align-items: center;
1690
+ }
1691
+ .rls-design-system-filled .rls-button-toggle {
1692
+ width: auto;
1693
+ }
1694
+ .rls-design-system-filled .rls-button-toggle__content {
1695
+ display: flex;
1696
+ justify-content: center;
1697
+ }
1698
+ .rls-design-system-filled .rls-button-toggle__action {
1699
+ --rlc-button-content-radius: var(--rls-sizing-x2) 0rem 0rem
1700
+ var(--rls-sizing-x2);
1701
+ width: auto;
1702
+ }
1703
+ .rls-design-system-filled .rls-button-toggle__icon {
1704
+ --rlc-button-content-radius: 0rem var(--rls-sizing-x2) var(--rls-sizing-x2)
1705
+ 0rem;
1706
+ --rlc-button-content-padding: var(--rls-sizing-x2);
1707
+ width: auto;
1708
+ }
1709
+ .rls-design-system-filled .rls-button-toggle__list {
1710
+ --rlc-button-toggle-ul-height: 0rem;
1711
+ --rlc-button-toggle-ul-opacity: 0;
1712
+ --rlc-button-toggle-ul-transform: none;
1713
+ position: absolute;
1714
+ top: 22.5rem;
1715
+ left: 0rem;
1716
+ width: 100%;
1717
+ height: 0rem;
1718
+ overflow: hidden;
1719
+ z-index: var(--rls-z-index-4);
1720
+ }
1721
+ .rls-design-system-filled .rls-button-toggle__list--hide {
1722
+ --rlc-button-toggle-ul-opacity: 0;
1723
+ --rlc-button-toggle-ul-transform: scale(0, 0);
1724
+ }
1725
+ .rls-design-system-filled .rls-button-toggle__list--visible {
1726
+ --rlc-button-toggle-ul-height: auto;
1727
+ --rlc-button-toggle-ul-opacity: 1;
1728
+ --rlc-button-toggle-ul-transform: scale(1, 1);
1729
+ overflow: initial;
1730
+ opacity: 1;
1731
+ height: auto;
1732
+ }
1733
+ .rls-design-system-filled .rls-button-toggle__list ul {
1734
+ position: relative;
1735
+ display: flex;
1736
+ flex-direction: column;
1737
+ float: left;
1738
+ width: 100%;
1739
+ height: var(--rlc-button-toggle-ul-height);
1740
+ opacity: var(--rlc-button-toggle-ul-opacity);
1741
+ padding: var(--rls-sizing-x4) 0rem;
1742
+ border-radius: var(--rls-sizing-x4);
1743
+ box-sizing: border-box;
1744
+ overflow-y: auto;
1745
+ overflow-x: hidden;
1746
+ z-index: var(--rls-z-index-2);
1747
+ background: var(--rls-app-color-050);
1748
+ border: var(--rls-theme-border-1-500);
1749
+ transform: var(--rlc-button-toggle-ul-transform);
1750
+ transform-origin: 0% 0%;
1751
+ box-shadow: var(--rls-theme-shadow-500);
1752
+ transition:
1753
+ transform 240ms 0ms var(--rls-standard-curve),
1754
+ opacity 240ms 0ms var(--rls-standard-curve);
1755
+ }
1756
+ .rls-design-system-filled .rls-button-toggle__list ul li {
1757
+ padding: 0rem var(--rls-sizing-x6);
1758
+ box-sizing: border-box;
1759
+ height: var(--rls-sizing-x20);
1760
+ line-height: var(--rls-sizing-x20);
1761
+ cursor: default;
1762
+ font-weight: var(--rls-font-weight-semibold);
1763
+ font-size: var(--rls-smalltext-font-size);
1764
+ letter-spacing: var(--rls-smalltext-letter-spacing);
1765
+ text-transform: uppercase;
1766
+ color: var(--rls-app-color-600);
1767
+ }
1768
+ .rls-design-system-filled .rls-button-toggle__list ul li:hover {
1769
+ background: var(--rls-app-color-100);
1770
+ color: var(--rls-app-color-900);
1771
+ }
1772
+ .rls-design-system-filled .rls-field-area {
1773
+ --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1774
+ position: relative;
1775
+ width: 100%;
1776
+ box-sizing: border-box;
1777
+ }
1778
+ .rls-design-system-filled .rls-field-box {
1779
+ --pvt-body-background: var(
1780
+ --rlc-field-box-body-background,
1781
+ var(--rls-app-color-200)
1782
+ );
1783
+ --pvt-body-background-focused: var(
1784
+ --rlc-field-box-body-background-focused,
1785
+ var(--rls-app-color-050)
1786
+ );
1787
+ --pvt-body-background-disabled: var(
1788
+ --rlc-field-box-body-background-disabled,
1789
+ var(--rls-app-color-100)
1790
+ );
1791
+ --pvt-body-background-error: var(
1792
+ --rlc-field-box-body-background-error,
1793
+ var(--rls-danger-color-100)
1794
+ );
1795
+ --pvt-body-shadow: var(
1796
+ --rlc-field-box-body-shadow,
1797
+ var(--rls-app-shadow-center-2)
1798
+ );
1799
+ --pvt-label-font-color: var(
1800
+ --rlc-field-box-label-font-color,
1801
+ var(--rls-app-color-600)
1802
+ );
1803
+ --pvt-action-dimension: var(
1804
+ --rlc-field-box-action-dimension,
1805
+ var(--rls-sizing-x12)
1806
+ );
1807
+ --pvt-action-background: var(
1808
+ --rlc-field-box-action-background,
1809
+ var(--rls-app-color-200)
1810
+ );
1811
+ --pvt-action-background-hover: var(
1812
+ --rlc-field-box-action-background-hover,
1813
+ var(--rls-app-color-300)
1814
+ );
1815
+ --pvt-label-opacity: 1;
1816
+ --pvt-body-opacity: 1;
1817
+ position: relative;
1818
+ display: flex;
1819
+ width: var(--rlc-field-box-width, 100%);
1820
+ flex-direction: column;
1821
+ row-gap: var(--rls-sizing-x2);
1822
+ padding: var(--rlc-field-box-padding, 0rem);
1823
+ box-sizing: border-box;
1824
+ transition: height 160ms 0ms var(--rls-standard-curve);
1825
+ }
1826
+ .rls-design-system-filled .rls-field-box--focused {
1827
+ --pvt-label-font-color: var(--rls-theme-color-500);
1828
+ --pvt-body-background: var(--pvt-body-background-focused);
1829
+ }
1830
+ .rls-design-system-filled .rls-field-box--error {
1831
+ --pvt-label-font-color: var(--rls-danger-color-500);
1832
+ --pvt-body-shadow: var(
1833
+ --rlc-field-box-body-shadow-error,
1834
+ var(--rls-app-shadow-center-2)
1835
+ );
1836
+ }
1837
+ .rls-design-system-filled .rls-field-box--disabled {
1838
+ --pvt-label-opacity: 0.25;
1839
+ --pvt-body-opacity: 0.75;
1840
+ --pvt-body-background: var(--pvt-body-background-disabled);
1841
+ }
1842
+ .rls-design-system-filled .rls-field-box--readonly {
1843
+ --rlc-input-font-color: var(--rls-app-color-600);
1844
+ }
1845
+ .rls-design-system-filled .rls-field-box__label {
1846
+ position: relative;
1847
+ display: var(--rlc-field-box-label-display, block);
1848
+ width: 100%;
1849
+ padding: 0rem var(--rls-sizing-x3);
1850
+ box-sizing: border-box;
1851
+ color: var(--pvt-label-font-color);
1852
+ opacity: var(--pvt-label-opacity);
1853
+ overflow: hidden;
1854
+ white-space: nowrap;
1855
+ text-overflow: ellipsis;
1856
+ font-weight: var(--rls-font-weight-medium);
1857
+ font-size: var(--rls-smalltext-font-size);
1858
+ letter-spacing: var(--rls-smalltext-letter-spacing);
1859
+ min-height: var(--rls-smalltext-line-height);
1860
+ line-height: var(--rls-smalltext-line-height);
1861
+ }
1862
+ .rls-design-system-filled .rls-field-box__label span {
1863
+ color: var(--rls-danger-color-500);
1864
+ }
1865
+ .rls-design-system-filled .rls-field-box__body {
1866
+ display: flex;
1867
+ align-items: center;
1868
+ column-gap: var(--rls-sizing-x2);
1869
+ overflow: hidden;
1870
+ background: var(--pvt-body-background);
1871
+ opacity: var(--pvt-body-opacity);
1872
+ border-radius: var(--rlc-field-box-body-radius, var(--rls-sizing-x4));
1873
+ padding: var(--rlc-field-box-body-padding, 0rem);
1874
+ box-sizing: border-box;
1875
+ box-shadow: var(--pvt-body-shadow);
1876
+ }
1877
+ .rls-design-system-filled .rls-field-box__action {
1878
+ --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 4rem);
1879
+ display: flex;
1880
+ flex: 0 0 auto;
1881
+ width: var(--pvt-action-dimension);
1882
+ height: var(--pvt-action-dimension);
1883
+ align-items: center;
1884
+ justify-content: center;
1885
+ color: var(--rls-app-color-600);
1886
+ padding: 0rem;
1887
+ outline: none;
1888
+ border-radius: var(--rlc-field-box-action-radius, var(--rls-sizing-x2));
1889
+ background: var(--pvt-action-background);
1890
+ }
1891
+ .rls-design-system-filled .rls-field-box__action:hover {
1892
+ background: var(--pvt-action-background-hover);
1893
+ }
1894
+ .rls-design-system-filled .rls-field-box__action:disabled {
1895
+ opacity: 0.5;
1896
+ background: rgba(0, 0, 0, 0);
1897
+ }
1898
+ .rls-design-system-filled .rls-field-box__helper {
1899
+ color: var(--rls-app-color-400);
1900
+ padding: 0rem var(--rls-sizing-x3);
1901
+ box-sizing: border-box;
1902
+ font-weight: var(--rls-overline-font-weight);
1903
+ font-size: var(--rls-overline-font-size);
1904
+ letter-spacing: var(--rls-overline-letter-spacing);
1905
+ min-height: var(--rls-overline-line-height);
1906
+ line-height: var(--rls-overline-line-height);
1907
+ overflow: hidden;
1908
+ text-overflow: ellipsis;
1909
+ white-space: nowrap;
1910
+ }
1911
+ .rls-design-system-filled .rls-field-box__error {
1912
+ display: var(--rlc-field-box-error-display, block);
1913
+ padding: 0rem var(--rls-sizing-x4);
1914
+ box-sizing: border-box;
1915
+ }
1916
+ .rls-design-system-filled .rls-field-decimal {
1917
+ --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1918
+ position: relative;
1919
+ width: 100%;
1920
+ box-sizing: border-box;
1921
+ }
1922
+ .rls-design-system-filled .rls-field-file {
1923
+ --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1924
+ --rlc-action-ripple-dimension: var(--rls-sizing-x12);
1925
+ --rlc-action-ripple-position: -6rem;
1926
+ --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));
1927
+ --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
1928
+ --pvt-letter-spacing: var(
1929
+ --rlc-input-letter-spacing,
1930
+ var(--rls-input-letter-spacing)
1931
+ );
1932
+ --pvt-height: var(--rlc-input-height, var(--rls-sizing-x12));
1933
+ --pvt-text-align: var(--rlc-input-text-align, left);
1934
+ --pvt-component-font-color: var(--pvt-font-color);
1935
+ position: relative;
1936
+ width: 100%;
1937
+ box-sizing: border-box;
1938
+ }
1939
+ .rls-design-system-filled .rls-field-file .rls-field-file__input {
1940
+ display: none;
1941
+ }
1942
+ .rls-design-system-filled .rls-field-file .rls-input__component {
1943
+ cursor: pointer;
1944
+ }
1945
+ .rls-design-system-filled .rls-field-file .rls-button-action {
1946
+ padding: 0rem;
1947
+ width: var(--rls-sizing-x12);
1948
+ height: var(--rls-sizing-x12);
1949
+ z-index: 2;
1950
+ }
1951
+ .rls-design-system-filled .rls-field-list {
1952
+ --pvt-control-pointer-events: initial;
1953
+ --pvt-list-height: 0rem;
1954
+ --pvt-list-max-height: 180rem;
1955
+ --pvt-list-opacity: 0;
1956
+ --pvt-list-transform: none;
1957
+ --pvt-list-body-component-display: none;
1958
+ --pvt-list-body-height: 0rem;
1959
+ --pvt-list-body-max-height: 180rem;
1960
+ --pvt-list-body-border: var(--rls-theme-border-1-500);
1961
+ --pvt-list-component-padding: 0rem var(--rls-sizing-x4);
1962
+ --pvt-element-opacity: 1;
1963
+ --pvt-element-pointer-events: initial;
1964
+ --pvt-backdrop-opacity: 0;
1965
+ --pvt-backdrop-bottom: initial;
1966
+ --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1967
+ position: relative;
1968
+ box-sizing: border-box;
1969
+ }
1970
+ .rls-design-system-filled .rls-field-list.rls-field-box--disabled {
1971
+ --pvt-action-font-color: var(--rls-app-color-400);
1972
+ --pvt-action-background: transparent;
1973
+ }
1974
+ .rls-design-system-filled .rls-field-list.rls-field-box--readonly {
1975
+ --pvt-control-width: 100%;
1976
+ --pvt-control-pointer-events: none;
1977
+ }
1978
+ .rls-design-system-filled .rls-field-list__control {
1979
+ position: relative;
1980
+ width: 100%;
1981
+ height: var(--rls-sizing-x12);
1982
+ line-height: var(--rls-sizing-x12);
1983
+ padding: 0rem;
1984
+ cursor: var(--rlc-field-list-control-cursor, default);
1985
+ border: none;
1986
+ outline: none;
1987
+ background: rgba(0, 0, 0, 0);
1988
+ font-weight: var(
1989
+ --rlc-field-list-control-font-weight,
1990
+ var(--rls-font-weight-medium)
1991
+ );
1992
+ font-size: var(
1993
+ --rlc-field-list-control-font-size,
1994
+ var(--rls-input-font-size)
1995
+ );
1996
+ letter-spacing: var(
1997
+ --rlc-field-list-control-letter-spacing,
1998
+ var(--rls-input-letter-spacing)
1999
+ );
2000
+ color: var(--rlc-input-font-color);
2001
+ pointer-events: var(--pvt-control-pointer-events);
2002
+ }
2003
+ .rls-design-system-filled .rls-field-list__control::placeholder {
2004
+ color: var(--rls-app-color-400);
2005
+ }
2006
+ .rls-design-system-filled .rls-field-list__control::selection {
2007
+ background: var(--rls-theme-color-700);
2008
+ color: var(--rls-app-color-050);
2009
+ }
2010
+ .rls-design-system-filled .rls-field-list__control:disabled {
2011
+ opacity: 0.5;
2012
+ cursor: not-allowed;
2013
+ }
2014
+ .rls-design-system-filled .rls-field-list__suggestions {
2015
+ position: absolute;
2016
+ top: var(--rlc-field-list-suggestions-top, calc(100% + var(--rls-sizing-x6)));
2017
+ bottom: initial;
2018
+ left: 0rem;
2019
+ width: 100%;
2020
+ height: var(--pvt-list-height);
2021
+ max-height: var(--pvt-list-max-height);
2022
+ opacity: 0;
2023
+ z-index: -1;
2024
+ overflow: hidden;
2025
+ padding-bottom: var(--rls-sizing-x6);
2026
+ }
2027
+ .rls-design-system-filled .rls-field-list__suggestions--visible {
2028
+ --pvt-list-height: auto;
2029
+ --pvt-list-body-height: auto;
2030
+ --pvt-list-opacity: 1;
2031
+ overflow: initial;
2032
+ opacity: 1;
2033
+ z-index: var(--rls-z-index-8);
2034
+ }
2035
+ .rls-design-system-filled .rls-field-list__suggestions--higher {
2036
+ top: initial;
2037
+ bottom: var(
2038
+ --rlc-field-list-suggestions-bottom,
2039
+ calc(100% - var(--rls-sizing-x4))
2040
+ );
2041
+ }
2042
+ .rls-design-system-filled .rls-field-list__suggestions--disabled {
2043
+ --pvt-element-opacity: 0.5;
2044
+ --pvt-element-pointer-events: none;
2045
+ }
2046
+ .rls-design-system-filled .rls-field-list__suggestions__body {
2047
+ display: flex;
2048
+ width: 100%;
2049
+ height: var(--pvt-list-body-height);
2050
+ max-height: var(--pvt-list-body-max-height);
2051
+ flex-direction: column;
2052
+ align-items: center;
2053
+ row-gap: var(--rls-sizing-x6);
2054
+ padding: var(--rls-sizing-x6) var(--rls-sizing-x2);
2055
+ box-sizing: border-box;
2056
+ border-radius: var(--rls-sizing-x6);
2057
+ opacity: var(--pvt-list-opacity);
2058
+ overflow: hidden;
2059
+ z-index: var(--rls-z-index-2);
2060
+ background: var(--rls-app-color-050);
2061
+ box-shadow: var(--rls-app-shadow-center-4);
2062
+ transform: var(--pvt-list-transform);
2063
+ }
2064
+ .rls-design-system-filled .rls-field-list__suggestions__body::before {
2065
+ display: var(--pvt-list-body-component-display);
2066
+ content: '';
2067
+ width: var(--rls-sizing-x24);
2068
+ height: var(--rls-sizing-x2);
2069
+ border-radius: var(--rls-sizing-x2);
2070
+ background: var(--rls-app-color-300);
2071
+ margin: var(--rls-sizing-x3) auto;
2072
+ }
2073
+ .rls-design-system-filled .rls-field-list__ul {
2074
+ display: flex;
2075
+ width: 100%;
2076
+ flex-direction: column;
2077
+ row-gap: var(--rls-sizing-x1);
2078
+ overflow-y: auto;
2079
+ overflow-x: hidden;
2080
+ padding: var(--pvt-list-component-padding);
2081
+ box-sizing: border-box;
2082
+ }
2083
+ .rls-design-system-filled .rls-field-list__element {
2084
+ --rlc-ballot-subtitle-overflow: hidden;
2085
+ --rlc-ballot-subtitle-text-overflow: ellipsis;
2086
+ --rlc-ballot-subtitle-white-space: nowrap;
2087
+ box-sizing: border-box;
2088
+ outline: none;
2089
+ border-radius: var(--rls-sizing-x4);
2090
+ padding: var(--rlc-field-list-element-padding, var(--rls-sizing-x2));
2091
+ box-sizing: border-box;
2092
+ cursor: default;
2093
+ opacity: var(--pvt-element-opacity);
2094
+ pointer-events: var(--pvt-element-pointer-events);
2095
+ }
2096
+ .rls-design-system-filled .rls-field-list__element:hover {
2097
+ background: var(--rls-theme-color-100);
2098
+ }
2099
+ .rls-design-system-filled .rls-field-list__element:not(:hover):focus {
2100
+ background: var(--rls-theme-color-100);
2101
+ }
2102
+ .rls-design-system-filled .rls-field-list__action {
2103
+ padding: var(--pvt-list-component-padding);
2104
+ box-sizing: border-box;
2105
+ }
2106
+ .rls-design-system-filled .rls-field-list__action > button {
2107
+ display: flex;
2108
+ width: 100%;
2109
+ align-items: center;
2110
+ justify-content: center;
2111
+ column-gap: var(--rls-sizing-x4);
2112
+ padding: var(--rls-sizing-x4);
2113
+ box-sizing: border-box;
2114
+ background: rgba(0, 0, 0, 0);
2115
+ border: none;
2116
+ outline: none;
2117
+ border-radius: var(--rls-sizing-x4);
2118
+ color: var(--rls-theme-color-500);
2119
+ font-size: var(--rls-label-font-size);
2120
+ font-weight: var(--rls-font-weight-medium);
2121
+ letter-spacing: var(--rls-label-letter-spacing);
2122
+ }
2123
+ .rls-design-system-filled
2124
+ .rls-field-list__action
2125
+ > button:hover:not(:disabled) {
2126
+ background: var(--rls-theme-color-100);
2127
+ }
2128
+ .rls-design-system-filled
2129
+ .rls-field-list__action
2130
+ > button:focus-visible:not(:disabled) {
2131
+ background: var(--rls-theme-color-100);
2132
+ }
2133
+ .rls-design-system-filled .rls-field-list__action > button:disabled {
2134
+ opacity: 0.5;
2135
+ cursor: not-allowed;
2136
+ }
2137
+ .rls-design-system-filled .rls-field-list__action__description {
2138
+ overflow: hidden;
2139
+ white-space: nowrap;
2140
+ text-overflow: ellipsis;
2141
+ }
2142
+ .rls-design-system-filled .rls-field-list__ballot {
2143
+ --rlc-ballot-padding: var(--rls-sizing-x4) var(--rls-sizing-x2);
2144
+ --rlc-ballot-component-row-gap: var(--rls-sizing-x2);
2145
+ --rlc-ballot-title-letter-spacing: var(--rls-label-letter-spacing);
2146
+ --rlc-ballot-title-font-size: var(--rls-label-font-size);
2147
+ --rlc-ballot-title-line-height: var(--rls-label-line-height);
2148
+ --rlc-ballot-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
2149
+ --rlc-ballot-subtitle-font-size: var(--rls-smalltext-font-size);
2150
+ --rlc-ballot-subtitle-line-height: var(--rls-smalltext-line-height);
2151
+ }
2152
+ .rls-design-system-filled .rls-field-list__empty {
2153
+ display: flex;
2154
+ padding: 0rem var(--rls-sizing-x4);
2155
+ box-sizing: border-box;
2156
+ }
2157
+ .rls-design-system-filled .rls-field-list__empty__avatar {
2158
+ width: var(--rls-sizing-x20);
2159
+ height: var(--rls-sizing-x20);
2160
+ }
2161
+ .rls-design-system-filled .rls-field-list__empty__avatar img {
2162
+ width: 100%;
2163
+ }
2164
+ .rls-design-system-filled .rls-field-list__empty__description {
2165
+ display: flex;
2166
+ flex-direction: column;
2167
+ row-gap: var(--rls-sizing-x2);
2168
+ overflow: hidden;
2169
+ }
2170
+ .rls-design-system-filled .rls-field-list__empty__description label {
2171
+ display: block;
2172
+ width: 100%;
2173
+ color: var(--rls-app-color-600);
2174
+ }
2175
+ .rls-design-system-filled .rls-field-list__empty__description p {
2176
+ white-space: initial;
2177
+ color: var(--rls-app-color-600);
2178
+ }
2179
+ .rls-design-system-filled .rls-field-list__backdrop {
2180
+ position: absolute;
2181
+ display: block;
2182
+ top: 0rem;
2183
+ left: 0rem;
2184
+ right: 0rem;
2185
+ bottom: var(--pvt-backdrop-bottom);
2186
+ opacity: var(--pvt-backdrop-opacity);
2187
+ z-index: var(--rls-z-index-2);
2188
+ background: var(--rls-theme-backdrop-900);
2189
+ backdrop-filter: blur(2px);
2190
+ transition:
2191
+ opacity 120ms 0ms var(--rls-deceleration-curve),
2192
+ bottom 120ms 0ms var(--rls-deceleration-curve);
2193
+ }
2194
+ @media screen and (max-width: 480px) {
2195
+ .rls-design-system-filled .rls-field-list {
2196
+ --pvt-list-transform: translateY(100%);
2197
+ --pvt-list-body-component-display: block;
2198
+ --pvt-list-body-border: none;
2199
+ --pvt-list-component-padding: var(--rls-sizing-x6) var(--rls-sizing-x4);
2200
+ }
2201
+ .rls-design-system-filled .rls-field-list__suggestions {
2202
+ position: fixed;
2203
+ display: flex;
2204
+ justify-content: center;
2205
+ top: 0rem;
2206
+ left: 0rem;
2207
+ z-index: var(--rls-z-index-32);
2208
+ }
2209
+ .rls-design-system-filled .rls-field-list__suggestions--visible {
2210
+ --pvt-list-max-height: initial;
2211
+ --pvt-list-body-max-height: calc(100% - 28rem);
2212
+ --pvt-list-transform: translateY(0%);
2213
+ --pvt-backdrop-opacity: 1;
2214
+ --pvt-backdrop-bottom: 0rem;
2215
+ height: 100%;
2216
+ }
2217
+ .rls-design-system-filled .rls-field-list__suggestions__body {
2218
+ position: absolute;
2219
+ bottom: 0px;
2220
+ z-index: var(--rls-z-index-4);
2221
+ box-shadow: none;
2222
+ transition:
2223
+ opacity 240ms 0ms var(--rls-standard-curve),
2224
+ transform 240ms 0ms var(--rls-standard-curve);
2225
+ }
2226
+ .rls-design-system-filled .rls-field-list__empty {
2227
+ flex-direction: column;
2228
+ padding: var(--rls-sizing-x12) var(--rls-sizing-x2);
2229
+ }
2230
+ .rls-design-system-filled .rls-field-list__empty__avatar {
2231
+ width: 100%;
2232
+ height: auto;
2233
+ max-width: var(--rls-sizing-x8);
2234
+ margin: auto;
2235
+ padding-bottom: var(--rls-sizing-x6);
2236
+ }
2237
+ .rls-design-system-filled .rls-field-list__empty__description label,
2238
+ .rls-design-system-filled .rls-field-list__empty__description p {
2239
+ text-align: center;
2240
+ }
2241
+ }
2242
+ .rls-design-system-filled .rls-field-list__ul__search {
2243
+ display: flex;
2244
+ align-items: center;
2245
+ width: 100%;
2246
+ margin-top: var(--rls-sizing-x2);
2247
+ margin-bottom: var(--rls-sizing-x6);
2248
+ background: var(--rls-app-color-100);
2249
+ border-radius: var(--rls-sizing-x4);
2250
+ padding: var(--rls-sizing-x4);
2251
+ box-sizing: border-box;
2252
+ }
2253
+ .rls-design-system-filled .rls-field-list__ul__search button {
2254
+ color: var(--rls-app-color-600);
2255
+ background: rgba(0, 0, 0, 0);
2256
+ }
2257
+ .rls-design-system-filled
2258
+ .rls-field-list__ul__search
2259
+ button:not(:disabled):hover {
2260
+ color: var(--rls-theme-color-300);
2261
+ }
2262
+ .rls-design-system-filled .rls-field-list__ul__search button:disabled {
2263
+ opacity: 0.5;
2264
+ }
2265
+ .rls-design-system-filled .rls-field-list__ul__control {
2266
+ width: 100%;
2267
+ height: var(--rls-sizing-x12);
2268
+ line-height: var(--rls-sizing-x12);
2269
+ padding: 0rem;
2270
+ cursor: text;
2271
+ border: none;
2272
+ outline: none;
2273
+ background: rgba(0, 0, 0, 0);
2274
+ color: var(--rls-app-color-900);
2275
+ font-size: var(--rls-input-font-size);
2276
+ font-weight: var(--rls-font-weight-medium);
2277
+ letter-spacing: var(--rls-input-letter-spacing);
2278
+ }
2279
+ .rls-design-system-filled .rls-field-list__ul__control::placeholder {
2280
+ color: var(--rls-app-color-400);
2281
+ }
2282
+ .rls-design-system-filled .rls-field-list__ul__control::selection {
2283
+ background: var(--rls-theme-color-700);
2284
+ color: var(--rls-app-color-050);
2285
+ }
2286
+ .rls-design-system-filled .rls-field-list__ul__control:disabled {
2287
+ opacity: 0.5;
2288
+ pointer-events: none;
2289
+ }
2290
+ .rls-design-system-filled .rls-field-list__ul .rls-progress-bar {
2291
+ margin-bottom: var(--rls-sizing-x8);
2292
+ }
2293
+ .rls-design-system-filled .rls-field-money {
2294
+ --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2295
+ position: relative;
2296
+ width: 100%;
2297
+ box-sizing: border-box;
2298
+ }
2299
+ .rls-design-system-filled .rls-field-number {
2300
+ --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2301
+ position: relative;
2302
+ width: 100%;
2303
+ box-sizing: border-box;
2304
+ }
2305
+ .rls-design-system-filled .rls-field-password {
2306
+ --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2307
+ --rlc-action-ripple-dimension: var(--rls-sizing-x12);
2308
+ --rlc-action-ripple-position: -6rem;
2309
+ position: relative;
2310
+ width: 100%;
2311
+ box-sizing: border-box;
2312
+ }
2313
+ .rls-design-system-filled .rls-field-password .rls-button-action {
2314
+ padding: 0rem;
2315
+ width: var(--rls-sizing-x12);
2316
+ height: var(--rls-sizing-x12);
2317
+ z-index: 2;
2318
+ }
2319
+ .rls-design-system-filled .rls-field-percentage {
2320
+ --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2321
+ position: relative;
2322
+ width: 100%;
2323
+ box-sizing: border-box;
2324
+ }
2325
+ .rls-design-system-filled .rls-field-readonly {
2326
+ --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2327
+ --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-600));
2328
+ --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
2329
+ --pvt-letter-spacing: var(
2330
+ --rlc-input-letter-spacing,
2331
+ var(--rls-input-letter-spacing)
2332
+ );
2333
+ --pvt-height: var(--rlc-input-height, var(--rls-sizing-x12));
2334
+ --pvt-text-align: var(--rlc-input-text-align, left);
2335
+ --pvt-component-font-color: var(--pvt-font-color);
2336
+ position: relative;
2337
+ width: 100%;
2338
+ box-sizing: border-box;
2339
+ }
2340
+ .rls-design-system-filled .rls-field-text {
2341
+ --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2342
+ position: relative;
2343
+ width: 100%;
2344
+ box-sizing: border-box;
2345
+ }
2346
+ .rls-design-system-filled .rls-label-checkbox {
2347
+ --pvt-dimension: var(--rlc-label-checkbox-dimension, var(--rls-sizing-x12));
2348
+ --pvt-label-font-size: var(
2349
+ --rlc-label-checkbox-font-size,
2350
+ var(--rls-label-font-size)
2351
+ );
2352
+ --pvt-label-letter-spacing: var(
2353
+ --rlc-label-checkbox-letter-spacing,
2354
+ var(--rls-label-letter-spacing)
2355
+ );
2356
+ --rlc-checkbox-dimension: var(--pvt-dimension);
2357
+ --rlc-checkbox-cursor: pointer;
2358
+ --rlc-ballot-padding: 0rem;
2359
+ --pvt-text-opacity: 1;
2360
+ --pvt-text-overflow: hidden;
2361
+ --pvt-text-white-space: nowrap;
2362
+ --pvt-text-text-overflow: ellipsis;
2363
+ display: flex;
2364
+ column-gap: var(--rls-sizing-x4);
2365
+ align-items: center;
2366
+ }
2367
+ .rls-design-system-filled .rls-label-checkbox--disabled {
2368
+ --pvt-text-opacity: 0.5;
2369
+ pointer-events: none;
2370
+ }
2371
+ .rls-design-system-filled .rls-label-checkbox--reverse {
2372
+ flex-direction: row-reverse;
2373
+ }
2374
+ .rls-design-system-filled .rls-label-checkbox--extended {
2375
+ --pvt-text-text-overflow: initial;
2376
+ --pvt-text-overflow: initial;
2377
+ --pvt-text-white-space: initial;
2378
+ }
2379
+ .rls-design-system-filled .rls-label-checkbox__component {
2380
+ width: var(--pvt-dimension);
2381
+ flex: 0 0 auto;
2382
+ }
2383
+ .rls-design-system-filled .rls-label-checkbox__text {
2384
+ flex: 1 1 auto;
2385
+ font-size: var(--pvt-label-font-size);
2386
+ font-weight: var(--rls-font-weight-medium);
2387
+ letter-spacing: var(--pvt-label-letter-spacing);
2388
+ line-height: var(--rlc-label-checkbox-line-height, var(--rls-sizing-x12));
2389
+ color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-500));
2390
+ user-select: none;
2391
+ opacity: var(--pvt-text-opacity);
2392
+ overflow: hidden;
2393
+ }
2394
+ .rls-design-system-filled .rls-label-checkbox__text > p {
2395
+ height: initial;
2396
+ overflow: initial;
2397
+ text-overflow: initial;
2398
+ white-space: initial;
2399
+ }
2400
+ .rls-design-system-filled .rls-label-radiobutton {
2401
+ --pvt-dimension: var(
2402
+ --rlc-label-radiobutton-dimension,
2403
+ var(--rls-sizing-x12)
2404
+ );
2405
+ --pvt-label-font-size: var(
2406
+ --rlc-label-radiobutton-font-size,
2407
+ var(--rls-label-font-size)
2408
+ );
2409
+ --pvt-label-letter-spacing: var(
2410
+ --rlc-label-radiobutton-letter-spacing,
2411
+ var(--rls-label-letter-spacing)
2412
+ );
2413
+ --rlc-radiobutton-dimension: var(--pvt-dimension);
2414
+ --rlc-radiobutton-cursor: pointer;
2415
+ --rlc-ballot-padding: 0rem;
2416
+ --pvt-text-opacity: 1;
2417
+ --pvt-text-overflow: hidden;
2418
+ --pvt-text-white-space: nowrap;
2419
+ --pvt-text-text-overflow: ellipsis;
2420
+ display: flex;
2421
+ column-gap: var(--rls-sizing-x4);
2422
+ align-items: center;
2423
+ }
2424
+ .rls-design-system-filled .rls-label-radiobutton--disabled {
2425
+ --pvt-text-opacity: 0.5;
2426
+ pointer-events: none;
2427
+ }
2428
+ .rls-design-system-filled .rls-label-radiobutton--reverse {
2429
+ flex-direction: row-reverse;
2430
+ }
2431
+ .rls-design-system-filled .rls-label-radiobutton--extended {
2432
+ --pvt-text-text-overflow: initial;
2433
+ --pvt-text-overflow: initial;
2434
+ --pvt-text-white-space: initial;
2435
+ }
2436
+ .rls-design-system-filled .rls-label-radiobutton__component {
2437
+ width: var(--pvt-dimension);
2438
+ flex: 0 0 auto;
2439
+ }
2440
+ .rls-design-system-filled .rls-label-radiobutton__text {
2441
+ flex: 1 1 auto;
2442
+ font-size: var(--pvt-label-font-size);
2443
+ font-weight: var(--rls-font-weight-medium);
2444
+ letter-spacing: var(--pvt-label-letter-spacing);
2445
+ line-height: var(--rlc-label-radiobutton-line-height, var(--rls-sizing-x12));
2446
+ color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-500));
2447
+ user-select: none;
2448
+ opacity: var(--pvt-text-opacity);
2449
+ overflow: hidden;
2450
+ }
2451
+ .rls-design-system-filled .rls-label-radiobutton__text > p {
2452
+ height: initial;
2453
+ overflow: initial;
2454
+ text-overflow: initial;
2455
+ white-space: initial;
2456
+ }
2457
+ .rls-design-system-filled .rls-label-switch {
2458
+ --rlc-switch-cursor: pointer;
2459
+ --rlc-ballot-padding: 0rem;
2460
+ --pvt-label-font-size: var(
2461
+ --rlc-label-switch-font-size,
2462
+ var(--rls-label-font-size)
2463
+ );
2464
+ --pvt-label-letter-spacing: var(
2465
+ --rlc-label-switch-letter-spacing,
2466
+ var(--rls-label-letter-spacing)
2467
+ );
2468
+ --pvt-text-opacity: 1;
2469
+ --pvt-text-overflow: hidden;
2470
+ --pvt-text-white-space: nowrap;
2471
+ --pvt-text-text-overflow: ellipsis;
2472
+ display: flex;
2473
+ column-gap: var(--rls-sizing-x4);
2474
+ align-items: center;
2475
+ }
2476
+ .rls-design-system-filled .rls-label-switch--disabled {
2477
+ --pvt-text-opacity: 0.5;
2478
+ pointer-events: none;
2479
+ }
2480
+ .rls-design-system-filled .rls-label-switch--reverse {
2481
+ flex-direction: row-reverse;
2482
+ }
2483
+ .rls-design-system-filled .rls-label-switch--extended {
2484
+ --pvt-text-text-overflow: initial;
2485
+ --pvt-text-overflow: initial;
2486
+ --pvt-text-white-space: initial;
2487
+ --pvt-text-height: auto;
2488
+ }
2489
+ .rls-design-system-filled .rls-label-switch__component {
2490
+ width: var(--rlc-switch-max-width, var(--rls-sizing-x20));
2491
+ flex: 0 0 auto;
2492
+ }
2493
+ .rls-design-system-filled .rls-label-switch__text {
2494
+ flex: 1 1 auto;
2495
+ font-size: var(--pvt-label-font-size);
2496
+ font-weight: var(--rls-font-weight-medium);
2497
+ letter-spacing: var(--pvt-label-letter-spacing);
2498
+ line-height: var(--rlc-label-switch-line-height, var(--rls-sizing-x12));
2499
+ color: var(--rlc-label-switch-font-color, var(--rls-app-color-500));
2500
+ user-select: none;
2501
+ opacity: var(--pvt-text-opacity);
2502
+ overflow: hidden;
2503
+ }
2504
+ .rls-design-system-filled .rls-label-switch__text > p {
2505
+ height: initial;
2506
+ overflow: initial;
2507
+ text-overflow: initial;
2508
+ white-space: initial;
2509
+ }
2510
+ .rls-design-system-filled .rls-message-empty {
2511
+ --pvt-logo-size: var(--rlc-message-empty-logo-size, var(--rls-sizing-x32));
2512
+ --pvt-logo-background: var(--rls-app-color-100);
2513
+ --pvt-logo-color: var(--rls-app-color-600);
2514
+ --pvt-title-font-color: var(--rls-app-color-900);
2515
+ --pvt-content-font-color: var(--rls-app-color-500);
2516
+ position: relative;
2517
+ display: flex;
2518
+ width: 100%;
2519
+ flex-direction: column;
2520
+ align-items: var(--rlc-message-empty-align-items, center);
2521
+ row-gap: var(--rls-sizing-x4);
2522
+ padding: var(--rlc-message-empty-padding, var(--rls-sizing-x8));
2523
+ box-sizing: border-box;
2524
+ text-align: var(--rlc-message-empty-text-align, center);
2525
+ }
2526
+ .rls-design-system-filled .rls-message-empty__logo {
2527
+ --rlc-icon-color: var(--pvt-logo-color);
2528
+ --rlc-icon-font-size: calc(var(--pvt-logo-size) * 0.5);
2529
+ display: flex;
2530
+ width: var(--pvt-logo-size);
2531
+ height: var(--pvt-logo-size);
2532
+ align-items: center;
2533
+ justify-content: center;
2534
+ border-radius: 50%;
2535
+ background: var(--pvt-logo-background);
2536
+ overflow: hidden;
2537
+ box-sizing: border-box;
2538
+ }
2539
+ .rls-design-system-filled .rls-message-empty__logo--emoji {
2540
+ font-size: calc(var(--pvt-logo-size) * 0.7);
2541
+ line-height: 1;
2542
+ }
2543
+ .rls-design-system-filled .rls-message-empty__logo--image {
2544
+ width: 100%;
2545
+ height: 100%;
2546
+ object-fit: contain;
2547
+ }
2548
+ .rls-design-system-filled .rls-message-empty__title {
2549
+ width: 100%;
2550
+ color: var(--pvt-title-font-color);
2551
+ font-size: var(
2552
+ --rlc-message-empty-title-font-size,
2553
+ var(--rls-subtitle-font-size)
2554
+ );
2555
+ font-weight: var(--rls-font-weight-semibold);
2556
+ letter-spacing: var(--rls-subtitle-letter-spacing);
2557
+ line-height: var(--rls-subtitle-line-height);
2558
+ }
2559
+ .rls-design-system-filled .rls-message-empty__content {
2560
+ width: 100%;
2561
+ color: var(--pvt-content-font-color);
2562
+ font-size: var(
2563
+ --rlc-message-empty-content-font-size,
2564
+ var(--rls-paragraph-font-size)
2565
+ );
2566
+ letter-spacing: var(--rls-paragraph-letter-spacing);
2567
+ line-height: var(--rls-paragraph-line-height);
2568
+ }
2569
+ .rls-design-system-filled .rls-message-empty[rls-theme] {
2570
+ --pvt-logo-background: var(--rls-theme-color-100);
2571
+ --pvt-logo-color: var(--rls-theme-color-600);
2572
+ --pvt-title-font-color: var(--rls-theme-color-900);
2573
+ --pvt-content-font-color: var(--rls-theme-color-700);
2574
+ }
2575
+ .rls-design-system-filled .rls-pagination {
2576
+ --pvt-dimension: var(--rlc-pagination-dimension, var(--rls-sizing-x16));
2577
+ --pvt-description-display: block;
2578
+ --pvt-count-display: none;
2579
+ position: relative;
2580
+ display: flex;
2581
+ width: 100%;
2582
+ column-gap: var(--rlc-pagination-column-gap, var(--rls-sizing-x4));
2583
+ justify-content: center;
2584
+ align-items: center;
2585
+ overflow: hidden;
2586
+ height: var(
2587
+ --rlc-pagination-height,
2588
+ calc(var(--pvt-dimension) + var(--rls-sizing-x4))
2589
+ );
2590
+ padding: var(--rlc-pagination-padding, 0rem var(--rls-sizing-x6));
2591
+ box-sizing: border-box;
2592
+ }
2593
+ .rls-design-system-filled .rls-pagination__body {
2594
+ display: flex;
2595
+ width: auto;
2596
+ column-gap: var(--rls-sizing-x8);
2597
+ align-items: center;
2598
+ }
2599
+ .rls-design-system-filled .rls-pagination__pages {
2600
+ display: flex;
2601
+ width: auto;
2602
+ column-gap: var(--rls-sizing-x4);
2603
+ align-items: center;
2604
+ }
2605
+ .rls-design-system-filled .rls-pagination__page {
2606
+ background: var(--rls-app-color-200);
2607
+ color: var(--rls-app-color-900);
2608
+ cursor: default;
2609
+ text-align: center;
2610
+ width: var(--pvt-dimension);
2611
+ height: var(--pvt-dimension);
2612
+ line-height: var(--pvt-dimension);
2613
+ border-radius: var(--rls-sizing-x2);
2614
+ font-size: var(--rls-body-font-size);
2615
+ letter-spacing: var(--rls-body-letter-spacing);
2616
+ }
2617
+ .rls-design-system-filled .rls-pagination__page:hover {
2618
+ background: var(--rls-theme-color-300);
2619
+ color: var(--rls-theme-color-900);
2620
+ }
2621
+ .rls-design-system-filled .rls-pagination__page--active {
2622
+ background: var(--rls-theme-color-200);
2623
+ color: var(--rls-theme-color-900);
2624
+ }
2625
+ .rls-design-system-filled .rls-pagination__description {
2626
+ display: var(--pvt-description-display);
2627
+ width: auto;
2628
+ font-size: var(--rls-body-font-size);
2629
+ font-weight: var(--rls-font-weight-bold);
2630
+ letter-spacing: var(--rls-body-letter-spacing);
2631
+ color: var(--rls-app-color-900);
2632
+ }
2633
+ .rls-design-system-filled .rls-pagination__count {
2634
+ display: var(--pvt-count-display);
2635
+ font-size: var(--rls-body-font-size);
2636
+ font-weight: var(--rls-font-weight-bold);
2637
+ letter-spacing: var(--rls-body-letter-spacing);
2638
+ color: var(--rls-app-color-900);
2639
+ }
2640
+ .rls-design-system-filled .rls-pagination__actions {
2641
+ display: flex;
2642
+ width: auto;
2643
+ column-gap: var(--rls-sizing-x2);
2644
+ }
2645
+ .rls-design-system-filled .rls-pagination__action {
2646
+ --rlc-icon-dimension: calc(var(--pvt-dimension) - var(--rls-sizing-x4));
2647
+ background: none;
2648
+ outline: none;
2649
+ color: var(--rls-app-color-600);
2650
+ padding: var(--rls-sizing-x2);
2651
+ }
2652
+ .rls-design-system-filled .rls-pagination__action:hover {
2653
+ color: var(--rls-theme-color-300);
2654
+ cursor: pointer;
2655
+ }
2656
+ .rls-design-system-filled .rls-pagination__action:disabled {
2657
+ pointer-events: none;
2658
+ opacity: 0.5;
2659
+ }
2660
+ @media screen and (max-width: 640px) {
2661
+ .rls-design-system-filled .rls-pagination {
2662
+ --pvt-description-display: none;
2663
+ --pvt-count-display: block;
2664
+ padding: 0rem;
2665
+ }
2666
+ }
2667
+ .rls-design-system-filled .rls-picker-day {
2668
+ --pvt-span-background: transparent;
2669
+ --pvt-span-font-color: var(--rls-app-color-900);
2670
+ --pvt-span-box-shadow: none;
2671
+ position: relative;
2672
+ display: var(--rlc-picker-day-display, flex);
2673
+ width: 100%;
2674
+ max-width: 140rem;
2675
+ flex-direction: column;
2676
+ row-gap: var(--rls-sizing-x2);
2677
+ box-sizing: border-box;
2678
+ user-select: none;
2679
+ }
2680
+ .rls-design-system-filled .rls-picker-day__header {
2681
+ display: flex;
2682
+ }
2683
+ .rls-design-system-filled .rls-picker-day__label {
2684
+ width: 100%;
2685
+ height: var(--rls-sizing-x20);
2686
+ line-height: var(--rls-sizing-x20);
2687
+ text-align: center;
2688
+ font-size: var(--rls-caption-font-size);
2689
+ color: var(--rls-app-color-600);
2690
+ font-weight: var(--rls-font-weight-regular);
2691
+ letter-spacing: var(--rls-caption-letter-spacing);
2692
+ }
2693
+ .rls-design-system-filled .rls-picker-day__component {
2694
+ display: flex;
2695
+ flex-direction: column;
2696
+ row-gap: var(--rls-sizing-x3);
2697
+ }
2698
+ .rls-design-system-filled .rls-picker-day__week {
2699
+ display: flex;
2700
+ }
2701
+ .rls-design-system-filled .rls-picker-day__element {
2702
+ text-align: center;
2703
+ padding: var(--rls-sizing-x1);
2704
+ box-sizing: border-box;
2705
+ }
2706
+ .rls-design-system-filled .rls-picker-day__element--today {
2707
+ --pvt-span-background: transparent;
2708
+ --pvt-span-font-color: var(--rls-theme-color-500);
2709
+ --pvt-span-box-shadow: var(--rls-theme-shadow-500);
2710
+ }
2711
+ .rls-design-system-filled .rls-picker-day__element--selected {
2712
+ --pvt-span-background: var(--rls-theme-color-200);
2713
+ --pvt-span-font-color: var(--rls-theme-color-950);
2714
+ --pvt-span-box-shadow: none;
2715
+ }
2716
+ .rls-design-system-filled .rls-picker-day__element--focused {
2717
+ --pvt-span-background: var(--rls-theme-color-200);
2718
+ --pvt-span-font-color: var(--rls-theme-color-950);
2719
+ --pvt-span-box-shadow: none;
2720
+ }
2721
+ .rls-design-system-filled .rls-picker-day__element--forbidden {
2722
+ --pvt-span-background: var(--rls-app-color-100);
2723
+ --pvt-span-font-color: var(--rls-app-color-400);
2724
+ --pvt-span-border: var(--rls-app-border-1-100);
2725
+ --pvt-span-box-shadow: none;
2726
+ pointer-events: none;
2727
+ }
2728
+ .rls-design-system-filled .rls-picker-day__element--disabled {
2729
+ --pvt-span-background: transparent;
2730
+ --pvt-span-font-color: var(--rls-app-color-400);
2731
+ --pvt-span-box-shadow: none;
2732
+ pointer-events: none;
2733
+ }
2734
+ .rls-design-system-filled .rls-picker-day__element__span {
2735
+ position: relative;
2736
+ display: block;
2737
+ font-size: var(--rls-paragraph-font-size);
2738
+ font-weight: var(--rls-font-weight-semibold);
2739
+ border-radius: var(--rls-sizing-x4);
2740
+ height: var(--rls-sizing-x18);
2741
+ line-height: var(--rls-sizing-x18);
2742
+ box-sizing: border-box;
2743
+ letter-spacing: var(--rls-paragraph-letter-spacing);
2744
+ box-shadow: var(--pvt-span-box-shadow);
2745
+ }
2746
+ .rls-design-system-filled .rls-picker-day__element__span:not(:hover) {
2747
+ color: var(--pvt-span-font-color);
2748
+ background: var(--pvt-span-background);
2749
+ }
2750
+ .rls-design-system-filled .rls-picker-day__element__span:hover {
2751
+ color: var(--rls-theme-color-050);
2752
+ background: var(--rls-theme-color-800);
2753
+ }
2754
+ .rls-design-system-filled .rls-picker-day-range {
2755
+ --pvt-span-nothover-background: transparent;
2756
+ --pvt-span-nothover-font-color: inherit;
2757
+ --pvt-span-background: transparent;
2758
+ position: relative;
2759
+ display: var(--rlc-picker-day-range-display, flex);
2760
+ width: 100%;
2761
+ max-width: 140rem;
2762
+ flex-direction: column;
2763
+ row-gap: var(--rls-sizing-x4);
2764
+ box-sizing: border-box;
2765
+ user-select: none;
2766
+ }
2767
+ .rls-design-system-filled .rls-picker-day-range__title {
2768
+ color: var(--rls-app-color-600);
2769
+ text-align: center;
2770
+ font-size: var(--rls-body-font-size);
2771
+ letter-spacing: var(--rls-body-letter-spacing);
2772
+ line-height: var(--rls-body-line-height);
2773
+ font-weight: var(--rls-font-weight-bold);
2774
+ }
2775
+ .rls-design-system-filled .rls-picker-day-range__header {
2776
+ display: flex;
2777
+ }
2778
+ .rls-design-system-filled .rls-picker-day-range__label {
2779
+ width: 100%;
2780
+ height: var(--rls-sizing-x20);
2781
+ line-height: var(--rls-sizing-x20);
2782
+ text-align: center;
2783
+ font-size: var(--rls-caption-font-size);
2784
+ color: var(--rls-app-color-600);
2785
+ font-weight: var(--rls-font-weight-regular);
2786
+ letter-spacing: var(--rls-caption-letter-spacing);
2787
+ }
2788
+ .rls-design-system-filled .rls-picker-day-range__component {
2789
+ display: flex;
2790
+ flex-direction: column;
2791
+ row-gap: var(--rls-sizing-x3);
2792
+ }
2793
+ .rls-design-system-filled .rls-picker-day-range__week {
2794
+ display: flex;
2795
+ }
2796
+ .rls-design-system-filled .rls-picker-day-range__element {
2797
+ text-align: center;
2798
+ padding: var(--rls-sizing-x1);
2799
+ box-sizing: border-box;
2800
+ }
2801
+ .rls-design-system-filled .rls-picker-day-range__element--ranged {
2802
+ --pvt-span-nothover-background: var(--rls-theme-color-050);
2803
+ }
2804
+ .rls-design-system-filled .rls-picker-day-range__element--end {
2805
+ --pvt-span-nothover-font-color: var(--rls-theme-color-050);
2806
+ --pvt-span-nothover-background: var(--rls-theme-color-500);
2807
+ }
2808
+ .rls-design-system-filled .rls-picker-day-range__element--source {
2809
+ --pvt-span-nothover-font-color: var(--rls-theme-color-950);
2810
+ --pvt-span-nothover-background: var(--rls-theme-color-300);
2811
+ }
2812
+ .rls-design-system-filled .rls-picker-day-range__element--forbidden {
2813
+ --pvt-span-background: var(--rls-app-color-200);
2814
+ opacity: 0.5;
2815
+ pointer-events: none;
2816
+ }
2817
+ .rls-design-system-filled .rls-picker-day-range__element--disabled {
2818
+ opacity: 0.5;
2819
+ pointer-events: none;
2820
+ }
2821
+ .rls-design-system-filled .rls-picker-day-range__element__span {
2822
+ position: relative;
2823
+ display: block;
2824
+ font-size: var(--rls-paragraph-font-size);
2825
+ font-weight: var(--rls-font-weight-semibold);
2826
+ border-radius: var(--rls-sizing-x4);
2827
+ height: var(--rls-sizing-x18);
2828
+ line-height: var(--rls-sizing-x18);
2829
+ box-sizing: border-box;
2830
+ letter-spacing: var(--rls-paragraph-letter-spacing);
2831
+ }
2832
+ .rls-design-system-filled .rls-picker-day-range__element__span:not(:hover) {
2833
+ color: var(--pvt-span-nothover-font-color);
2834
+ background: var(--pvt-span-nothover-background);
2835
+ }
2836
+ .rls-design-system-filled .rls-picker-day-range__element__span:hover {
2837
+ color: var(--rls-app-color-050);
2838
+ background: var(--rls-theme-color-900);
2839
+ }
2840
+ .rls-design-system-filled .rls-picker-month {
2841
+ --pvt-component-background: transparent;
2842
+ --pvt-component-font-color: var(--rls-app-color-900);
2843
+ position: relative;
2844
+ display: var(--rlc-picker-month-display, grid);
2845
+ grid-template-columns: repeat(3, 1fr);
2846
+ width: 100%;
2847
+ max-width: 140rem;
2848
+ column-gap: var(--rls-sizing-x2);
2849
+ row-gap: var(--rls-sizing-x4);
2850
+ padding: var(--rls-sizing-x1);
2851
+ box-sizing: border-box;
2852
+ }
2853
+ .rls-design-system-filled .rls-picker-month__component {
2854
+ position: relative;
2855
+ display: flex;
2856
+ box-sizing: border-box;
2857
+ justify-content: center;
2858
+ align-items: center;
2859
+ height: var(--rls-sizing-x20);
2860
+ border-radius: var(--rls-sizing-x4);
2861
+ box-sizing: border-box;
2862
+ }
2863
+ .rls-design-system-filled .rls-picker-month__component:not(:hover) {
2864
+ color: var(--pvt-component-font-color);
2865
+ background: var(--pvt-component-background);
2866
+ }
2867
+ .rls-design-system-filled .rls-picker-month__component:hover {
2868
+ color: var(--rls-theme-color-050);
2869
+ background: var(--rls-theme-color-900);
2870
+ }
2871
+ .rls-design-system-filled .rls-picker-month__component--selected {
2872
+ --pvt-component-font-color: var(--rls-theme-color-950);
2873
+ --pvt-component-background: var(--rls-theme-color-200);
2874
+ }
2875
+ .rls-design-system-filled .rls-picker-month__component--focused {
2876
+ --pvt-component-font-color: var(--rls-theme-color-950);
2877
+ --pvt-component-background: var(--rls-theme-color-200);
2878
+ }
2879
+ .rls-design-system-filled .rls-picker-month__component--disabled {
2880
+ --pvt-component-font-color: var(--rls-app-color-400);
2881
+ --pvt-component-background: transparent;
2882
+ pointer-events: none;
2883
+ }
2884
+ .rls-design-system-filled .rls-picker-month__span {
2885
+ cursor: default;
2886
+ font-size: var(--rls-caption-font-size);
2887
+ letter-spacing: var(--rls-caption-letter-spacing);
2888
+ font-weight: var(--rls-font-weight-semibold);
2889
+ pointer-events: none;
2890
+ }
2891
+ .rls-design-system-filled .rls-picker-selector-title {
2892
+ display: flex;
2893
+ justify-content: space-between;
2894
+ align-items: center;
2895
+ padding: var(--rlc-picker-selector-title-padding, 0rem);
2896
+ box-sizing: border-box;
2897
+ border-radius: var(--rlc-picker-selector-title-radius, 0rem);
2898
+ background: var(--rlc-picker-selector-title-background, transparent);
2899
+ }
2900
+ .rls-design-system-filled .rls-picker-selector-title__label {
2901
+ display: flex;
2902
+ column-gap: var(--rls-sizing-x3);
2903
+ justify-content: center;
2904
+ }
2905
+ .rls-design-system-filled .rls-picker-selector-title__label > span {
2906
+ cursor: default;
2907
+ height: var(--rls-sizing-x14);
2908
+ line-height: var(--rls-sizing-x14);
2909
+ font-size: var(--rls-body-font-size);
2910
+ letter-spacing: var(--rls-body-letter-spacing);
2911
+ font-weight: var(--rls-font-weight-bold);
2912
+ }
2913
+ .rls-design-system-filled .rls-picker-selector-title__label > span:hover {
2914
+ color: var(--rls-theme-color-500);
2915
+ }
2916
+ .rls-design-system-filled .rls-picker-selector-title > button {
2917
+ --rlc-icon-dimension: var(--rls-sizing-x10);
2918
+ background: var(--rls-app-color-050);
2919
+ outline: none;
2920
+ padding: var(--rls-sizing-x2);
2921
+ border-radius: var(--rls-sizing-x4);
2922
+ color: var(--rls-app-color-900);
2923
+ }
2924
+ .rls-design-system-filled .rls-picker-selector-title > button:hover {
2925
+ background: var(--rls-app-color-300);
2926
+ }
2927
+ .rls-design-system-filled .rls-picker-selector-title > button:disabled {
2928
+ opacity: 0.5;
2929
+ background: rgba(0, 0, 0, 0);
2930
+ color: var(--rls-app-color-600);
2931
+ }
2932
+ .rls-design-system-filled .rls-picker-year {
2933
+ --pvt-component-background: transparent;
2934
+ --pvt-component-font-color: var(--rls-app-color-600);
2935
+ position: relative;
2936
+ display: var(--rlc-picker-year-display, block);
2937
+ width: 100%;
2938
+ max-width: 140rem;
2939
+ box-sizing: border-box;
2940
+ overflow: hidden;
2941
+ user-select: none;
2942
+ }
2943
+ .rls-design-system-filled .rls-picker-year__header {
2944
+ display: flex;
2945
+ justify-content: space-between;
2946
+ align-items: center;
2947
+ box-sizing: border-box;
2948
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
2949
+ border-radius: var(--rls-sizing-x6);
2950
+ }
2951
+ .rls-design-system-filled .rls-picker-year__header > span {
2952
+ font-size: var(--rls-body-font-size);
2953
+ letter-spacing: var(--rls-body-letter-spacing);
2954
+ font-weight: var(--rls-font-weight-semibold);
2955
+ color: var(--rls-app-color-900);
2956
+ }
2957
+ .rls-design-system-filled .rls-picker-year__action {
2958
+ --rlc-icon-dimension: var(--rls-sizing-x10);
2959
+ background: var(--rls-theme-color-100);
2960
+ color: var(--rls-theme-color-600);
2961
+ outline: none;
2962
+ padding: var(--rls-sizing-x2);
2963
+ border-radius: var(--rls-sizing-x4);
2964
+ }
2965
+ .rls-design-system-filled .rls-picker-year__action:not(:disabled):hover {
2966
+ color: var(--rls-theme-color-500);
2967
+ }
2968
+ .rls-design-system-filled .rls-picker-year__action:disabled {
2969
+ opacity: 0.5;
2970
+ background: rgba(0, 0, 0, 0);
2971
+ color: var(--rls-theme-color-300);
2972
+ }
2973
+ .rls-design-system-filled .rls-picker-year__component {
2974
+ position: relative;
2975
+ display: grid;
2976
+ width: 100%;
2977
+ grid-template-columns: repeat(3, 1fr);
2978
+ padding: var(--rls-sizing-x4);
2979
+ box-sizing: border-box;
2980
+ row-gap: var(--rls-sizing-x6);
2981
+ column-gap: var(--rls-sizing-x8);
2982
+ }
2983
+ .rls-design-system-filled .rls-picker-year__element {
2984
+ position: relative;
2985
+ display: flex;
2986
+ height: var(--rls-sizing-x20);
2987
+ align-items: center;
2988
+ justify-content: center;
2989
+ box-sizing: border-box;
2990
+ text-align: center;
2991
+ border-radius: var(--rls-sizing-x4);
2992
+ box-shadow: none;
2993
+ }
2994
+ .rls-design-system-filled .rls-picker-year__element:not(:hover) {
2995
+ color: var(--pvt-component-font-color);
2996
+ background: var(--pvt-component-background);
2997
+ }
2998
+ .rls-design-system-filled .rls-picker-year__element:hover {
2999
+ color: var(--rls-theme-color-050);
3000
+ background: var(--rls-theme-color-900);
3001
+ }
3002
+ .rls-design-system-filled .rls-picker-year__element--selected {
3003
+ --pvt-component-font-color: var(--rls-theme-color-950);
3004
+ --pvt-component-background: var(--rls-theme-color-200);
3005
+ }
3006
+ .rls-design-system-filled .rls-picker-year__element--focused {
3007
+ --pvt-component-font-color: var(--rls-theme-color-950);
3008
+ --pvt-component-background: var(--rls-theme-color-200);
3009
+ }
3010
+ .rls-design-system-filled .rls-picker-year__element--disabled {
3011
+ --pvt-component-font-color: var(--rls-app-color-400);
3012
+ --pvt-span-background: var(--rls-app-color-100);
3013
+ pointer-events: none;
3014
+ }
3015
+ .rls-design-system-filled .rls-picker-year__span {
3016
+ cursor: default;
3017
+ font-size: var(--rls-body-font-size);
3018
+ letter-spacing: var(--rls-body-letter-spacing);
3019
+ font-weight: var(--rls-font-weight-medium);
3020
+ pointer-events: none;
3021
+ }
3022
+ .rls-design-system-filled .rls-slider {
3023
+ --pvt-track-height: var(--rls-sizing-x3);
3024
+ --pvt-thumb-background: var(--rls-theme-color-600);
3025
+ --pvt-thumb-color: var(--rls-theme-color-050);
3026
+ }
3027
+ .rls-design-system-filled .rls-slider--empty {
3028
+ --pvt-thumb-background: var(--rls-app-color-300);
3029
+ --pvt-thumb-color: var(--rls-app-color-900);
3030
+ }
3031
+ .rls-design-system-filled .rls-slider__component {
3032
+ position: relative;
3033
+ width: calc(100% - var(--rls-sizing-x10));
3034
+ margin: 0rem 5rem;
3035
+ padding: var(--rls-sizing-x4) 0rem;
3036
+ box-sizing: border-box;
3037
+ }
3038
+ .rls-design-system-filled .rls-slider__body {
3039
+ display: flex;
3040
+ column-gap: var(--rls-sizing-x4);
3041
+ align-items: center;
3042
+ }
3043
+ .rls-design-system-filled .rls-slider__body .rls-icon {
3044
+ padding: var(--rls-sizing-x4);
3045
+ border-radius: 50%;
3046
+ background: var(--rls-app-color-300);
3047
+ }
3048
+ .rls-design-system-filled .rls-slider__track {
3049
+ position: relative;
3050
+ width: 100%;
3051
+ height: var(--pvt-track-height);
3052
+ cursor: pointer;
3053
+ background: var(--rls-app-color-300);
3054
+ }
3055
+ .rls-design-system-filled .rls-slider__track__on {
3056
+ position: absolute;
3057
+ width: 0%;
3058
+ height: var(--pvt-track-height);
3059
+ overflow: hidden;
3060
+ z-index: var(--rls-z-index-4);
3061
+ transition: width 200ms 0ms var(--rls-standard-curve);
3062
+ background: var(--rls-theme-color-600);
3063
+ }
3064
+ .rls-design-system-filled .rls-slider__thumb {
3065
+ position: absolute;
3066
+ top: 0.5rem;
3067
+ left: 0rem;
3068
+ cursor: pointer;
3069
+ width: var(--rls-sizing-x10);
3070
+ height: var(--rls-sizing-x10);
3071
+ line-height: var(--rls-sizing-x10);
3072
+ text-align: center;
3073
+ font-size: var(--rls-tiny-font-size);
3074
+ font-weight: var(--rls-font-weight-medium);
3075
+ color: var(--pvt-thumb-color);
3076
+ z-index: var(--rls-z-index-4);
3077
+ border-radius: 50%;
3078
+ background: var(--pvt-thumb-background);
3079
+ transform: translateX(-50%);
3080
+ transition: left 200ms 0ms var(--rls-standard-curve);
3081
+ }
3082
+ .rls-design-system-filled .rls-tabs {
3083
+ --pvt-background: var(--rls-app-color-200);
3084
+ --pvt-children-font-color: var(--rls-app-color-800);
3085
+ display: flex;
3086
+ background: var(--pvt-background);
3087
+ padding: var(--rls-sizing-x2);
3088
+ box-sizing: border-box;
3089
+ border-radius: var(--rls-sizing-x4);
3090
+ }
3091
+ .rls-design-system-filled .rls-tabs__children {
3092
+ height: var(--rls-sizing-x12);
3093
+ line-height: var(--rls-sizing-x12);
3094
+ border-radius: var(--rls-sizing-x4);
3095
+ color: var(--rls-app-color-500);
3096
+ font-size: var(--rls-smalltext-font-size);
3097
+ font-weight: var(--rls-font-weight-medium);
3098
+ letter-spacing: var(--rls-smalltext-letter-spacing);
3099
+ text-align: center;
3100
+ cursor: pointer;
3101
+ transition: all 240ms var(--rls-standard-curve);
3102
+ }
3103
+ .rls-design-system-filled .rls-tabs__children--active {
3104
+ color: var(--pvt-children-font-color);
3105
+ font-weight: var(--rls-font-weight-bold);
3106
+ background: var(--rls-app-color-050);
3107
+ }
3108
+ .rls-design-system-filled .rls-tabs__children--disabled {
3109
+ color: var(--rls-app-color-400);
3110
+ font-weight: var(--rls-font-weight-regular);
3111
+ background: rgba(0, 0, 0, 0);
3112
+ cursor: not-allowed;
3113
+ }
3114
+ .rls-design-system-filled .rls-tabs[rls-theme] {
3115
+ --pvt-background: var(--rls-theme-color-100);
3116
+ --pvt-children-font-color: var(--rls-theme-color-700);
3117
+ }
3118
+ .rls-design-system-filled .rls-toolbar {
3119
+ display: flex;
3120
+ justify-content: space-between;
3121
+ align-items: center;
3122
+ column-gap: var(--rls-sizing-x6);
3123
+ height: var(--rlc-toolbar-height, var(--rls-sizing-x28));
3124
+ }
3125
+ .rls-design-system-filled .rls-toolbar > * {
3126
+ width: auto;
3127
+ }
3128
+ .rls-design-system-filled .rls-toolbar__description {
3129
+ display: flex;
3130
+ flex-direction: column;
3131
+ row-gap: var(--rls-sizing-x2);
3132
+ overflow: hidden;
3133
+ }
3134
+ .rls-design-system-filled .rls-toolbar__description > label {
3135
+ position: relative;
3136
+ width: 100%;
3137
+ overflow: hidden;
3138
+ text-overflow: ellipsis;
3139
+ white-space: nowrap;
3140
+ }
3141
+ .rls-design-system-filled .rls-toolbar__title {
3142
+ color: var(--rls-app-color-900);
3143
+ height: var(--rls-sizing-x12);
3144
+ line-height: var(--rls-sizing-x12);
3145
+ font-size: var(--rls-body-font-size);
3146
+ letter-spacing: var(--rls-label-letter-spacing);
3147
+ font-weight: var(--rls-font-weight-bold);
3148
+ }
3149
+ .rls-design-system-filled .rls-toolbar__subtitle {
3150
+ color: var(--rls-app-color-600);
3151
+ }
3152
+ .rls-design-system-filled .rls-toolbar__actions {
3153
+ display: flex;
3154
+ box-sizing: border-box;
3155
+ column-gap: var(--rls-sizing-x8);
3156
+ align-items: center;
3157
+ }
3158
+ .rls-design-system-filled .rls-bottom-sheet {
3159
+ --pvt-component-transform: translateY(100%);
3160
+ --pvt-component-height: 0rem;
3161
+ --pvt-component-max-height: 75%;
3162
+ --pvt-component-opacity: 0;
3163
+ --pvt-component-visibility: hidden;
3164
+ --pvt-component-transition: 320ms;
3165
+ --pvt-backdrop-opacity: 0;
3166
+ --pvt-backdrop-bottom: initial;
3167
+ position: fixed;
3168
+ display: flex;
3169
+ top: 0rem;
3170
+ left: 0rem;
3171
+ width: 100%;
3172
+ height: 100%;
3173
+ justify-content: center;
3174
+ z-index: var(--rls-z-index-24);
3175
+ visibility: hidden;
3176
+ }
3177
+ .rls-design-system-filled .rls-bottom-sheet--visible {
3178
+ --pvt-component-visibility: visible;
3179
+ --pvt-component-height: auto;
3180
+ --pvt-component-opacity: 1;
3181
+ --pvt-component-transform: translateY(0);
3182
+ --pvt-backdrop-bottom: 0rem;
3183
+ --pvt-backdrop-opacity: 1;
3184
+ visibility: visible;
3185
+ }
3186
+ .rls-design-system-filled .rls-bottom-sheet__component {
3187
+ position: absolute;
3188
+ display: flex;
3189
+ bottom: 0px;
3190
+ width: 100%;
3191
+ max-width: 240rem;
3192
+ max-height: var(--pvt-component-max-height);
3193
+ flex-direction: column;
3194
+ opacity: var(--pvt-component-opacity);
3195
+ visibility: var(--pvt-component-visibility);
3196
+ z-index: var(--rls-z-index-2);
3197
+ border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
3198
+ background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
3199
+ transform: var(--pvt-component-transform);
3200
+ transition:
3201
+ opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
3202
+ transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
3203
+ visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
3204
+ }
3205
+ .rls-design-system-filled .rls-bottom-sheet__component::before {
3206
+ display: block;
3207
+ content: '';
3208
+ width: var(--rls-sizing-x24);
3209
+ height: var(--rls-sizing-x2);
3210
+ border-radius: var(--rls-sizing-x2);
3211
+ background: var(--rls-app-color-300);
3212
+ margin: var(--rls-sizing-x3) auto;
3213
+ }
3214
+ .rls-design-system-filled .rls-bottom-sheet__backdrop {
3215
+ position: absolute;
3216
+ display: block;
3217
+ top: 0rem;
3218
+ left: 0rem;
3219
+ right: 0rem;
3220
+ bottom: var(--pvt-backdrop-bottom);
3221
+ opacity: var(--pvt-backdrop-opacity);
3222
+ z-index: var(--rls-z-index-1);
3223
+ background: var(
3224
+ --rlc-bottom-sheet-backdrop-color,
3225
+ var(--rls-theme-backdrop-400)
3226
+ );
3227
+ backdrop-filter: var(--rlc-bottom-sheet-backdrop-filter, blur(2px));
3228
+ transition:
3229
+ opacity 120ms 0ms var(--rls-deceleration-curve),
3230
+ bottom 120ms 0ms var(--rls-deceleration-curve);
3231
+ }
3232
+ @media screen and (max-height: 960px) {
3233
+ .rls-design-system-filled .rls-bottom-sheet {
3234
+ --pvt-component-max-height: calc(100% - 32rem);
3235
+ }
3236
+ }
3237
+ @media screen and (max-height: 720px) {
3238
+ .rls-design-system-filled .rls-bottom-sheet {
3239
+ --pvt-component-max-height: calc(100% - 24rem);
3240
+ }
3241
+ }
3242
+ @media screen and (max-height: 560px) {
3243
+ .rls-design-system-filled .rls-bottom-sheet {
3244
+ --pvt-component-max-height: calc(100% - 16rem);
3245
+ }
3246
+ }
3247
+ .rls-design-system-filled .rls-card {
3248
+ --rlc-divider-background: var(--rls-app-color-300);
3249
+ --pvt-background: var(--rls-app-color-050);
3250
+ background: var(--pvt-background);
3251
+ border-radius: var(--rls-sizing-x6);
3252
+ }
3253
+ .rls-design-system-filled .rls-card[rls-theme] {
3254
+ --rlc-divider-background: var(--rls-theme-color-200);
3255
+ --pvt-background: var(--rls-theme-color-100);
3256
+ }
3257
+ .rls-design-system-filled .rls-card__content {
3258
+ display: flex;
3259
+ flex-direction: column;
3260
+ row-gap: var(--rlc-card-content-gap, var(--rls-sizing-x4));
3261
+ padding: var(--rlc-card-content-padding, var(--rls-sizing-x8));
3262
+ box-sizing: border-box;
3263
+ }
3264
+ .rls-design-system-filled .rls-confirmation {
3265
+ --pvt-component-transform: translateY(150px) scale(0.6);
3266
+ --pvt-component-height: 0rem;
3267
+ --pvt-component-opacity: 0;
3268
+ --pvt-component-visibility: hidden;
3269
+ --pvt-title-font-size: var(--rls-heading6-font-size);
3270
+ --pvt-title-letter-spacing: var(--rls-heading6-letter-spacing);
3271
+ --pvt-title-line-height: var(--rls-heading6-line-height);
3272
+ --pvt-title-text-transform: initial;
3273
+ --pvt-subtitle-font-size: var(--rls-body-font-size);
3274
+ --pvt-subtitle-letter-spacing: var(--rls-body-letter-spacing);
3275
+ --pvt-subtitle-line-height: var(--rls-body-line-height);
3276
+ --pvt-subtitle-text-transform: initial;
3277
+ --pvt-content-font-size: var(--rls-input-font-size);
3278
+ --pvt-content-letter-spacing: var(--rls-input-letter-spacing);
3279
+ --pvt-content-line-height: var(--rls-input-line-height);
3280
+ --pvt-backdrop-opacity: 0;
3281
+ --pvt-backdrop-bottom: initial;
3282
+ position: fixed;
3283
+ display: flex;
3284
+ top: 0rem;
3285
+ left: 0rem;
3286
+ width: var(--rls-html-max-width);
3287
+ height: var(--rls-html-max-height);
3288
+ justify-content: center;
3289
+ align-items: center;
3290
+ z-index: var(--rls-z-index-24);
3291
+ visibility: hidden;
3292
+ }
3293
+ .rls-design-system-filled .rls-confirmation--visible {
3294
+ --pvt-component-visibility: visible;
3295
+ --pvt-component-height: auto;
3296
+ --pvt-component-opacity: 1;
3297
+ --pvt-component-transform: translateY(0) scale(1);
3298
+ --pvt-backdrop-bottom: 0rem;
3299
+ --pvt-backdrop-opacity: 1;
3300
+ visibility: visible;
3301
+ }
3302
+ .rls-design-system-filled .rls-confirmation__component {
3303
+ position: absolute;
3304
+ display: flex;
3305
+ width: calc(100% - var(--rls-sizing-x16));
3306
+ max-width: 180rem;
3307
+ height: var(--pvt-component-height);
3308
+ flex-direction: column;
3309
+ row-gap: var(--rls-sizing-x8);
3310
+ opacity: var(--pvt-component-opacity);
3311
+ visibility: var(--pvt-component-visibility);
3312
+ padding: var(--rls-sizing-x8) 0rem;
3313
+ box-sizing: border-box;
3314
+ z-index: var(--rls-z-index-4);
3315
+ border-radius: var(--rls-sizing-x4);
3316
+ background: var(--rls-app-color-050);
3317
+ box-shadow: var(--rls-app-shadow-4);
3318
+ transform: var(--pvt-component-transform);
3319
+ transition:
3320
+ opacity 125ms 0ms var(--rls-deceleration-curve),
3321
+ transform 125ms 0ms var(--rls-deceleration-curve),
3322
+ visibility 125ms 0ms var(--rls-deceleration-curve);
3323
+ }
3324
+ .rls-design-system-filled .rls-confirmation__header {
3325
+ position: relative;
3326
+ display: flex;
3327
+ width: 100%;
3328
+ flex-direction: column;
3329
+ row-gap: var(--rls-sizing-x4);
3330
+ padding: 0rem var(--rls-sizing-x8);
3331
+ box-sizing: border-box;
3332
+ }
3333
+ .rls-design-system-filled .rls-confirmation__title {
3334
+ text-align: center;
3335
+ color: var(--rls-app-color-900);
3336
+ font-weight: var(--rls-font-weight-bold);
3337
+ font-size: var(--pvt-title-font-size);
3338
+ line-height: var(--pvt-title-line-height);
3339
+ letter-spacing: var(--pvt-title-letter-spacing);
3340
+ text-transform: var(--pvt-title-text-transform);
3341
+ }
3342
+ .rls-design-system-filled .rls-confirmation__subtitle {
3343
+ text-align: center;
3344
+ color: var(--rls-theme-color-400);
3345
+ font-weight: var(--rls-font-weight-bold);
3346
+ font-size: var(--pvt-subtitle-font-size);
3347
+ line-height: var(--pvt-subtitle-line-height);
3348
+ letter-spacing: var(--pvt-subtitle-letter-spacing);
3349
+ text-transform: var(--pvt-subtitle-text-transform);
3350
+ }
3351
+ .rls-design-system-filled .rls-confirmation__body {
3352
+ position: relative;
3353
+ width: 100%;
3354
+ padding: 0rem var(--rls-sizing-x8);
3355
+ box-sizing: border-box;
3356
+ }
3357
+ .rls-design-system-filled .rls-confirmation__content {
3358
+ display: flex;
3359
+ flex-direction: column;
3360
+ row-gap: var(--rls-sizing-x8);
3361
+ }
3362
+ .rls-design-system-filled .rls-confirmation__content > p {
3363
+ font-weight: var(--rls-font-weight-medium);
3364
+ font-size: var(--pvt-content-font-size);
3365
+ line-height: var(--pvt-content-line-height);
3366
+ letter-spacing: var(--pvt-content-letter-spacing);
3367
+ text-align: center;
3368
+ color: var(--rls-app-color-600);
3369
+ }
3370
+ .rls-design-system-filled .rls-confirmation__footer {
3371
+ position: relative;
3372
+ width: 100%;
3373
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x12) 0rem var(--rls-sizing-x12);
3374
+ box-sizing: border-box;
3375
+ }
3376
+ .rls-design-system-filled .rls-confirmation__actions {
3377
+ --rlc-button-width: 100%;
3378
+ position: relative;
3379
+ display: flex;
3380
+ width: 100%;
3381
+ flex-direction: row-reverse;
3382
+ justify-content: center;
3383
+ column-gap: var(--rls-sizing-x8);
3384
+ }
3385
+ .rls-design-system-filled .rls-confirmation__backdrop {
3386
+ position: absolute;
3387
+ display: block;
3388
+ top: 0px;
3389
+ left: 0px;
3390
+ right: 0px;
3391
+ bottom: var(--pvt-backdrop-bottom);
3392
+ opacity: var(--pvt-backdrop-opacity);
3393
+ z-index: var(--rls-z-index-2);
3394
+ background: var(--rlc-modal-backdrop-color, var(--rls-theme-backdrop-400));
3395
+ backdrop-filter: var(--rlc-modal-backdrop-filter, blur(2px));
3396
+ transition:
3397
+ opacity 120ms 0ms var(--rls-deceleration-curve),
3398
+ bottom 120ms 0ms var(--rls-deceleration-curve);
3399
+ }
3400
+ @media screen and (max-width: 480px) {
3401
+ .rls-design-system-filled .rls-confirmation {
3402
+ --pvt-title-font-size: var(--rls-title-font-size);
3403
+ --pvt-title-letter-spacing: var(--rls-title-letter-spacing);
3404
+ --pvt-title-line-height: var(--rls-title-line-height);
3405
+ --pvt-subtitle-font-size: var(--rls-smalltext-font-size);
3406
+ --pvt-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
3407
+ --pvt-subtitle-line-height: var(--rls-smalltext-line-height);
3408
+ --pvt-content-font-size: var(--rls-paragraph-font-size);
3409
+ }
3410
+ .rls-design-system-filled .rls-confirmation__header {
3411
+ row-gap: var(--rls-sizing-x2);
3412
+ }
3413
+ .rls-design-system-filled .rls-confirmation__actions {
3414
+ flex-direction: column-reverse;
3415
+ column-gap: 0rem;
3416
+ row-gap: var(--rls-sizing-x4);
3417
+ }
3418
+ }
3419
+ .rls-design-system-filled .rls-datatable {
3420
+ --pvt-datatable-font-size: var(
3421
+ --rlc-datatable-font-size,
3422
+ var(--rls-label-font-size)
3423
+ );
3424
+ --pvt-datatable-letter-spacing: var(
3425
+ --rlc-datatable-letter-spacing,
3426
+ var(--rls-label-letter-spacing)
3427
+ );
3428
+ --pvt-datatable-font-color: var(
3429
+ --rlc-datatable-font-color,
3430
+ var(--rls-app-color-900)
3431
+ );
3432
+ --pvt-datatable-padding-component: 0rem;
3433
+ --pvt-datatable-padding-scroll: var(--rlc-datatable-padding-scroll, 0rem);
3434
+ --pvt-datatable-table-overflow: initial;
3435
+ --pvt-datatable-body-overflow: initial;
3436
+ --pvt-datatable-border-radius: var(
3437
+ --rlc-datatable-border-radius,
3438
+ var(--rls-sizing-x6)
3439
+ );
3440
+ --pvt-datatable-header-padding-right: var(--pvt-datatable-padding-scroll);
3441
+ --pvt-datatable-header-background: var(
3442
+ --rlc-datatable-header-background,
3443
+ var(--rls-app-color-200)
3444
+ );
3445
+ --pvt-datatable-row-background: var(
3446
+ --rlc-datatable-row-background,
3447
+ var(--rls-app-color-050)
3448
+ );
3449
+ --pvt-datatable-summary-background: var(
3450
+ --rlc-datatable-summary-background,
3451
+ var(--rls-app-color-200)
3452
+ );
3453
+ --pvt-datatable-footer-background: var(
3454
+ --rlc-datatable-footer-background,
3455
+ var(--rls-app-color-200)
3456
+ );
3457
+ --pvt-datatable-floating-background: var(--rls-app-color-200);
3458
+ --rlc-amount-font-size: var(--pvt-datatable-font-size);
3459
+ --rlc-amount-width: 100%;
3460
+ --rlc-badge-padding: 0.5rem var(--rls-sizing-x2);
3461
+ --rlc-ballot-padding: 0rem;
3462
+ --rlc-ballot-component-row-gap: var(--rls-sizing-x1);
3463
+ --rlc-ballot-title-letter-spacing: var(--rls-smalltext-letter-spacing);
3464
+ --rlc-ballot-title-font-size: var(--rls-smalltext-font-size);
3465
+ --rlc-ballot-title-line-height: var(--rls-smalltext-line-height);
3466
+ --rlc-ballot-subtitle-letter-spacing: var(--rls-overline-letter-spacing);
3467
+ --rlc-ballot-subtitle-font-size: var(--rls-overline-font-size);
3468
+ --rlc-ballot-subtitle-line-height: var(--rls-overline-line-height);
3469
+ --rlc-field-box-body-background: transparent;
3470
+ --rlc-field-box-padding: 0rem;
3471
+ --rlc-field-box-width: 100%;
3472
+ --rlc-field-box-error-display: none;
3473
+ --rlc-field-box-label-display: none;
3474
+ --rlc-input-font-size: var(--pvt-datatable-font-size);
3475
+ --rlc-input-letter-spacing: var(--pvt-datatable-letter-spacing);
3476
+ --rlc-skeleton-text-column-gap: var(--rls-sizing-x2);
3477
+ position: relative;
3478
+ display: flex;
3479
+ width: 100%;
3480
+ height: var(--rlc-datatable-height, auto);
3481
+ flex-direction: column;
3482
+ row-gap: var(--rls-sizing-x6);
3483
+ border-radius: var(--rls-sizing-x4);
3484
+ box-sizing: border-box;
3485
+ }
3486
+ .rls-design-system-filled .rls-datatable--resizable {
3487
+ --pvt-datatable-table-overflow: hidden;
3488
+ --pvt-datatable-body-overflow: auto;
3489
+ height: 100%;
3490
+ }
3491
+ .rls-design-system-filled .rls-datatable--scrolleable {
3492
+ --pvt-datatable-padding-scroll: var(--rls-sizing-x4);
3493
+ --pvt-datatable-header-padding-right: calc(
3494
+ var(--pvt-datatable-padding-scroll) +
3495
+ var(--rlc-datatable-width-scroll, var(--rls-sizing-x4))
3496
+ );
3497
+ --pvt-datatable-padding-component: 0rem
3498
+ calc(var(--pvt-datatable-padding-scroll) + 5rem) 0rem 0rem;
3499
+ }
3500
+ .rls-design-system-filled .rls-datatable__toolbar {
3501
+ display: flex;
3502
+ flex: 0 0 auto;
3503
+ column-gap: var(--rls-sizing-x6);
3504
+ padding: var(--pvt-datatable-padding-component);
3505
+ box-sizing: border-box;
3506
+ background: var(--pvt-datatable-header-background);
3507
+ border-radius: var(--pvt-datatable-border-radius);
3508
+ }
3509
+ .rls-design-system-filled .rls-datatable__table {
3510
+ display: flex;
3511
+ flex: 0 1 auto;
3512
+ overflow: var(--pvt-datatable-table-overflow);
3513
+ }
3514
+ .rls-design-system-filled .rls-datatable__table > table {
3515
+ display: flex;
3516
+ width: 100%;
3517
+ flex-direction: column;
3518
+ row-gap: var(--rls-sizing-x4);
3519
+ border-spacing: 0;
3520
+ border-collapse: collapse;
3521
+ }
3522
+ .rls-design-system-filled .rls-datatable__head {
3523
+ flex: 0 0 auto;
3524
+ width: 100%;
3525
+ padding-right: var(--pvt-datatable-header-padding-right);
3526
+ box-sizing: border-box;
3527
+ }
3528
+ .rls-design-system-filled .rls-datatable__header {
3529
+ display: flex;
3530
+ column-gap: var(--rls-sizing-x6);
3531
+ padding: 0rem var(--rls-sizing-x6);
3532
+ box-sizing: border-box;
3533
+ background: var(--pvt-datatable-header-background);
3534
+ border-radius: var(--pvt-datatable-border-radius);
3535
+ }
3536
+ .rls-design-system-filled .rls-datatable__title {
3537
+ --rlc-field-box-body-background: transparent;
3538
+ --rlc-field-box-body-background-focused: transparent;
3539
+ --rlc-field-box-body-background-disabled: transparent;
3540
+ --rlc-field-box-body-padding: 0rem;
3541
+ --rlc-field-box-body-border: none;
3542
+ --rlc-field-box-body-border-focused: none;
3543
+ --rlc-field-box-body-border-error: none;
3544
+ --rlc-field-box-body-border-disabled: none;
3545
+ --rlc-field-box-body-shadow: none;
3546
+ --rlc-field-box-body-shadow-error: none;
3547
+ --rlc-field-box-action-background: transparent;
3548
+ --rlc-field-list-control-font-size: var(--pvt-datatable-font-size);
3549
+ --rlc-field-list-control-font-weight: var(--rls-font-weight-medium);
3550
+ --rlc-field-list-control-letter-spacing: var(--rls-body-letter-spacing);
3551
+ --rlc-field-list-element-padding: var(--rls-sizing-x4);
3552
+ --rlc-field-list-suggestions-bottom: var(--rls-sizing-x24);
3553
+ --rlc-field-list-suggestions-top: var(--rls-sizing-x24);
3554
+ --rlc-poster-font-size: var(--pvt-datatable-font-size);
3555
+ --rlc-poster-width: calc(100% - var(--rls-sizing-x2));
3556
+ --rlc-poster-height: var(--rls-sizing-x8);
3557
+ --rlc-poster-padding: var(--rls-sizing-x2);
3558
+ position: relative;
3559
+ display: flex;
3560
+ min-height: var(--rls-sizing-x20);
3561
+ align-items: var(--rlc-datatable-align-items, center);
3562
+ justify-content: var(--rlc-datatable-justify-content, flex-start);
3563
+ text-align: left;
3564
+ white-space: nowrap;
3565
+ padding: var(--rls-sizing-x2) 0rem;
3566
+ font-size: var(--pvt-datatable-font-size);
3567
+ font-weight: var(
3568
+ --rlc-datatable-header-font-weight,
3569
+ var(--rls-font-weight-semibold)
3570
+ );
3571
+ letter-spacing: var(--pvt-datatable-letter-spacing);
3572
+ }
3573
+ .rls-design-system-filled .rls-datatable__title--contained {
3574
+ overflow: hidden;
3575
+ }
3576
+ .rls-design-system-filled .rls-datatable__title--control {
3577
+ --rlc-action-ripple-dimension: var(--rls-sizing-x16);
3578
+ --rlc-action-ripple-position: -8rem;
3579
+ --rlc-avatar-radius: var(--rls-sizing-x3);
3580
+ --rlc-avatar-width: var(--rls-sizing-x16);
3581
+ --rlc-avatar-height: var(--rls-sizing-x16);
3582
+ --rlc-avatar-font-size: var(--pvt-datatable-font-size);
3583
+ --rlc-image-width: var(--rls-sizing-x12);
3584
+ --rlc-image-height: var(--rls-sizing-x12);
3585
+ --rlc-switch-max-width: var(--rls-sizing-x16);
3586
+ --rlc-switch-component-height: var(--rls-sizing-x8);
3587
+ --rlc-switch-element-width: var(--rls-sizing-x6);
3588
+ --rlc-switch-element-height: var(--rls-sizing-x4);
3589
+ --rlc-switch-element-radius: var(--rls-sizing-x4);
3590
+ display: flex;
3591
+ justify-content: center;
3592
+ align-items: center;
3593
+ width: var(--rls-sizing-x24);
3594
+ padding: 0rem;
3595
+ }
3596
+ .rls-design-system-filled .rls-datatable__title--control > img {
3597
+ width: var(--rls-sizing-x12);
3598
+ }
3599
+ .rls-design-system-filled .rls-datatable__title > span {
3600
+ display: block;
3601
+ white-space: nowrap;
3602
+ text-overflow: ellipsis;
3603
+ overflow: hidden;
3604
+ }
3605
+ .rls-design-system-filled .rls-datatable__title .rls-field-list {
3606
+ --rlc-field-box-body-padding: var(--rls-sizing-x4) 0rem;
3607
+ --rlc-field-box-action-dimension: var(--rls-sizing-x10);
3608
+ }
3609
+ .rls-design-system-filled .rls-datatable__title .rls-poster {
3610
+ overflow: hidden;
3611
+ text-overflow: ellipsis;
3612
+ white-space: nowrap;
3613
+ }
3614
+ .rls-design-system-filled .rls-datatable__title > a:hover {
3615
+ color: var(--rls-app-color-700);
3616
+ text-decoration: underline;
3617
+ }
3618
+ .rls-design-system-filled .rls-datatable__title > * {
3619
+ color: var(--rls-app-color-700);
3620
+ }
3621
+ .rls-design-system-filled .rls-datatable__body {
3622
+ display: flex;
3623
+ flex: 1 1 auto;
3624
+ flex-direction: column;
3625
+ row-gap: var(--rls-sizing-x6);
3626
+ padding-right: var(--pvt-datatable-padding-scroll);
3627
+ box-sizing: border-box;
3628
+ overflow-y: var(--pvt-datatable-body-overflow);
3629
+ }
3630
+ .rls-design-system-filled .rls-datatable__subheader,
3631
+ .rls-design-system-filled .rls-datatable__record,
3632
+ .rls-design-system-filled .rls-datatable__totals {
3633
+ position: relative;
3634
+ display: flex;
3635
+ column-gap: var(--rls-sizing-x6);
3636
+ padding: 0rem var(--rls-sizing-x6);
3637
+ box-sizing: border-box;
3638
+ background: var(--pvt-datatable-row-background);
3639
+ border-radius: var(--pvt-datatable-border-radius);
3640
+ }
3641
+ .rls-design-system-filled .rls-datatable__subheader--contained,
3642
+ .rls-design-system-filled .rls-datatable__record--contained,
3643
+ .rls-design-system-filled .rls-datatable__totals--contained {
3644
+ overflow: hidden;
3645
+ }
3646
+ .rls-design-system-filled .rls-datatable__subheader--success,
3647
+ .rls-design-system-filled .rls-datatable__record--success,
3648
+ .rls-design-system-filled .rls-datatable__totals--success {
3649
+ --pvt-datatable-floating-background: var(--rls-success-color-200);
3650
+ background: var(--rls-success-color-100);
3651
+ }
3652
+ .rls-design-system-filled .rls-datatable__subheader--info,
3653
+ .rls-design-system-filled .rls-datatable__record--info,
3654
+ .rls-design-system-filled .rls-datatable__totals--info {
3655
+ --pvt-datatable-floating-background: var(--rls-info-color-200);
3656
+ background: var(--rls-info-color-100);
3657
+ }
3658
+ .rls-design-system-filled .rls-datatable__subheader--warning,
3659
+ .rls-design-system-filled .rls-datatable__record--warning,
3660
+ .rls-design-system-filled .rls-datatable__totals--warning {
3661
+ --pvt-datatable-floating-background: var(--rls-warning-color-200);
3662
+ background: var(--rls-warning-color-100);
3663
+ }
3664
+ .rls-design-system-filled .rls-datatable__subheader--error,
3665
+ .rls-design-system-filled .rls-datatable__record--error,
3666
+ .rls-design-system-filled .rls-datatable__totals--error {
3667
+ --pvt-datatable-floating-background: var(--rls-danger-color-200);
3668
+ background: var(--rls-danger-color-100);
3669
+ }
3670
+ .rls-design-system-filled .rls-datatable__subheader {
3671
+ --pvt-data-font-color: var(--rls-app-color-700);
3672
+ --pvt-data-font-weight: var(--rls-font-weight-semibold);
3673
+ position: sticky;
3674
+ top: 0px;
3675
+ z-index: var(--rls-z-index-4);
3676
+ background: var(--pvt-datatable-header-background);
3677
+ }
3678
+ .rls-design-system-filled .rls-datatable__cell,
3679
+ .rls-design-system-filled .rls-datatable__data {
3680
+ --rlc-field-box-body-background: transparent;
3681
+ --rlc-field-box-body-background-focused: transparent;
3682
+ --rlc-field-box-body-background-disabled: transparent;
3683
+ --rlc-field-box-body-padding: 0rem;
3684
+ --rlc-field-box-body-border: none;
3685
+ --rlc-field-box-body-border-focused: none;
3686
+ --rlc-field-box-body-border-error: none;
3687
+ --rlc-field-box-body-border-disabled: none;
3688
+ --rlc-field-box-body-shadow: none;
3689
+ --rlc-field-box-body-shadow-error: none;
3690
+ --rlc-field-box-action-background: transparent;
3691
+ --rlc-field-list-control-font-size: var(--pvt-datatable-font-size);
3692
+ --rlc-field-list-control-font-weight: var(--rls-font-weight-medium);
3693
+ --rlc-field-list-control-letter-spacing: var(--rls-body-letter-spacing);
3694
+ --rlc-field-list-element-padding: var(--rls-sizing-x4);
3695
+ --rlc-field-list-suggestions-bottom: var(--rls-sizing-x24);
3696
+ --rlc-field-list-suggestions-top: var(--rls-sizing-x24);
3697
+ --rlc-poster-font-size: var(--pvt-datatable-font-size);
3698
+ --rlc-poster-width: calc(100% - var(--rls-sizing-x2));
3699
+ --rlc-poster-height: var(--rls-sizing-x8);
3700
+ --rlc-poster-padding: var(--rls-sizing-x2);
3701
+ position: relative;
3702
+ display: flex;
3703
+ min-height: var(--rls-sizing-x20);
3704
+ align-items: var(--rlc-datatable-align-items, center);
3705
+ justify-content: var(--rlc-datatable-justify-content, flex-start);
3706
+ cursor: default;
3707
+ text-align: left;
3708
+ padding: var(--rls-sizing-x2) 0rem;
3709
+ font-size: var(--pvt-datatable-font-size);
3710
+ font-weight: var(
3711
+ --rlc-datatable-cell-font-weight,
3712
+ var(--rls-font-weight-regular)
3713
+ );
3714
+ letter-spacing: var(--pvt-datatable-letter-spacing);
3715
+ }
3716
+ .rls-design-system-filled .rls-datatable__cell--contained,
3717
+ .rls-design-system-filled .rls-datatable__data--contained {
3718
+ overflow: hidden;
3719
+ }
3720
+ .rls-design-system-filled .rls-datatable__cell--control,
3721
+ .rls-design-system-filled .rls-datatable__data--control {
3722
+ --rlc-action-ripple-dimension: var(--rls-sizing-x16);
3723
+ --rlc-action-ripple-position: -8rem;
3724
+ --rlc-avatar-radius: var(--rls-sizing-x3);
3725
+ --rlc-avatar-width: var(--rls-sizing-x16);
3726
+ --rlc-avatar-height: var(--rls-sizing-x16);
3727
+ --rlc-avatar-font-size: var(--pvt-datatable-font-size);
3728
+ --rlc-image-width: var(--rls-sizing-x12);
3729
+ --rlc-image-height: var(--rls-sizing-x12);
3730
+ --rlc-switch-max-width: var(--rls-sizing-x16);
3731
+ --rlc-switch-component-height: var(--rls-sizing-x8);
3732
+ --rlc-switch-element-width: var(--rls-sizing-x6);
3733
+ --rlc-switch-element-height: var(--rls-sizing-x4);
3734
+ --rlc-switch-element-radius: var(--rls-sizing-x4);
3735
+ display: flex;
3736
+ justify-content: center;
3737
+ align-items: center;
3738
+ width: var(--rls-sizing-x24);
3739
+ padding: 0rem;
3740
+ }
3741
+ .rls-design-system-filled .rls-datatable__cell--control > img,
3742
+ .rls-design-system-filled .rls-datatable__data--control > img {
3743
+ width: var(--rls-sizing-x12);
3744
+ }
3745
+ .rls-design-system-filled .rls-datatable__cell > span,
3746
+ .rls-design-system-filled .rls-datatable__data > span {
3747
+ display: block;
3748
+ white-space: nowrap;
3749
+ text-overflow: ellipsis;
3750
+ overflow: hidden;
3751
+ }
3752
+ .rls-design-system-filled .rls-datatable__cell .rls-field-list,
3753
+ .rls-design-system-filled .rls-datatable__data .rls-field-list {
3754
+ --rlc-field-box-body-padding: var(--rls-sizing-x4) 0rem;
3755
+ --rlc-field-box-action-dimension: var(--rls-sizing-x10);
3756
+ }
3757
+ .rls-design-system-filled .rls-datatable__cell .rls-poster,
3758
+ .rls-design-system-filled .rls-datatable__data .rls-poster {
3759
+ overflow: hidden;
3760
+ text-overflow: ellipsis;
3761
+ white-space: nowrap;
3762
+ }
3763
+ .rls-design-system-filled .rls-datatable__cell > a:hover,
3764
+ .rls-design-system-filled .rls-datatable__data > a:hover {
3765
+ color: var(--rls-app-color-700);
3766
+ text-decoration: underline;
3767
+ }
3768
+ .rls-design-system-filled .rls-datatable__cell {
3769
+ color: var(--pvt-datatable-font-color);
3770
+ font-weight: var(--rls-font-weight-regular);
3771
+ }
3772
+ .rls-design-system-filled .rls-datatable__data {
3773
+ color: var(--pvt-data-font-color, var(--pvt-datatable-font-color));
3774
+ font-weight: var(--pvt-data-font-weight, var(--rls-font-weight-regular));
3775
+ }
3776
+ .rls-design-system-filled .rls-datatable__floating {
3777
+ --pvt-action-tooltip-left: 0;
3778
+ --pvt-action-tooltip-right: initial;
3779
+ --pvt-action-tooltip-transform: translate(calc(-100% - var(--rls-sizing-x4)));
3780
+ position: absolute;
3781
+ display: flex;
3782
+ left: initial;
3783
+ right: 0;
3784
+ height: 100%;
3785
+ column-gap: 4rem;
3786
+ align-items: center;
3787
+ z-index: var(--rls-z-index-2);
3788
+ padding: 0rem var(--rls-sizing-x6);
3789
+ background: var(--pvt-datatable-floating-background);
3790
+ border-right: none;
3791
+ transform: translateX(calc(100% - var(--rls-sizing-x4)));
3792
+ transition: transform 240ms var(--rls-standard-curve);
3793
+ }
3794
+ .rls-design-system-filled .rls-datatable__floating:hover {
3795
+ transform: translateX(0);
3796
+ }
3797
+ .rls-design-system-filled .rls-datatable__floating--invested {
3798
+ --pvt-action-tooltip-left: initial;
3799
+ --pvt-action-tooltip-right: 0;
3800
+ --pvt-action-tooltip-transform: translate(calc(100% + var(--rls-sizing-x4)));
3801
+ right: initial;
3802
+ left: 0;
3803
+ transform: translateX(calc(-100% + var(--rls-sizing-x4)));
3804
+ }
3805
+ .rls-design-system-filled .rls-datatable__floating[rls-theme] {
3806
+ background: var(--rls-theme-color-050);
3807
+ }
3808
+ .rls-design-system-filled .rls-datatable__floating .rls-button-action__tooltip {
3809
+ top: 0;
3810
+ left: var(--pvt-action-tooltip-left);
3811
+ right: var(--pvt-action-tooltip-right);
3812
+ transform: var(--pvt-action-tooltip-transform);
3813
+ z-index: var(--rls-z-index-2);
3814
+ }
3815
+ .rls-design-system-filled .rls-datatable__summary {
3816
+ --pvt-datatable-row-background: var(--pvt-datatable-summary-background);
3817
+ flex: 0 0 auto;
3818
+ padding-right: var(--pvt-datatable-header-padding-right);
3819
+ box-sizing: border-box;
3820
+ }
3821
+ .rls-design-system-filled .rls-datatable__footer {
3822
+ --pvt-datatable-row-background: var(--pvt-datatable-footer-background);
3823
+ position: relative;
3824
+ flex: 0 0 auto;
3825
+ width: 100%;
3826
+ overflow: hidden;
3827
+ padding: var(--pvt-datatable-padding-component);
3828
+ box-sizing: border-box;
3829
+ }
3830
+ .rls-design-system-filled .rls-dropdown {
3831
+ --pvt-content-opacity: 0;
3832
+ --pvt-content-transform: scale(0, 0);
3833
+ position: var(--rlc-dropdown-position, absolute);
3834
+ display: block;
3835
+ opacity: 0;
3836
+ width: auto;
3837
+ z-index: -16;
3838
+ pointer-events: none;
3839
+ transition: opacity 240ms 0ms var(--rls-standard-curve);
3840
+ }
3841
+ .rls-design-system-filled .rls-dropdown--visible {
3842
+ --pvt-content-opacity: 1;
3843
+ --pvt-content-transform: scale(1, 1);
3844
+ opacity: 1;
3845
+ pointer-events: initial;
3846
+ z-index: var(--rlc-dropdown-z-index, var(--rls-z-index-4));
3847
+ }
3848
+ .rls-design-system-filled .rls-dropdown__content {
3849
+ display: block;
3850
+ width: auto;
3851
+ max-width: var(--rlc-dropdown-max-width, 150rem);
3852
+ border-radius: var(--rlc-dropdown-radius, var(--rls-sizing-x6));
3853
+ padding: var(--rlc-dropdown-padding, var(--rls-sizing-x6));
3854
+ box-sizing: border-box;
3855
+ background: var(--rlc-dropdown-background, var(--rls-app-color-050));
3856
+ box-shadow: var(--rls-app-shadow-center-4);
3857
+ opacity: var(--pvt-content-opacity);
3858
+ transform: var(--pvt-content-transform);
3859
+ transition:
3860
+ transform 240ms 0ms var(--rls-standard-curve),
3861
+ opacity 240ms 0ms var(--rls-standard-curve);
3862
+ }
3863
+ .rls-design-system-filled .rls-field-autocomplete {
3864
+ --pvt-control-width: 100%;
3865
+ --pvt-control-opacity: 1;
3866
+ }
3867
+ .rls-design-system-filled .rls-field-autocomplete.rls-field-box--selected {
3868
+ --pvt-control-width: calc(100% - var(--pvt-action-dimension));
3869
+ }
3870
+ .rls-design-system-filled .rls-field-autocomplete.rls-field-box--disabled {
3871
+ --pvt-control-opacity: 0.5;
3872
+ }
3873
+ .rls-design-system-filled .rls-field-autocomplete .rls-field-list__ul__search {
3874
+ display: flex;
3875
+ align-items: center;
3876
+ width: 100%;
3877
+ margin-top: var(--rls-sizing-x2);
3878
+ margin-bottom: var(--rls-sizing-x6);
3879
+ background: var(--rls-app-color-100);
3880
+ border-radius: var(--rls-sizing-x4);
3881
+ padding: var(--rls-sizing-x4);
3882
+ box-sizing: border-box;
3883
+ }
3884
+ .rls-design-system-filled
3885
+ .rls-field-autocomplete
3886
+ .rls-field-list__ul__search
3887
+ button {
3888
+ color: var(--rls-app-color-600);
3889
+ background: rgba(0, 0, 0, 0);
3890
+ }
3891
+ .rls-design-system-filled
3892
+ .rls-field-autocomplete
3893
+ .rls-field-list__ul__search
3894
+ button:not(:disabled):hover {
3895
+ color: var(--rls-theme-color-300);
3896
+ }
3897
+ .rls-design-system-filled
3898
+ .rls-field-autocomplete
3899
+ .rls-field-list__ul__search
3900
+ button:disabled {
3901
+ opacity: 0.5;
3902
+ }
3903
+ .rls-design-system-filled .rls-field-autocomplete .rls-field-list__ul__control {
3904
+ width: 100%;
3905
+ height: var(--rls-sizing-x12);
3906
+ line-height: var(--rls-sizing-x12);
3907
+ padding: 0rem;
3908
+ cursor: text;
3909
+ border: none;
3910
+ outline: none;
3911
+ background: rgba(0, 0, 0, 0);
3912
+ color: var(--rls-app-color-900);
3913
+ font-size: var(--rls-input-font-size);
3914
+ font-weight: var(--rls-font-weight-medium);
3915
+ letter-spacing: var(--rls-input-letter-spacing);
3916
+ }
3917
+ .rls-design-system-filled
3918
+ .rls-field-autocomplete
3919
+ .rls-field-list__ul__control::placeholder {
3920
+ color: var(--rls-app-color-400);
3921
+ }
3922
+ .rls-design-system-filled
3923
+ .rls-field-autocomplete
3924
+ .rls-field-list__ul__control::selection {
3925
+ background: var(--rls-theme-color-700);
3926
+ color: var(--rls-app-color-050);
3927
+ }
3928
+ .rls-design-system-filled
3929
+ .rls-field-autocomplete
3930
+ .rls-field-list__ul__control:disabled {
3931
+ opacity: 0.5;
3932
+ pointer-events: none;
3933
+ }
3934
+ .rls-design-system-filled
3935
+ .rls-field-autocomplete
3936
+ .rls-field-list__ul
3937
+ .rls-progress-bar {
3938
+ margin-bottom: var(--rls-sizing-x8);
3939
+ }
3940
+ .rls-design-system-filled .rls-field-clock {
3941
+ --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
3942
+ --pvt-font-size: var(--rlc-field-clock-font-size, var(--rls-input-font-size));
3943
+ --pvt-letter-spacing: var(
3944
+ --rlc-field-clock-letter-spacing,
3945
+ var(--rls-input-letter-spacing)
3946
+ );
3947
+ position: relative;
3948
+ width: 100%;
3949
+ box-sizing: border-box;
3950
+ }
3951
+ .rls-design-system-filled .rls-field-clock .rls-field-box--readonly {
3952
+ --pvt-control-width: 100%;
3953
+ }
3954
+ .rls-design-system-filled .rls-field-clock .rls-field-box__body {
3955
+ column-gap: var(--rls-sizing-x2);
3956
+ }
3957
+ .rls-design-system-filled .rls-field-clock__control {
3958
+ position: relative;
3959
+ width: 100%;
3960
+ height: var(--rls-sizing-x12);
3961
+ line-height: var(--rls-sizing-x12);
3962
+ padding: 0rem;
3963
+ cursor: default;
3964
+ border: none;
3965
+ outline: none;
3966
+ background: rgba(0, 0, 0, 0);
3967
+ color: var(--rls-app-color-900);
3968
+ font-weight: var(--rls-font-weight-medium);
3969
+ font-size: var(--pvt-font-size);
3970
+ letter-spacing: var(--pvt-letter-spacing);
3971
+ }
3972
+ .rls-design-system-filled .rls-field-clock__control::placeholder {
3973
+ color: var(--rls-app-color-400);
3974
+ }
3975
+ .rls-design-system-filled .rls-field-clock__control:disabled {
3976
+ opacity: 0.5;
3977
+ cursor: not-allowed;
3978
+ }
3979
+ .rls-design-system-filled .rls-field-clock-modal {
3980
+ --rlc-modal-background: transparent;
3981
+ --rlc-modal-max-width: 150rem;
3982
+ --rlc-picker-clock-radius: var(--rls-sizing-x6);
3983
+ --rlc-picker-clock-background: var(--rls-app-color-050);
3984
+ --rlc-picker-clock-padding: var(--rls-sizing-x4) 0rem;
3985
+ }
3986
+ .rls-design-system-filled .rls-field-date {
3987
+ --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
3988
+ --pvt-font-size: var(--rlc-field-date-font-size, var(--rls-input-font-size));
3989
+ --pvt-letter-spacing: var(
3990
+ --rlc-field-date-letter-spacing,
3991
+ var(--rls-input-letter-spacing)
3992
+ );
3993
+ position: relative;
3994
+ width: 100%;
3995
+ box-sizing: border-box;
3996
+ }
3997
+ .rls-design-system-filled .rls-field-date .rls-field-box--readonly {
3998
+ --pvt-control-width: 100%;
3999
+ }
4000
+ .rls-design-system-filled .rls-field-date .rls-field-box__body {
4001
+ column-gap: var(--rls-sizing-x2);
4002
+ }
4003
+ .rls-design-system-filled .rls-field-date__control {
4004
+ position: relative;
4005
+ width: 100%;
4006
+ height: var(--rls-sizing-x12);
4007
+ line-height: var(--rls-sizing-x12);
4008
+ padding: 0rem;
4009
+ cursor: default;
4010
+ border: none;
4011
+ outline: none;
4012
+ background: rgba(0, 0, 0, 0);
4013
+ color: var(--rls-app-color-900);
4014
+ font-weight: var(--rls-font-weight-medium);
4015
+ font-size: var(--pvt-font-size);
4016
+ letter-spacing: var(--pvt-letter-spacing);
4017
+ }
4018
+ .rls-design-system-filled .rls-field-date__control::placeholder {
4019
+ color: var(--rls-app-color-400);
4020
+ }
4021
+ .rls-design-system-filled .rls-field-date__control:disabled {
4022
+ opacity: 0.5;
4023
+ cursor: not-allowed;
4024
+ }
4025
+ .rls-design-system-filled .rls-field-date-modal {
4026
+ --rlc-modal-background: transparent;
4027
+ --rlc-modal-max-width: 150rem;
4028
+ --rlc-picker-date-radius: var(--rls-sizing-x6);
4029
+ --rlc-picker-date-background: var(--rls-app-color-050);
4030
+ }
4031
+ .rls-design-system-filled .rls-field-date-range {
4032
+ --rlc-field-box-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
4033
+ --pvt-font-size: var(
4034
+ --rlc-field-date-range-font-size,
4035
+ var(--rls-input-font-size)
4036
+ );
4037
+ --pvt-letter-spacing: var(
4038
+ --rlc-field-date-range-letter-spacing,
4039
+ var(--rls-input-letter-spacing)
4040
+ );
4041
+ position: relative;
4042
+ width: 100%;
4043
+ box-sizing: border-box;
4044
+ }
4045
+ .rls-design-system-filled .rls-field-date-range .rls-field-box--readonly {
4046
+ --pvt-control-width: 100%;
4047
+ }
4048
+ .rls-design-system-filled .rls-field-date-range__control {
4049
+ position: relative;
4050
+ width: 100%;
4051
+ height: var(--rls-sizing-x12);
4052
+ line-height: var(--rls-sizing-x12);
4053
+ padding: 0rem;
4054
+ cursor: default;
4055
+ border: none;
4056
+ outline: none;
4057
+ background: rgba(0, 0, 0, 0);
4058
+ color: var(--rls-app-color-900);
4059
+ font-weight: var(--rls-font-weight-medium);
4060
+ font-size: var(--pvt-font-size);
4061
+ letter-spacing: var(--pvt-letter-spacing);
4062
+ }
4063
+ .rls-design-system-filled .rls-field-date-range__control::placeholder {
4064
+ color: var(--rls-app-color-400);
4065
+ }
4066
+ .rls-design-system-filled .rls-field-date-range__control:disabled {
4067
+ opacity: 0.5;
4068
+ cursor: not-allowed;
4069
+ }
4070
+ .rls-design-system-filled .rls-field-date-range-modal {
4071
+ --rlc-modal-background: transparent;
4072
+ --rlc-modal-max-width: 150rem;
4073
+ --rlc-picker-date-range-radius: var(--rls-sizing-x6);
4074
+ --rlc-picker-date-range-background: var(--rls-app-color-050);
4075
+ }
4076
+ .rls-design-system-filled .rls-field-select {
4077
+ --rlc-field-list-control-cursor: pointer;
4078
+ }
4079
+ .rls-design-system-filled .rls-field-select .rls-field-list__action {
4080
+ transition: transform 160ms 0ms var(--rls-sharp-curve);
4081
+ }
4082
+ .rls-design-system-filled .rls-field-select .rls-field-list__action--visible {
4083
+ transform: rotate(180deg);
4084
+ }
4085
+ .rls-design-system-filled .rls-form {
4086
+ display: flex;
4087
+ flex-direction: column;
4088
+ row-gap: var(--rls-sizing-x8);
4089
+ }
4090
+ .rls-design-system-filled .rls-form__content {
4091
+ position: relative;
4092
+ padding: 0rem var(--rls-sizing-x8);
4093
+ box-sizing: border-box;
4094
+ }
4095
+ .rls-design-system-filled .rls-form__footer {
4096
+ position: relative;
4097
+ display: flex;
4098
+ justify-content: var(--rlc-form-footer-justify-content, end);
4099
+ column-gap: var(--rls-sizing-x8);
4100
+ padding: 0rem var(--rls-sizing-x8);
4101
+ box-sizing: border-box;
4102
+ }
4103
+ .rls-design-system-filled .rls-form-navigation {
4104
+ --rlc-field-box-body-background: var(
4105
+ --rlc-form-navigation-field-box-background,
4106
+ var(--rls-app-color-050)
4107
+ );
4108
+ --pvt-component-transition: 160ms;
4109
+ position: fixed;
4110
+ display: flex;
4111
+ top: 0rem;
4112
+ right: 0rem;
4113
+ width: calc(100% - var(--rls-sizing-x16));
4114
+ max-width: var(--rlc-form-navigation-max-width, 160rem);
4115
+ height: 100%;
4116
+ justify-content: flex-end;
4117
+ visibility: hidden;
4118
+ transform: translateX(100%);
4119
+ transition:
4120
+ opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
4121
+ transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
4122
+ visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
4123
+ z-index: var(--rls-z-index-16);
4124
+ }
4125
+ .rls-design-system-filled .rls-form-navigation--visible {
4126
+ visibility: visible;
4127
+ transform: translateX(0%);
4128
+ }
4129
+ .rls-design-system-filled .rls-form-navigation__component {
4130
+ position: absolute;
4131
+ display: flex;
4132
+ width: 100%;
4133
+ height: 100%;
4134
+ flex-direction: column;
4135
+ background: var(--rlc-form-navigation-background, var(--rls-app-color-100));
4136
+ border-left: var(--rlc-form-navigation-border, var(--rls-app-border-1-200));
4137
+ }
4138
+ .rls-design-system-filled .rls-image-chooser {
4139
+ position: relative;
4140
+ width: var(--rlc-image-chooser-width, 48rem);
4141
+ height: var(--rlc-image-chooser-height, 48rem);
4142
+ border-radius: var(--rlc-image-chooser-radius, 50%);
4143
+ overflow: hidden;
4144
+ }
4145
+ .rls-design-system-filled .rls-image-chooser__avatar {
4146
+ display: flex;
4147
+ width: 100%;
4148
+ height: 100%;
4149
+ justify-content: center;
4150
+ align-items: center;
4151
+ background: var(--rls-theme-color-600);
4152
+ }
4153
+ .rls-design-system-filled .rls-image-chooser__avatar img {
4154
+ width: 100%;
4155
+ }
4156
+ .rls-design-system-filled .rls-image-chooser > input[type='file'] {
4157
+ position: absolute;
4158
+ z-index: -1;
4159
+ visibility: hidden;
4160
+ }
4161
+ .rls-design-system-filled .rls-image-chooser__modal {
4162
+ --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
4163
+ var(--rls-sizing-x12) var(--rls-sizing-x12);
4164
+ --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
4165
+ width: 100%;
4166
+ }
4167
+ @media only screen and (max-width: 480px) {
4168
+ .rls-design-system-filled .rls-image-chooser__modal {
4169
+ --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
4170
+ var(--rls-sizing-x8) var(--rls-sizing-x8);
4171
+ --rlc-modal-max-width: 160rem;
4172
+ }
4173
+ }
4174
+ .rls-design-system-filled .rls-image-editor {
4175
+ --pvt-overlay-background: var(--rls-theme-backdrop-900);
4176
+ --pvt-sliders-padding: 0rem var(--rls-sizing-x8);
4177
+ --pvt-actions-direction: row;
4178
+ --pvt-actions-row-gap: 0rem;
4179
+ --pvt-actions-column-gap: var(--rls-sizing-x8);
4180
+ position: relative;
4181
+ display: flex;
4182
+ height: 100%;
4183
+ flex-direction: column;
4184
+ row-gap: var(--rls-sizing-x12);
4185
+ }
4186
+ .rls-design-system-filled .rls-image-editor__body {
4187
+ position: relative;
4188
+ display: flex;
4189
+ height: 100%;
4190
+ justify-content: center;
4191
+ background: var(--rls-app-color-900);
4192
+ }
4193
+ .rls-design-system-filled .rls-image-editor__body__image {
4194
+ overflow: hidden;
4195
+ }
4196
+ .rls-design-system-filled .rls-image-editor__body__selection {
4197
+ position: absolute;
4198
+ cursor: move;
4199
+ box-sizing: border-box;
4200
+ z-index: var(--rls-z-index-4);
4201
+ border: var(
4202
+ --rlc-image-editor-selection-border,
4203
+ 2px dashed var(--rls-app-color-050)
4204
+ );
4205
+ user-select: none;
4206
+ }
4207
+ .rls-design-system-filled .rls-image-editor__body__overlay--top {
4208
+ position: absolute;
4209
+ top: 0rem;
4210
+ z-index: var(--rls-z-index-2);
4211
+ background: var(--pvt-overlay-background);
4212
+ }
4213
+ .rls-design-system-filled .rls-image-editor__body__overlay--right {
4214
+ position: absolute;
4215
+ right: 0rem;
4216
+ height: 100%;
4217
+ z-index: var(--rls-z-index-2);
4218
+ background: var(--pvt-overlay-background);
4219
+ }
4220
+ .rls-design-system-filled .rls-image-editor__body__overlay--bottom {
4221
+ position: absolute;
4222
+ bottom: 0rem;
4223
+ z-index: var(--rls-z-index-2);
4224
+ background: var(--pvt-overlay-background);
4225
+ }
4226
+ .rls-design-system-filled .rls-image-editor__body__overlay--left {
4227
+ position: absolute;
4228
+ right: 0rem;
4229
+ height: 100%;
4230
+ z-index: var(--rls-z-index-2);
4231
+ background: var(--pvt-overlay-background);
4232
+ }
4233
+ .rls-design-system-filled .rls-image-editor__footer {
4234
+ display: flex;
4235
+ flex-direction: column;
4236
+ row-gap: var(--rls-sizing-x12);
4237
+ padding: var(--rlc-image-editor-footer-padding, 0rem);
4238
+ box-sizing: border-box;
4239
+ }
4240
+ .rls-design-system-filled .rls-image-editor__sliders {
4241
+ display: flex;
4242
+ flex-direction: column;
4243
+ row-gap: var(--rls-sizing-x6);
4244
+ padding: var(--pvt-sliders-padding);
4245
+ box-sizing: border-box;
4246
+ }
4247
+ .rls-design-system-filled .rls-image-editor__actions {
4248
+ display: flex;
4249
+ flex-direction: var(--pvt-actions-direction);
4250
+ justify-content: center;
4251
+ row-gap: var(--pvt-actions-row-gap);
4252
+ column-gap: var(--pvt-actions-column-gap);
4253
+ }
4254
+ .rls-design-system-filled .rls-image-editor > canvas {
4255
+ position: absolute;
4256
+ top: 0rem;
4257
+ left: 0rem;
4258
+ z-index: -1;
4259
+ visibility: hidden;
4260
+ pointer-events: none;
4261
+ }
4262
+ @media only screen and (max-width: 420px) {
4263
+ .rls-design-system-filled .rls-image-editor {
4264
+ --pvt-sliders-padding: 0rem;
4265
+ --pvt-actions-direction: column;
4266
+ --pvt-actions-row-gap: var(--rls-sizing-x6);
4267
+ --pvt-actions-column-gap: 0rem;
4268
+ row-gap: var(--rls-sizing-x8);
4269
+ }
4270
+ }
4271
+ .rls-design-system-filled .rls-image-editor-modal {
4272
+ --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x12)
4273
+ var(--rls-sizing-x12) var(--rls-sizing-x12);
4274
+ --rlc-modal-max-width: calc(250rem - var(--rls-sizing-x16));
4275
+ width: 100%;
4276
+ }
4277
+ @media only screen and (max-width: 480px) {
4278
+ .rls-design-system-filled .rls-image-editor-modal {
4279
+ --rlc-image-editor-footer-padding: 0rem var(--rls-sizing-x8)
4280
+ var(--rls-sizing-x8) var(--rls-sizing-x8);
4281
+ --rlc-modal-max-width: 160rem;
4282
+ }
4283
+ }
4284
+ .rls-design-system-filled .rls-modal {
4285
+ --pvt-component-transform: translateY(150px) scale(0.6);
4286
+ --pvt-component-height: 0rem;
4287
+ --pvt-component-opacity: 0;
4288
+ --pvt-component-visibility: hidden;
4289
+ --pvt-component-transition: 160ms;
4290
+ --pvt-backdrop-opacity: 0;
4291
+ --pvt-backdrop-bottom: initial;
4292
+ position: fixed;
4293
+ display: flex;
4294
+ top: 0rem;
4295
+ left: 0rem;
4296
+ width: 100%;
4297
+ height: 100%;
4298
+ z-index: var(--rls-z-index-24);
4299
+ visibility: hidden;
4300
+ align-items: center;
4301
+ justify-content: center;
4302
+ }
4303
+ .rls-design-system-filled .rls-modal--visible {
4304
+ --pvt-component-visibility: visible;
4305
+ --pvt-component-height: auto;
4306
+ --pvt-component-opacity: 1;
4307
+ --pvt-component-transform: translateY(0) scale(1);
4308
+ --pvt-backdrop-bottom: 0rem;
4309
+ --pvt-backdrop-opacity: 1;
4310
+ visibility: visible;
4311
+ }
4312
+ .rls-design-system-filled .rls-modal__component {
4313
+ position: absolute;
4314
+ display: flex;
4315
+ max-width: var(--rlc-modal-max-width, calc(100% - var(--rls-sizing-x8)));
4316
+ height: var(--pvt-component-height);
4317
+ max-height: calc(100% - var(--rls-sizing-x12));
4318
+ flex-direction: column;
4319
+ opacity: var(--pvt-component-opacity);
4320
+ visibility: var(--pvt-component-visibility);
4321
+ z-index: var(--rls-z-index-2);
4322
+ border-radius: var(--rls-sizing-x4);
4323
+ background: var(--rlc-modal-background, var(--rls-app-color-050));
4324
+ transform: var(--pvt-component-transform);
4325
+ transition:
4326
+ opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
4327
+ transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
4328
+ visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
4329
+ }
4330
+ .rls-design-system-filled .rls-modal__backdrop {
4331
+ position: absolute;
4332
+ display: block;
4333
+ top: 0rem;
4334
+ left: 0rem;
4335
+ right: 0rem;
4336
+ bottom: var(--pvt-backdrop-bottom);
4337
+ opacity: var(--pvt-backdrop-opacity);
4338
+ z-index: var(--rls-z-index-1);
4339
+ background: var(--rlc-modal-backdrop-color, var(--rls-theme-backdrop-400));
4340
+ backdrop-filter: var(--rlc-modal-backdrop-filter, blur(2px));
4341
+ transition:
4342
+ opacity 120ms 0ms var(--rls-deceleration-curve),
4343
+ bottom 120ms 0ms var(--rls-deceleration-curve);
4344
+ }
4345
+ .rls-design-system-filled .rls-modal-sheet {
4346
+ --pvt-component-transform: translateY(150px) scale(0.6);
4347
+ --pvt-component-bottom: initial;
4348
+ --pvt-component-max-width: var(
4349
+ --rlc-modal-sheet-max-width,
4350
+ calc(100% - var(--rls-sizing-x8))
4351
+ );
4352
+ --pvt-component-height: 0rem;
4353
+ --pvt-component-max-height: calc(100% - var(--rls-sizing-x12));
4354
+ --pvt-component-border-radius: var(
4355
+ --rlc-modal-sheet-border-radius,
4356
+ var(--rls-sizing-x4)
4357
+ );
4358
+ --pvt-component-opacity: 0;
4359
+ --pvt-component-visibility: hidden;
4360
+ --pvt-component-transition: 160ms;
4361
+ --pvt-backdrop-opacity: 0;
4362
+ --pvt-backdrop-bottom: initial;
4363
+ position: fixed;
4364
+ display: flex;
4365
+ top: 0rem;
4366
+ left: 0rem;
4367
+ width: 100%;
4368
+ height: 100%;
4369
+ z-index: var(--rls-z-index-24);
4370
+ visibility: hidden;
4371
+ align-items: center;
4372
+ justify-content: center;
4373
+ }
4374
+ .rls-design-system-filled .rls-modal-sheet--visible {
4375
+ --pvt-component-visibility: visible;
4376
+ --pvt-component-height: auto;
4377
+ --pvt-component-opacity: 1;
4378
+ --pvt-component-transform: translateY(0) scale(1);
4379
+ --pvt-backdrop-bottom: 0rem;
4380
+ --pvt-backdrop-opacity: 1;
4381
+ visibility: visible;
4382
+ }
4383
+ .rls-design-system-filled .rls-modal-sheet__component {
4384
+ position: absolute;
4385
+ display: flex;
4386
+ bottom: var(--pvt-component-bottom);
4387
+ max-width: var(--pvt-component-max-width);
4388
+ height: var(--pvt-component-height);
4389
+ max-height: var(--pvt-component-max-height);
4390
+ flex-direction: column;
4391
+ opacity: var(--pvt-component-opacity);
4392
+ visibility: var(--pvt-component-visibility);
4393
+ z-index: var(--rls-z-index-2);
4394
+ border-radius: var(--pvt-component-border-radius);
4395
+ background: var(--rlc-modal-sheet-background, var(--rls-app-color-050));
4396
+ transform: var(--pvt-component-transform);
4397
+ transition:
4398
+ opacity var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
4399
+ transform var(--pvt-component-transition) 0ms var(--rls-deceleration-curve),
4400
+ visibility var(--pvt-component-transition) 0ms var(--rls-deceleration-curve);
4401
+ }
4402
+ .rls-design-system-filled .rls-modal-sheet__backdrop {
4403
+ position: absolute;
4404
+ display: block;
4405
+ top: 0rem;
4406
+ left: 0rem;
4407
+ right: 0rem;
4408
+ bottom: var(--pvt-backdrop-bottom);
4409
+ opacity: var(--pvt-backdrop-opacity);
4410
+ z-index: var(--rls-z-index-1);
4411
+ background: var(
4412
+ --rlc-modal-sheet-backdrop-color,
4413
+ var(--rls-theme-backdrop-400)
4414
+ );
4415
+ backdrop-filter: var(--rlc-modal-sheet-backdrop-filter, blur(2px));
4416
+ transition:
4417
+ opacity 120ms 0ms var(--rls-deceleration-curve),
4418
+ bottom 120ms 0ms var(--rls-deceleration-curve);
4419
+ }
4420
+ @media screen and (max-width: 640px) {
4421
+ .rls-design-system-filled .rls-modal-sheet {
4422
+ --pvt-component-transform: translateY(100%);
4423
+ --pvt-component-bottom: 0px;
4424
+ --pvt-component-max-width: 240rem;
4425
+ --pvt-component-max-height: 75%;
4426
+ --pvt-component-border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4)
4427
+ 0rem 0rem;
4428
+ --pvt-component-transition: 320ms;
4429
+ align-items: initial;
4430
+ }
4431
+ .rls-design-system-filled .rls-modal-sheet--visible {
4432
+ --pvt-component-transform: translateY(0);
4433
+ }
4434
+ .rls-design-system-filled .rls-modal-sheet__component::before {
4435
+ display: block;
4436
+ content: '';
4437
+ width: var(--rls-sizing-x24);
4438
+ height: var(--rls-sizing-x2);
4439
+ border-radius: var(--rls-sizing-x2);
4440
+ background: var(--rls-app-color-300);
4441
+ margin: var(--rls-sizing-x3) auto;
4442
+ }
4443
+ }
4444
+ @media screen and (max-width: 640px) and (max-height: 960px) {
4445
+ .rls-design-system-filled .rls-modal-sheet {
4446
+ --pvt-component-max-height: calc(100% - 32rem);
4447
+ }
4448
+ }
4449
+ @media screen and (max-width: 640px) and (max-height: 720px) {
4450
+ .rls-design-system-filled .rls-modal-sheet {
4451
+ --pvt-component-max-height: calc(100% - 24rem);
4452
+ }
4453
+ }
4454
+ @media screen and (max-width: 640px) and (max-height: 560px) {
4455
+ .rls-design-system-filled .rls-modal-sheet {
4456
+ --pvt-component-max-height: calc(100% - 16rem);
4457
+ }
4458
+ }
4459
+ .rls-design-system-filled .rls-picker-clock {
4460
+ position: relative;
4461
+ display: flex;
4462
+ width: 150rem;
4463
+ flex-direction: column;
4464
+ row-gap: var(--rls-sizing-x8);
4465
+ overflow: hidden;
4466
+ user-select: none;
4467
+ padding: var(--rlc-picker-clock-padding, 0rem);
4468
+ box-sizing: border-box;
4469
+ border-radius: var(--rlc-picker-clock-radius, 0rem);
4470
+ background: var(--rlc-picker-clock-background, transparent);
4471
+ }
4472
+ .rls-design-system-filled .rls-picker-clock__header {
4473
+ display: flex;
4474
+ column-gap: var(--rls-sizing-x8);
4475
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
4476
+ box-sizing: border-box;
4477
+ justify-content: center;
4478
+ }
4479
+ .rls-design-system-filled .rls-picker-clock__title {
4480
+ display: flex;
4481
+ width: auto;
4482
+ column-gap: var(--rls-sizing-x2);
4483
+ align-items: center;
4484
+ }
4485
+ .rls-design-system-filled .rls-picker-clock__title__value {
4486
+ text-align: center;
4487
+ font-size: var(--rls-heading4-font-size);
4488
+ font-weight: var(--rls-font-weight-semibold);
4489
+ color: var(--rls-app-color-600);
4490
+ }
4491
+ .rls-design-system-filled .rls-picker-clock__title__value--active {
4492
+ color: var(--rls-theme-color-500);
4493
+ }
4494
+ .rls-design-system-filled .rls-picker-clock__title__value:hover {
4495
+ color: var(--rls-app-color-900);
4496
+ }
4497
+ .rls-design-system-filled .rls-picker-clock__title__separator {
4498
+ font-size: var(--rls-title-font-size);
4499
+ font-weight: var(--rls-font-weight-semibold);
4500
+ }
4501
+ .rls-design-system-filled .rls-picker-clock__zone {
4502
+ display: flex;
4503
+ width: auto;
4504
+ column-gap: var(--rls-sizing-x4);
4505
+ align-items: center;
4506
+ }
4507
+ .rls-design-system-filled .rls-picker-clock__zone__value {
4508
+ width: 18rem;
4509
+ text-align: center;
4510
+ padding: var(--rls-sizing-x1) var(--rls-sizing-x2);
4511
+ border-radius: var(--rls-sizing-x2);
4512
+ font-size: var(--rls-body-font-size);
4513
+ font-weight: var(--rls-font-weight-semibold);
4514
+ background: var(--rls-app-color-200);
4515
+ }
4516
+ .rls-design-system-filled .rls-picker-clock__zone__value--active {
4517
+ background: var(--rls-theme-gradient-500);
4518
+ color: var(--rls-theme-color-050);
4519
+ }
4520
+ .rls-design-system-filled .rls-picker-clock__body {
4521
+ display: flex;
4522
+ justify-content: center;
4523
+ }
4524
+ .rls-design-system-filled .rls-picker-clock__plate {
4525
+ width: 120rem;
4526
+ height: 120rem;
4527
+ border-radius: 50%;
4528
+ border: var(--rls-app-border-2-200);
4529
+ box-sizing: border-box;
4530
+ overflow: hidden;
4531
+ }
4532
+ .rls-design-system-filled .rls-picker-clock__canvas {
4533
+ position: absolute;
4534
+ }
4535
+ .rls-design-system-filled .rls-picker-clock__canvas__line {
4536
+ stroke: var(--rls-theme-color-500);
4537
+ stroke-width: var(--rls-sizing-x1);
4538
+ }
4539
+ .rls-design-system-filled .rls-picker-clock__canvas__center {
4540
+ fill: var(--rls-theme-color-500);
4541
+ }
4542
+ .rls-design-system-filled .rls-picker-clock__canvas__indicator {
4543
+ fill: var(--rls-theme-color-300);
4544
+ }
4545
+ .rls-design-system-filled .rls-picker-clock__canvas__point {
4546
+ fill: var(--rls-theme-color-050);
4547
+ }
4548
+ .rls-design-system-filled .rls-picker-clock__tick {
4549
+ position: absolute;
4550
+ width: var(--rls-sizing-x14);
4551
+ height: var(--rls-sizing-x14);
4552
+ line-height: var(--rls-sizing-x14);
4553
+ text-align: center;
4554
+ cursor: pointer;
4555
+ font-size: var(--rls-paragraph-font-size);
4556
+ font-weight: var(--rls-font-weight-semibold);
4557
+ }
4558
+ .rls-design-system-filled .rls-picker-clock__footer {
4559
+ --rlc-button-width: 100%;
4560
+ --rlc-button-content-padding: 0rem var(--rls-sizing-x3);
4561
+ --rls-button-font-size: 6.75rem;
4562
+ display: flex;
4563
+ column-gap: var(--rls-sizing-x6);
4564
+ align-items: center;
4565
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
4566
+ var(--rls-sizing-x8);
4567
+ overflow: hidden;
4568
+ box-sizing: border-box;
4569
+ }
4570
+ .rls-design-system-filled .rls-picker-clock__footer--today {
4571
+ display: flex;
4572
+ width: var(--rls-sizing-x16);
4573
+ align-items: center;
4574
+ justify-content: center;
4575
+ }
4576
+ .rls-design-system-filled .rls-picker-date {
4577
+ position: relative;
4578
+ display: flex;
4579
+ width: 150rem;
4580
+ flex-direction: column;
4581
+ row-gap: var(--rls-sizing-x4);
4582
+ overflow: hidden;
4583
+ user-select: none;
4584
+ border-radius: var(--rlc-picker-date-radius, 0rem);
4585
+ background: var(--rlc-picker-date-background, transparent);
4586
+ }
4587
+ .rls-design-system-filled .rls-picker-date__header {
4588
+ --rlc-picker-selector-title-padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
4589
+ --rlc-picker-selector-title-radius: var(--rls-sizing-x6);
4590
+ --rlc-picker-selector-title-background: var(--rls-app-color-200);
4591
+ display: flex;
4592
+ flex-direction: column;
4593
+ row-gap: var(--rls-sizing-x4);
4594
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
4595
+ box-sizing: border-box;
4596
+ }
4597
+ .rls-design-system-filled .rls-picker-date__title {
4598
+ height: var(--rls-sizing-x14);
4599
+ line-height: var(--rls-sizing-x14);
4600
+ font-size: var(--rls-paragraph-font-size);
4601
+ text-align: center;
4602
+ cursor: default;
4603
+ color: var(--rls-app-color-700);
4604
+ }
4605
+ .rls-design-system-filled .rls-picker-date__title:hover {
4606
+ color: var(--rls-theme-color-500);
4607
+ }
4608
+ .rls-design-system-filled .rls-picker-date__title > span {
4609
+ font-weight: var(--rls-font-weight-bold);
4610
+ }
4611
+ .rls-design-system-filled .rls-picker-date__component {
4612
+ --rlc-picker-day-display: none;
4613
+ --rlc-picker-month-display: none;
4614
+ --rlc-picker-year-display: none;
4615
+ display: flex;
4616
+ justify-content: center;
4617
+ }
4618
+ .rls-design-system-filled .rls-picker-date__component--day {
4619
+ --rlc-picker-day-display: flex;
4620
+ }
4621
+ .rls-design-system-filled .rls-picker-date__component--month {
4622
+ --rlc-picker-month-display: grid;
4623
+ }
4624
+ .rls-design-system-filled .rls-picker-date__component--year {
4625
+ --rlc-picker-year-display: block;
4626
+ }
4627
+ .rls-design-system-filled .rls-picker-date__actions {
4628
+ --rlc-button-width: 100%;
4629
+ --rlc-button-content-padding: 0rem var(--rls-sizing-x3);
4630
+ --rls-button-font-size: 6.75rem;
4631
+ display: flex;
4632
+ column-gap: var(--rls-sizing-x6);
4633
+ align-items: center;
4634
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
4635
+ var(--rls-sizing-x8);
4636
+ overflow: hidden;
4637
+ box-sizing: border-box;
4638
+ }
4639
+ .rls-design-system-filled .rls-picker-date__actions--today {
4640
+ display: flex;
4641
+ width: var(--rls-sizing-x16);
4642
+ align-items: center;
4643
+ justify-content: center;
4644
+ }
4645
+ .rls-design-system-filled .rls-picker-date-range {
4646
+ position: relative;
4647
+ display: flex;
4648
+ flex-direction: column;
4649
+ width: 150rem;
4650
+ row-gap: var(--rls-sizing-x4);
4651
+ overflow: hidden;
4652
+ border-radius: var(--rlc-picker-date-range-radius, 0rem);
4653
+ background: var(--rlc-picker-date-range-background, transparent);
4654
+ }
4655
+ .rls-design-system-filled .rls-picker-date-range__header {
4656
+ --rlc-picker-selector-title-padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
4657
+ --rlc-picker-selector-title-radius: var(--rls-sizing-x6);
4658
+ --rlc-picker-selector-title-background: var(--rls-app-color-200);
4659
+ display: flex;
4660
+ flex-direction: column;
4661
+ row-gap: var(--rls-sizing-x4);
4662
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem var(--rls-sizing-x4);
4663
+ box-sizing: border-box;
4664
+ }
4665
+ .rls-design-system-filled .rls-picker-date-range__title {
4666
+ height: var(--rls-sizing-x14);
4667
+ line-height: var(--rls-sizing-x14);
4668
+ font-size: var(--rls-paragraph-font-size);
4669
+ text-align: center;
4670
+ cursor: default;
4671
+ color: var(--rls-app-color-700);
4672
+ }
4673
+ .rls-design-system-filled .rls-picker-date-range__title:hover {
4674
+ color: var(--rls-theme-color-500);
4675
+ }
4676
+ .rls-design-system-filled .rls-picker-date-range__title > span {
4677
+ font-weight: var(--rls-font-weight-bold);
4678
+ }
4679
+ .rls-design-system-filled .rls-picker-date-range__component {
4680
+ --rlc-picker-day-range-display: none;
4681
+ --rlc-picker-month-display: none;
4682
+ --rlc-picker-year-display: none;
4683
+ display: flex;
4684
+ justify-content: center;
4685
+ width: 150rem;
4686
+ padding: 0rem var(--rls-sizing-x2);
4687
+ box-sizing: border-box;
4688
+ }
4689
+ .rls-design-system-filled .rls-picker-date-range__component--day {
4690
+ --rlc-picker-day-range-display: flex;
4691
+ }
4692
+ .rls-design-system-filled .rls-picker-date-range__component--month {
4693
+ --rlc-picker-month-display: grid;
4694
+ }
4695
+ .rls-design-system-filled .rls-picker-date-range__component--year {
4696
+ --rlc-picker-year-display: block;
4697
+ }
4698
+ .rls-design-system-filled .rls-picker-date-range__footer--hidden {
4699
+ display: none;
4700
+ }
4701
+ .rls-design-system-filled .rls-picker-date-range__actions {
4702
+ --rlc-button-width: 100%;
4703
+ --rlc-button-content-padding: 0rem var(--rls-sizing-x3);
4704
+ display: flex;
4705
+ column-gap: var(--rls-sizing-x4);
4706
+ padding: var(--rls-sizing-x6) var(--rls-sizing-x8);
4707
+ overflow: hidden;
4708
+ box-sizing: border-box;
4709
+ }
4710
+ .rls-design-system-filled .rls-snackbar {
4711
+ position: fixed;
4712
+ display: flex;
4713
+ left: var(--rlc-snackbar-left, 50%);
4714
+ width: auto;
4715
+ max-width: 240rem;
4716
+ height: auto;
4717
+ bottom: 0rem;
4718
+ column-gap: var(--rls-sizing-x6);
4719
+ padding: var(--rls-sizing-x6);
4720
+ box-sizing: border-box;
4721
+ border-radius: var(--rls-sizing-x6);
4722
+ background: var(--rls-app-color-050);
4723
+ border-left: var(--rls-theme-border-4-400);
4724
+ transform: translate(-50%, calc(100% + var(--rls-sizing-x4)));
4725
+ transition: all 160ms 0ms var(--rls-standard-curve);
4726
+ box-shadow: var(--rls-app-shadow-center-8);
4727
+ z-index: var(--rls-z-index-32);
4728
+ }
4729
+ .rls-design-system-filled .rls-snackbar--visible {
4730
+ transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
4731
+ }
4732
+ .rls-design-system-filled .rls-snackbar__avatar {
4733
+ --rlc-icon-color: var(--rls-theme-color-050);
4734
+ display: flex;
4735
+ justify-content: center;
4736
+ align-items: center;
4737
+ overflow: hidden;
4738
+ background: var(--rls-theme-color-500);
4739
+ width: var(--rls-sizing-x18);
4740
+ height: var(--rls-sizing-x18);
4741
+ border-radius: var(--rls-sizing-x4);
4742
+ }
4743
+ .rls-design-system-filled .rls-snackbar__avatar + .rls-snackbar__component {
4744
+ width: calc(100% - var(--rls-sizing-x18));
4745
+ }
4746
+ .rls-design-system-filled .rls-snackbar__component {
4747
+ display: flex;
4748
+ flex-direction: column;
4749
+ row-gap: var(--rls-sizing-x2);
4750
+ }
4751
+ .rls-design-system-filled .rls-snackbar__header {
4752
+ display: flex;
4753
+ align-items: center;
4754
+ justify-content: space-between;
4755
+ column-gap: var(--rls-sizing-x4);
4756
+ }
4757
+ .rls-design-system-filled .rls-snackbar__header > button {
4758
+ background: rgba(0, 0, 0, 0);
4759
+ padding: 0rem;
4760
+ cursor: pointer;
4761
+ color: var(--rls-theme-color-700);
4762
+ }
4763
+ .rls-design-system-filled .rls-snackbar__title {
4764
+ white-space: nowrap;
4765
+ overflow: hidden;
4766
+ text-overflow: ellipsis;
4767
+ color: var(--rls-theme-color-500);
4768
+ font-size: var(--rls-body-font-size);
4769
+ font-weight: var(--rls-font-weight-bold);
4770
+ letter-spacing: var(--rls-body-letter-spacing);
4771
+ }
4772
+ .rls-design-system-filled .rls-snackbar__content p {
4773
+ line-height: var(--rls-sizing-x10);
4774
+ color: var(--rls-app-color-600);
4775
+ font-size: var(--rls-label-font-size);
4776
+ font-weight: var(--rls-font-weight-medium);
4777
+ letter-spacing: var(--rls-label-letter-spacing);
4778
+ }
4779
+ @media only screen and (max-width: 375px) {
4780
+ .rls-design-system-filled .rls-snackbar {
4781
+ width: calc(100% - var(--rls-sizing-x12));
4782
+ }
4783
+ } /*# sourceMappingURL=design-system-filled.css.map */