sakana-element 2.4.2 → 2.5.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 (138) hide show
  1. package/README.md +26 -2
  2. package/dist/es/Alert-Cq5F0XNt.js +57 -0
  3. package/dist/es/Avatar-CbgoH75Q.js +5 -0
  4. package/dist/es/Badge-BVu3hO8V.js +7 -0
  5. package/dist/es/Breadcrumb-Bh5y4LbC.js +6 -0
  6. package/dist/es/Button-B1wRI6I7.js +28 -0
  7. package/dist/es/Card-VMxMFix8.js +8 -0
  8. package/dist/es/Carousel-QnDHp3Ka.js +11 -0
  9. package/dist/es/ChatBubble-DYao4l85.js +5 -0
  10. package/dist/es/Checkbox-BbLzAqK2.js +228 -0
  11. package/dist/es/Collapse-BkKmhGQf.js +11 -0
  12. package/dist/es/Collapsible-B56M9eUW.js +12 -0
  13. package/dist/es/Command-CORaZKsJ.js +45 -0
  14. package/dist/es/ConfigProvider-CGLQ9b8M.js +35 -0
  15. package/dist/es/Diff-gDYKT1cl.js +17 -0
  16. package/dist/es/Divider-bI4lEaol.js +5 -0
  17. package/dist/es/Drawer-AnXxT-V6.js +6 -0
  18. package/dist/es/Dropdown-80RoE7gX.js +115 -0
  19. package/dist/es/FileInput-B6CyElTd.js +113 -0
  20. package/dist/es/Filter-CtIs_iO4.js +13 -0
  21. package/dist/es/Icon-hbRhI1iH.js +3 -0
  22. package/dist/es/Indicator-Bs6f41iJ.js +5 -0
  23. package/dist/es/Input-DJsDXAG1.js +8 -0
  24. package/dist/es/Kbd-DZf70Cdz.js +5 -0
  25. package/dist/es/Link-CLXoAvDl.js +5 -0
  26. package/dist/es/Loading-BHzOi8J-.js +27 -0
  27. package/dist/es/Message-DOxtRo8V.js +51 -0
  28. package/dist/es/Notification-F5UfnGWs.js +22 -0
  29. package/dist/es/Pixelate-DFpR42b2.js +12 -0
  30. package/dist/es/Popconfirm-C1LNG9db.js +8 -0
  31. package/dist/es/Progress-CDHJJUVL.js +6 -0
  32. package/dist/es/Radio-HMaWtyx9.js +11 -0
  33. package/dist/es/Resizable-DSYUZwLE.js +59 -0
  34. package/dist/es/Select-DaBVMoMB.js +31 -0
  35. package/dist/es/Skeleton-4hCbgDOF.js +7 -0
  36. package/dist/es/Switch-BCTrn4hn.js +11 -0
  37. package/dist/es/Table-B5twhEZC.js +5 -0
  38. package/dist/es/Tooltip-CDjXpGHn.js +4 -0
  39. package/dist/es/Validator-DoWa9KfA.js +16 -0
  40. package/dist/es/index.js +41 -140
  41. package/dist/index.css +2 -1
  42. package/dist/theme/Alert.css +1 -295
  43. package/dist/theme/Avatar.css +1 -86
  44. package/dist/theme/Badge.css +1 -214
  45. package/dist/theme/Breadcrumb.css +1 -192
  46. package/dist/theme/Button.css +1 -1570
  47. package/dist/theme/Card.css +1 -347
  48. package/dist/theme/Carousel.css +1 -0
  49. package/dist/theme/ChatBubble.css +1 -218
  50. package/dist/theme/Checkbox.css +1 -604
  51. package/dist/theme/Collapse.css +1 -764
  52. package/dist/theme/Collapsible.css +1 -0
  53. package/dist/theme/Command.css +1 -0
  54. package/dist/theme/Diff.css +1 -110
  55. package/dist/theme/Divider.css +1 -150
  56. package/dist/theme/Drawer.css +1 -206
  57. package/dist/theme/Dropdown.css +1 -471
  58. package/dist/theme/FileInput.css +1 -397
  59. package/dist/theme/Filter.css +1 -598
  60. package/dist/theme/Indicator.css +1 -159
  61. package/dist/theme/Input.css +1 -647
  62. package/dist/theme/Kbd.css +1 -104
  63. package/dist/theme/Link.css +1 -69
  64. package/dist/theme/Loading.css +1 -266
  65. package/dist/theme/Message.css +1 -565
  66. package/dist/theme/Notification.css +1 -316
  67. package/dist/theme/Popconfirm.css +1 -46
  68. package/dist/theme/Progress.css +1 -278
  69. package/dist/theme/Radio.css +1 -492
  70. package/dist/theme/Resizable.css +1 -95
  71. package/dist/theme/Select.css +1 -584
  72. package/dist/theme/Skeleton.css +1 -192
  73. package/dist/theme/Switch.css +1 -323
  74. package/dist/theme/Table.css +1 -680
  75. package/dist/theme/Validator.css +1 -25
  76. package/dist/theme/index.css +1 -341
  77. package/dist/types/components/Badge/types.d.ts +2 -0
  78. package/dist/types/components/Carousel/constants.d.ts +6 -0
  79. package/dist/types/components/Carousel/index.d.ts +77 -0
  80. package/dist/types/components/Carousel/types.d.ts +27 -0
  81. package/dist/types/components/Collapsible/constants.d.ts +6 -0
  82. package/dist/types/components/Collapsible/index.d.ts +85 -0
  83. package/dist/types/components/Collapsible/types.d.ts +22 -0
  84. package/dist/types/components/Command/constants.d.ts +4 -0
  85. package/dist/types/components/Command/index.d.ts +216 -0
  86. package/dist/types/components/Command/types.d.ts +59 -0
  87. package/dist/types/components/Validator/index.d.ts +1 -0
  88. package/dist/types/components/index.d.ts +3 -0
  89. package/dist/types/hooks/index.d.ts +1 -1
  90. package/dist/umd/index.css +2 -1
  91. package/dist/umd/index.css.gz +0 -0
  92. package/dist/umd/index.umd.cjs +1255 -5
  93. package/dist/umd/index.umd.cjs.gz +0 -0
  94. package/package.json +15 -3
  95. package/dist/es/Alert-DdAShH-x.js +0 -19
  96. package/dist/es/Avatar-BGTH7x40.js +0 -9
  97. package/dist/es/Badge-CYZ55qNe.js +0 -14
  98. package/dist/es/Breadcrumb-BTWTtzrN.js +0 -15
  99. package/dist/es/Button-GsSCWg5x.js +0 -24
  100. package/dist/es/Card-BhgzwQqo.js +0 -16
  101. package/dist/es/ChatBubble-4F481Agj.js +0 -9
  102. package/dist/es/Checkbox-C7vZGSTh.js +0 -51
  103. package/dist/es/Collapse-CbcSQig5.js +0 -53
  104. package/dist/es/ConfigProvider-K1UzjlRm.js +0 -45
  105. package/dist/es/Diff-B747pgwb.js +0 -64
  106. package/dist/es/Divider-BSu_1-AU.js +0 -9
  107. package/dist/es/Drawer-I2lCgyba.js +0 -40
  108. package/dist/es/Dropdown-B0J_c8Wv.js +0 -104
  109. package/dist/es/FileInput-CFg1wpsH.js +0 -33
  110. package/dist/es/Filter-nA8j-62U.js +0 -40
  111. package/dist/es/Form-C1b8Igns.js +0 -123
  112. package/dist/es/Icon-BulvH9Wm.js +0 -27
  113. package/dist/es/Indicator-BbW4iUkh.js +0 -9
  114. package/dist/es/Input-BUHFulIW.js +0 -42
  115. package/dist/es/Kbd-CeP2wkdE.js +0 -13
  116. package/dist/es/Link-Dks2bXo8.js +0 -11
  117. package/dist/es/Loading-DoBtVGWo.js +0 -92
  118. package/dist/es/Message-Ba_P4Wvy.js +0 -152
  119. package/dist/es/Notification-DzG8dLuk.js +0 -69
  120. package/dist/es/Overlay-DeyTycv0.js +0 -12
  121. package/dist/es/Pixelate-B21HKbSE.js +0 -39
  122. package/dist/es/Popconfirm-BqN3JxJ_.js +0 -23
  123. package/dist/es/Progress--6EJjbbM.js +0 -12
  124. package/dist/es/Radio-CrdrvrFH.js +0 -33
  125. package/dist/es/Resizable-By3ijQf0.js +0 -151
  126. package/dist/es/Select-Cq1Ucs_U.js +0 -133
  127. package/dist/es/Skeleton-ChCVgMSk.js +0 -15
  128. package/dist/es/Switch-DURmSH-T.js +0 -34
  129. package/dist/es/Table-BE2f9u65.js +0 -10
  130. package/dist/es/Tooltip-DR4Mc5Fh.js +0 -74
  131. package/dist/es/Validator-BYn72MYn.js +0 -40
  132. package/dist/es/hooks-dJGu-5DG.js +0 -170
  133. package/dist/es/utils-CnCdZsHG.js +0 -155
  134. package/dist/es/vendor-eombfMkP.js +0 -1351
  135. package/dist/theme/Form.css +0 -83
  136. package/dist/theme/Icon.css +0 -168
  137. package/dist/theme/Overlay.css +0 -12
  138. package/dist/theme/Tooltip.css +0 -235
@@ -1,584 +1 @@
1
- /* Select Variables */
2
- .px-select[data-v-1ab275ee] {
3
- --px-select-item-hover-bg-color: var(--px-fill-color-light);
4
- --px-select-item-font-size: var(--px-font-size-base);
5
- --px-select-item-font-color: var(--px-text-color-primary);
6
- --px-select-item-selected-font-color: var(--px-color-primary);
7
- --px-select-item-selected-bg-color: var(--px-color-primary-light-9);
8
- --px-select-item-disabled-font-color: var(--px-text-color-disabled);
9
- --px-select-input-focus-border-color: var(--px-hover-border-color);
10
- --px-select-border-color: var(--px-border-color);
11
- --px-select-shadow-color: var(--px-shadow-color);
12
- --px-select-dropdown-bg-color: var(--px-fill-color-blank);
13
- --px-select-item-indicator-color: var(--px-color-primary);
14
- --px-select-item-highlighted-border-color: var(--px-color-primary);
15
- }
16
- /* Base Select Styles - Pixel Dropdown */
17
- .px-select[data-v-1ab275ee] {
18
- display: inline-block;
19
- vertical-align: middle;
20
- line-height: 32px;
21
- font-family: var(--px-font-family);
22
- }
23
- /* Tooltip popper styling - pixel style inherited from Tooltip */
24
- .px-select[data-v-1ab275ee] .px-tooltip__popper {
25
- padding: 0;
26
- }
27
- /* Override tooltip background to match select dropdown */
28
- .px-select[data-v-1ab275ee] .px-tooltip__popper::after {
29
- background: var(--px-select-dropdown-bg-color);
30
- }
31
- /* Input with dropdown arrow */
32
- .px-select[data-v-1ab275ee] .px-input .header-angle {
33
- transition: none;
34
- }
35
- .px-select[data-v-1ab275ee] .px-input .header-angle.is-active {
36
- transform: rotate(180deg);
37
- }
38
- /* No data / Loading states */
39
- .px-select .px-select__nodata[data-v-1ab275ee],
40
- .px-select .px-select__loading[data-v-1ab275ee] {
41
- padding: 12px 16px;
42
- margin: 0;
43
- text-align: center;
44
- color: var(--px-text-color-secondary);
45
- font-size: var(--px-select-item-font-size);
46
- font-family: var(--px-font-family);
47
- }
48
- /* Menu container */
49
- .px-select .px-select__menu[data-v-1ab275ee] {
50
- list-style: none;
51
- margin: 0;
52
- padding: 4px 0;
53
- box-sizing: border-box;
54
- }
55
- /* Menu items - Pixel list style */
56
- .px-select .px-select__menu-item[data-v-1ab275ee] {
57
- margin: 0;
58
- font-size: var(--px-select-item-font-size);
59
- font-family: var(--px-font-family);
60
- padding: 0 16px 0 24px;
61
- position: relative;
62
- white-space: nowrap;
63
- overflow: hidden;
64
- text-overflow: ellipsis;
65
- color: var(--px-select-item-font-color);
66
- height: 36px;
67
- line-height: 36px;
68
- box-sizing: border-box;
69
- cursor: pointer;
70
- transition: none;
71
- }
72
- /* Pixel selector indicator - arrow shape on interaction */
73
- .px-select .px-select__menu-item[data-v-1ab275ee]::before {
74
- content: '';
75
- position: absolute;
76
- left: 10px;
77
- top: 50%;
78
- transform: translateY(-50%);
79
- width: 6px;
80
- height: 6px;
81
- background: transparent;
82
- border: 2px solid transparent;
83
- /* Pixel arrow — right-pointing triangle, visible when colored */
84
- clip-path: polygon(0 0, 100% 50%, 0 100%);
85
- z-index: 2;
86
- }
87
- /* Background layer for hover/selected states */
88
- .px-select .px-select__menu-item[data-v-1ab275ee]::after {
89
- content: '';
90
- position: absolute;
91
- inset: 0;
92
- left: 2px;
93
- right: 2px;
94
- background: transparent;
95
- z-index: -1;
96
- }
97
- /* Hover effect */
98
- .px-select .px-select__menu-item[data-v-1ab275ee]:hover::after {
99
- background-color: var(--px-select-item-hover-bg-color);
100
- /* CRT scanline overlay - subtle retro stripe effect */
101
- background-image: repeating-linear-gradient(
102
- 0deg,
103
- transparent 0px,
104
- transparent 2px,
105
- rgba(0, 0, 0, 0.03) 2px,
106
- rgba(0, 0, 0, 0.03) 4px
107
- );
108
- }
109
- .px-select .px-select__menu-item[data-v-1ab275ee]:hover::before {
110
- border-color: var(--px-hover-border-color);
111
- background: var(--px-hover-border-color);
112
- }
113
- /* Selected state with pixel indicator */
114
- .px-select .px-select__menu-item.is-selected[data-v-1ab275ee] {
115
- color: var(--px-select-item-selected-font-color);
116
- font-weight: 500;
117
- }
118
- .px-select .px-select__menu-item.is-selected[data-v-1ab275ee]::after {
119
- background-color: var(--px-select-item-selected-bg-color);
120
- }
121
- .px-select .px-select__menu-item.is-selected[data-v-1ab275ee]::before {
122
- background: var(--px-select-item-indicator-color);
123
- border-color: var(--px-select-item-indicator-color);
124
- }
125
- /* Highlighted (keyboard navigation) */
126
- .px-select .px-select__menu-item.is-highlighted[data-v-1ab275ee]::after {
127
- background-color: var(--px-select-item-hover-bg-color);
128
- }
129
- .px-select .px-select__menu-item.is-highlighted[data-v-1ab275ee]::before {
130
- border-color: var(--px-select-item-highlighted-border-color);
131
- background: var(--px-select-item-highlighted-border-color);
132
- }
133
- /* Disabled state */
134
- .px-select .px-select__menu-item.is-disabled[data-v-1ab275ee] {
135
- color: var(--px-select-item-disabled-font-color);
136
- cursor: not-allowed;
137
- }
138
- .px-select .px-select__menu-item.is-disabled[data-v-1ab275ee]:hover::after {
139
- background-color: transparent;
140
- }
141
- .px-select .px-select__menu-item.is-disabled[data-v-1ab275ee]:hover::before {
142
- border-color: transparent;
143
- background: transparent;
144
- }
145
- /* First item needs pixel corners on top */
146
- .px-select .px-select__menu-item[data-v-1ab275ee]:first-child::after {
147
- top: 2px;
148
- clip-path: polygon(
149
- 0 2px, 2px 2px, 2px 0, 4px 0,
150
- calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, 100% 2px,
151
- 100% 100%,
152
- 0 100%
153
- );
154
- }
155
- /* Last item needs pixel corners on bottom */
156
- .px-select .px-select__menu-item[data-v-1ab275ee]:last-child::after {
157
- bottom: 2px;
158
- clip-path: polygon(
159
- 0 0,
160
- 100% 0,
161
- 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, calc(100% - 4px) 100%,
162
- 4px 100%, 4px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
163
- );
164
- }
165
- /* If only one item, needs both top and bottom pixel corners */
166
- .px-select .px-select__menu-item[data-v-1ab275ee]:first-child:last-child::after {
167
- top: 2px;
168
- bottom: 2px;
169
- clip-path: polygon(
170
- 0 2px, 2px 2px, 2px 0, 4px 0,
171
- calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, 100% 2px,
172
- 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, calc(100% - 4px) 100%,
173
- 4px 100%, 4px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
174
- );
175
- }
176
- /* Input pointer cursor */
177
- .px-select[data-v-1ab275ee] .px-input__inner {
178
- cursor: pointer;
179
- }
180
- /* Disabled state */
181
- .px-select.is-disabled[data-v-1ab275ee] {
182
- opacity: 0.6;
183
- cursor: not-allowed;
184
- }
185
- /* Ghost style - transparent at rest, Input handles border/shadow via prop */
186
- .px-select.is-ghost[data-v-1ab275ee] .px-tooltip__popper::after {
187
- background: var(--px-select-dropdown-bg-color);
188
- }
189
- /* Size: Large */
190
- .px-select.px-select--large[data-v-1ab275ee] {
191
- line-height: 44px;
192
- }
193
- .px-select.px-select--large .px-select__menu-item[data-v-1ab275ee] {
194
- height: 44px;
195
- line-height: 44px;
196
- font-size: var(--px-font-size-large);
197
- padding: 0 20px 0 28px;
198
- }
199
- .px-select.px-select--large .px-select__menu-item[data-v-1ab275ee]::before {
200
- left: 12px;
201
- width: 8px;
202
- height: 8px;
203
- }
204
- /* Size: Small */
205
- .px-select.px-select--small[data-v-1ab275ee] {
206
- line-height: 28px;
207
- }
208
- .px-select.px-select--small .px-select__menu-item[data-v-1ab275ee] {
209
- height: 28px;
210
- line-height: 28px;
211
- font-size: var(--px-font-size-small);
212
- padding: 0 12px 0 20px;
213
- }
214
- .px-select.px-select--small .px-select__menu-item[data-v-1ab275ee]::before {
215
- left: 8px;
216
- width: 4px;
217
- height: 4px;
218
- }
219
- /* Color variants */
220
- .px-select.px-select--primary[data-v-1ab275ee] {
221
- --px-select-item-selected-font-color: var(--px-color-primary);
222
- --px-select-item-selected-bg-color: var(--px-color-primary-light-9);
223
- --px-select-item-indicator-color: var(--px-color-primary);
224
- --px-select-item-highlighted-border-color: var(--px-color-primary);
225
- }
226
- .px-select.px-select--success[data-v-1ab275ee] {
227
- --px-select-item-selected-font-color: var(--px-color-success);
228
- --px-select-item-selected-bg-color: var(--px-color-success-light-9);
229
- --px-select-item-indicator-color: var(--px-color-success);
230
- --px-select-item-highlighted-border-color: var(--px-color-success);
231
- }
232
- .px-select.px-select--warning[data-v-1ab275ee] {
233
- --px-select-item-selected-font-color: var(--px-color-warning);
234
- --px-select-item-selected-bg-color: var(--px-color-warning-light-9);
235
- --px-select-item-indicator-color: var(--px-color-warning);
236
- --px-select-item-highlighted-border-color: var(--px-color-warning);
237
- }
238
- .px-select.px-select--info[data-v-1ab275ee] {
239
- --px-select-item-selected-font-color: var(--px-color-info);
240
- --px-select-item-selected-bg-color: var(--px-color-info-light-9);
241
- --px-select-item-indicator-color: var(--px-color-info);
242
- --px-select-item-highlighted-border-color: var(--px-color-info);
243
- }
244
- .px-select.px-select--danger[data-v-1ab275ee] {
245
- --px-select-item-selected-font-color: var(--px-color-danger);
246
- --px-select-item-selected-bg-color: var(--px-color-danger-light-9);
247
- --px-select-item-indicator-color: var(--px-color-danger);
248
- --px-select-item-highlighted-border-color: var(--px-color-danger);
249
- }
250
- /* Pixel scrollbar - RPG-style scrollbar for long option lists */
251
- .px-select .px-select__menu[data-v-1ab275ee] {
252
- scrollbar-width: thin;
253
- scrollbar-color: var(--px-border-color) var(--px-fill-color-light);
254
- }
255
- .px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar {
256
- width: 8px;
257
- }
258
- .px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-track {
259
- background: var(--px-fill-color-light);
260
- border-left: 2px solid var(--px-border-color);
261
- }
262
- .px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-thumb {
263
- background: var(--px-border-color);
264
- border: 2px solid var(--px-fill-color-light);
265
- }
266
- .px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-thumb:hover {
267
- background: var(--px-text-color-secondary);
268
- }
269
- /* Dark mode overrides for Select enhancements */
270
- .px-dark .px-select .px-select__menu-item[data-v-1ab275ee]:hover::after {
271
- background-image: repeating-linear-gradient(
272
- 0deg,
273
- transparent 0px,
274
- transparent 2px,
275
- rgba(255, 255, 255, 0.03) 2px,
276
- rgba(255, 255, 255, 0.03) 4px
277
- );
278
- }
279
- .px-dark .px-select .px-select__menu[data-v-1ab275ee] {
280
- scrollbar-color: var(--px-border-color) var(--px-fill-color-darker);
281
- }
282
- .px-dark .px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-track {
283
- background: var(--px-fill-color-darker);
284
- border-left-color: var(--px-border-color);
285
- }
286
- .px-dark .px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-thumb {
287
- background: var(--px-border-color);
288
- border-color: var(--px-fill-color-darker);
289
- }
290
- .px-dark .px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-thumb:hover {
291
- background: var(--px-text-color-secondary);
292
- }
293
- /* Select Variables */
294
- .px-select[data-v-e33550e6] {
295
- --px-select-item-hover-bg-color: var(--px-fill-color-light);
296
- --px-select-item-font-size: var(--px-font-size-base);
297
- --px-select-item-font-color: var(--px-text-color-primary);
298
- --px-select-item-selected-font-color: var(--px-color-primary);
299
- --px-select-item-selected-bg-color: var(--px-color-primary-light-9);
300
- --px-select-item-disabled-font-color: var(--px-text-color-disabled);
301
- --px-select-input-focus-border-color: var(--px-hover-border-color);
302
- --px-select-border-color: var(--px-border-color);
303
- --px-select-shadow-color: var(--px-shadow-color);
304
- --px-select-dropdown-bg-color: var(--px-fill-color-blank);
305
- --px-select-item-indicator-color: var(--px-color-primary);
306
- --px-select-item-highlighted-border-color: var(--px-color-primary);
307
- }
308
- /* Base Select Styles - Pixel Dropdown */
309
- .px-select[data-v-e33550e6] {
310
- display: inline-block;
311
- vertical-align: middle;
312
- line-height: 32px;
313
- font-family: var(--px-font-family);
314
- }
315
- /* Tooltip popper styling - pixel style inherited from Tooltip */
316
- .px-select[data-v-e33550e6] .px-tooltip__popper {
317
- padding: 0;
318
- }
319
- /* Override tooltip background to match select dropdown */
320
- .px-select[data-v-e33550e6] .px-tooltip__popper::after {
321
- background: var(--px-select-dropdown-bg-color);
322
- }
323
- /* Input with dropdown arrow */
324
- .px-select[data-v-e33550e6] .px-input .header-angle {
325
- transition: none;
326
- }
327
- .px-select[data-v-e33550e6] .px-input .header-angle.is-active {
328
- transform: rotate(180deg);
329
- }
330
- /* No data / Loading states */
331
- .px-select .px-select__nodata[data-v-e33550e6],
332
- .px-select .px-select__loading[data-v-e33550e6] {
333
- padding: 12px 16px;
334
- margin: 0;
335
- text-align: center;
336
- color: var(--px-text-color-secondary);
337
- font-size: var(--px-select-item-font-size);
338
- font-family: var(--px-font-family);
339
- }
340
- /* Menu container */
341
- .px-select .px-select__menu[data-v-e33550e6] {
342
- list-style: none;
343
- margin: 0;
344
- padding: 4px 0;
345
- box-sizing: border-box;
346
- }
347
- /* Menu items - Pixel list style */
348
- .px-select .px-select__menu-item[data-v-e33550e6] {
349
- margin: 0;
350
- font-size: var(--px-select-item-font-size);
351
- font-family: var(--px-font-family);
352
- padding: 0 16px 0 24px;
353
- position: relative;
354
- white-space: nowrap;
355
- overflow: hidden;
356
- text-overflow: ellipsis;
357
- color: var(--px-select-item-font-color);
358
- height: 36px;
359
- line-height: 36px;
360
- box-sizing: border-box;
361
- cursor: pointer;
362
- transition: none;
363
- }
364
- /* Pixel selector indicator - arrow shape on interaction */
365
- .px-select .px-select__menu-item[data-v-e33550e6]::before {
366
- content: '';
367
- position: absolute;
368
- left: 10px;
369
- top: 50%;
370
- transform: translateY(-50%);
371
- width: 6px;
372
- height: 6px;
373
- background: transparent;
374
- border: 2px solid transparent;
375
- /* Pixel arrow — right-pointing triangle, visible when colored */
376
- clip-path: polygon(0 0, 100% 50%, 0 100%);
377
- z-index: 2;
378
- }
379
- /* Background layer for hover/selected states */
380
- .px-select .px-select__menu-item[data-v-e33550e6]::after {
381
- content: '';
382
- position: absolute;
383
- inset: 0;
384
- left: 2px;
385
- right: 2px;
386
- background: transparent;
387
- z-index: -1;
388
- }
389
- /* Hover effect */
390
- .px-select .px-select__menu-item[data-v-e33550e6]:hover::after {
391
- background-color: var(--px-select-item-hover-bg-color);
392
- /* CRT scanline overlay - subtle retro stripe effect */
393
- background-image: repeating-linear-gradient(
394
- 0deg,
395
- transparent 0px,
396
- transparent 2px,
397
- rgba(0, 0, 0, 0.03) 2px,
398
- rgba(0, 0, 0, 0.03) 4px
399
- );
400
- }
401
- .px-select .px-select__menu-item[data-v-e33550e6]:hover::before {
402
- border-color: var(--px-hover-border-color);
403
- background: var(--px-hover-border-color);
404
- }
405
- /* Selected state with pixel indicator */
406
- .px-select .px-select__menu-item.is-selected[data-v-e33550e6] {
407
- color: var(--px-select-item-selected-font-color);
408
- font-weight: 500;
409
- }
410
- .px-select .px-select__menu-item.is-selected[data-v-e33550e6]::after {
411
- background-color: var(--px-select-item-selected-bg-color);
412
- }
413
- .px-select .px-select__menu-item.is-selected[data-v-e33550e6]::before {
414
- background: var(--px-select-item-indicator-color);
415
- border-color: var(--px-select-item-indicator-color);
416
- }
417
- /* Highlighted (keyboard navigation) */
418
- .px-select .px-select__menu-item.is-highlighted[data-v-e33550e6]::after {
419
- background-color: var(--px-select-item-hover-bg-color);
420
- }
421
- .px-select .px-select__menu-item.is-highlighted[data-v-e33550e6]::before {
422
- border-color: var(--px-select-item-highlighted-border-color);
423
- background: var(--px-select-item-highlighted-border-color);
424
- }
425
- /* Disabled state */
426
- .px-select .px-select__menu-item.is-disabled[data-v-e33550e6] {
427
- color: var(--px-select-item-disabled-font-color);
428
- cursor: not-allowed;
429
- }
430
- .px-select .px-select__menu-item.is-disabled[data-v-e33550e6]:hover::after {
431
- background-color: transparent;
432
- }
433
- .px-select .px-select__menu-item.is-disabled[data-v-e33550e6]:hover::before {
434
- border-color: transparent;
435
- background: transparent;
436
- }
437
- /* First item needs pixel corners on top */
438
- .px-select .px-select__menu-item[data-v-e33550e6]:first-child::after {
439
- top: 2px;
440
- clip-path: polygon(
441
- 0 2px, 2px 2px, 2px 0, 4px 0,
442
- calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, 100% 2px,
443
- 100% 100%,
444
- 0 100%
445
- );
446
- }
447
- /* Last item needs pixel corners on bottom */
448
- .px-select .px-select__menu-item[data-v-e33550e6]:last-child::after {
449
- bottom: 2px;
450
- clip-path: polygon(
451
- 0 0,
452
- 100% 0,
453
- 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, calc(100% - 4px) 100%,
454
- 4px 100%, 4px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
455
- );
456
- }
457
- /* If only one item, needs both top and bottom pixel corners */
458
- .px-select .px-select__menu-item[data-v-e33550e6]:first-child:last-child::after {
459
- top: 2px;
460
- bottom: 2px;
461
- clip-path: polygon(
462
- 0 2px, 2px 2px, 2px 0, 4px 0,
463
- calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, 100% 2px,
464
- 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, calc(100% - 4px) 100%,
465
- 4px 100%, 4px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px)
466
- );
467
- }
468
- /* Input pointer cursor */
469
- .px-select[data-v-e33550e6] .px-input__inner {
470
- cursor: pointer;
471
- }
472
- /* Disabled state */
473
- .px-select.is-disabled[data-v-e33550e6] {
474
- opacity: 0.6;
475
- cursor: not-allowed;
476
- }
477
- /* Ghost style - transparent at rest, Input handles border/shadow via prop */
478
- .px-select.is-ghost[data-v-e33550e6] .px-tooltip__popper::after {
479
- background: var(--px-select-dropdown-bg-color);
480
- }
481
- /* Size: Large */
482
- .px-select.px-select--large[data-v-e33550e6] {
483
- line-height: 44px;
484
- }
485
- .px-select.px-select--large .px-select__menu-item[data-v-e33550e6] {
486
- height: 44px;
487
- line-height: 44px;
488
- font-size: var(--px-font-size-large);
489
- padding: 0 20px 0 28px;
490
- }
491
- .px-select.px-select--large .px-select__menu-item[data-v-e33550e6]::before {
492
- left: 12px;
493
- width: 8px;
494
- height: 8px;
495
- }
496
- /* Size: Small */
497
- .px-select.px-select--small[data-v-e33550e6] {
498
- line-height: 28px;
499
- }
500
- .px-select.px-select--small .px-select__menu-item[data-v-e33550e6] {
501
- height: 28px;
502
- line-height: 28px;
503
- font-size: var(--px-font-size-small);
504
- padding: 0 12px 0 20px;
505
- }
506
- .px-select.px-select--small .px-select__menu-item[data-v-e33550e6]::before {
507
- left: 8px;
508
- width: 4px;
509
- height: 4px;
510
- }
511
- /* Color variants */
512
- .px-select.px-select--primary[data-v-e33550e6] {
513
- --px-select-item-selected-font-color: var(--px-color-primary);
514
- --px-select-item-selected-bg-color: var(--px-color-primary-light-9);
515
- --px-select-item-indicator-color: var(--px-color-primary);
516
- --px-select-item-highlighted-border-color: var(--px-color-primary);
517
- }
518
- .px-select.px-select--success[data-v-e33550e6] {
519
- --px-select-item-selected-font-color: var(--px-color-success);
520
- --px-select-item-selected-bg-color: var(--px-color-success-light-9);
521
- --px-select-item-indicator-color: var(--px-color-success);
522
- --px-select-item-highlighted-border-color: var(--px-color-success);
523
- }
524
- .px-select.px-select--warning[data-v-e33550e6] {
525
- --px-select-item-selected-font-color: var(--px-color-warning);
526
- --px-select-item-selected-bg-color: var(--px-color-warning-light-9);
527
- --px-select-item-indicator-color: var(--px-color-warning);
528
- --px-select-item-highlighted-border-color: var(--px-color-warning);
529
- }
530
- .px-select.px-select--info[data-v-e33550e6] {
531
- --px-select-item-selected-font-color: var(--px-color-info);
532
- --px-select-item-selected-bg-color: var(--px-color-info-light-9);
533
- --px-select-item-indicator-color: var(--px-color-info);
534
- --px-select-item-highlighted-border-color: var(--px-color-info);
535
- }
536
- .px-select.px-select--danger[data-v-e33550e6] {
537
- --px-select-item-selected-font-color: var(--px-color-danger);
538
- --px-select-item-selected-bg-color: var(--px-color-danger-light-9);
539
- --px-select-item-indicator-color: var(--px-color-danger);
540
- --px-select-item-highlighted-border-color: var(--px-color-danger);
541
- }
542
- /* Pixel scrollbar - RPG-style scrollbar for long option lists */
543
- .px-select .px-select__menu[data-v-e33550e6] {
544
- scrollbar-width: thin;
545
- scrollbar-color: var(--px-border-color) var(--px-fill-color-light);
546
- }
547
- .px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar {
548
- width: 8px;
549
- }
550
- .px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar-track {
551
- background: var(--px-fill-color-light);
552
- border-left: 2px solid var(--px-border-color);
553
- }
554
- .px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar-thumb {
555
- background: var(--px-border-color);
556
- border: 2px solid var(--px-fill-color-light);
557
- }
558
- .px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar-thumb:hover {
559
- background: var(--px-text-color-secondary);
560
- }
561
- /* Dark mode overrides for Select enhancements */
562
- .px-dark .px-select .px-select__menu-item[data-v-e33550e6]:hover::after {
563
- background-image: repeating-linear-gradient(
564
- 0deg,
565
- transparent 0px,
566
- transparent 2px,
567
- rgba(255, 255, 255, 0.03) 2px,
568
- rgba(255, 255, 255, 0.03) 4px
569
- );
570
- }
571
- .px-dark .px-select .px-select__menu[data-v-e33550e6] {
572
- scrollbar-color: var(--px-border-color) var(--px-fill-color-darker);
573
- }
574
- .px-dark .px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar-track {
575
- background: var(--px-fill-color-darker);
576
- border-left-color: var(--px-border-color);
577
- }
578
- .px-dark .px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar-thumb {
579
- background: var(--px-border-color);
580
- border-color: var(--px-fill-color-darker);
581
- }
582
- .px-dark .px-select .px-select__menu[data-v-e33550e6]::-webkit-scrollbar-thumb:hover {
583
- background: var(--px-text-color-secondary);
584
- }
1
+ .px-select[data-v-1ab275ee]{--px-select-item-hover-bg-color:var(--px-fill-color-light);--px-select-item-font-size:var(--px-font-size-base);--px-select-item-font-color:var(--px-text-color-primary);--px-select-item-selected-font-color:var(--px-color-primary);--px-select-item-selected-bg-color:var(--px-color-primary-light-9);--px-select-item-disabled-font-color:var(--px-text-color-disabled);--px-select-input-focus-border-color:var(--px-hover-border-color);--px-select-border-color:var(--px-border-color);--px-select-shadow-color:var(--px-shadow-color);--px-select-dropdown-bg-color:var(--px-fill-color-blank);--px-select-item-indicator-color:var(--px-color-primary);--px-select-item-highlighted-border-color:var(--px-color-primary);vertical-align:middle;line-height:32px;font-family:var(--px-font-family);display:inline-block}.px-select .px-select__nodata[data-v-1ab275ee],.px-select .px-select__loading[data-v-1ab275ee]{text-align:center;color:var(--px-text-color-secondary);font-size:var(--px-select-item-font-size);font-family:var(--px-font-family);margin:0;padding:12px 16px}.px-select .px-select__menu[data-v-1ab275ee]{box-sizing:border-box;margin:0;padding:4px 0;list-style:none}.px-select .px-select__menu-item[data-v-1ab275ee]{font-size:var(--px-select-item-font-size);font-family:var(--px-font-family);white-space:nowrap;text-overflow:ellipsis;color:var(--px-select-item-font-color);box-sizing:border-box;cursor:pointer;height:36px;margin:0;padding:0 16px 0 24px;line-height:36px;transition:none;position:relative;overflow:hidden}.px-select .px-select__menu-item[data-v-1ab275ee]:before{content:"";clip-path:polygon(0 0,100% 50%,0 100%);z-index:2;background:0 0;border:2px solid #0000;width:6px;height:6px;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.px-select .px-select__menu-item[data-v-1ab275ee]:after{content:"";z-index:-1;background:0 0;position:absolute;inset:0 2px}.px-select .px-select__menu-item[data-v-1ab275ee]:hover:after{background-color:var(--px-select-item-hover-bg-color);background-image:repeating-linear-gradient(0deg,#0000 0 2px,#00000008 2px 4px)}.px-select .px-select__menu-item[data-v-1ab275ee]:hover:before{border-color:var(--px-hover-border-color);background:var(--px-hover-border-color)}.px-select .px-select__menu-item.is-selected[data-v-1ab275ee]{color:var(--px-select-item-selected-font-color);font-weight:500}.px-select .px-select__menu-item.is-selected[data-v-1ab275ee]:after{background-color:var(--px-select-item-selected-bg-color)}.px-select .px-select__menu-item.is-selected[data-v-1ab275ee]:before{background:var(--px-select-item-indicator-color);border-color:var(--px-select-item-indicator-color)}.px-select .px-select__menu-item.is-highlighted[data-v-1ab275ee]:after{background-color:var(--px-select-item-hover-bg-color)}.px-select .px-select__menu-item.is-highlighted[data-v-1ab275ee]:before{border-color:var(--px-select-item-highlighted-border-color);background:var(--px-select-item-highlighted-border-color)}.px-select .px-select__menu-item.is-disabled[data-v-1ab275ee]{color:var(--px-select-item-disabled-font-color);cursor:not-allowed}.px-select .px-select__menu-item.is-disabled[data-v-1ab275ee]:hover:after{background-color:#0000}.px-select .px-select__menu-item.is-disabled[data-v-1ab275ee]:hover:before{background:0 0;border-color:#0000}.px-select .px-select__menu-item[data-v-1ab275ee]:first-child:after{clip-path:polygon(0 2px,2px 2px,2px 0,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,100% 2px,100% 100%,0 100%);top:2px}.px-select .px-select__menu-item[data-v-1ab275ee]:last-child:after{clip-path:polygon(0 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,calc(100% - 4px) 100%,4px 100%,4px 100%,2px calc(100% - 2px),0 calc(100% - 2px));bottom:2px}.px-select .px-select__menu-item[data-v-1ab275ee]:first-child:last-child:after{clip-path:polygon(0 2px,2px 2px,2px 0,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,calc(100% - 4px) 100%,4px 100%,4px 100%,2px calc(100% - 2px),0 calc(100% - 2px));top:2px;bottom:2px}.px-select.is-disabled[data-v-1ab275ee]{opacity:.6;cursor:not-allowed}.px-select.px-select--large[data-v-1ab275ee]{line-height:44px}.px-select.px-select--large .px-select__menu-item[data-v-1ab275ee]{height:44px;line-height:44px;font-size:var(--px-font-size-large);padding:0 20px 0 28px}.px-select.px-select--large .px-select__menu-item[data-v-1ab275ee]:before{width:8px;height:8px;left:12px}.px-select.px-select--small[data-v-1ab275ee]{line-height:28px}.px-select.px-select--small .px-select__menu-item[data-v-1ab275ee]{height:28px;line-height:28px;font-size:var(--px-font-size-small);padding:0 12px 0 20px}.px-select.px-select--small .px-select__menu-item[data-v-1ab275ee]:before{width:4px;height:4px;left:8px}.px-select.px-select--primary[data-v-1ab275ee]{--px-select-item-selected-font-color:var(--px-color-primary);--px-select-item-selected-bg-color:var(--px-color-primary-light-9);--px-select-item-indicator-color:var(--px-color-primary);--px-select-item-highlighted-border-color:var(--px-color-primary)}.px-select.px-select--success[data-v-1ab275ee]{--px-select-item-selected-font-color:var(--px-color-success);--px-select-item-selected-bg-color:var(--px-color-success-light-9);--px-select-item-indicator-color:var(--px-color-success);--px-select-item-highlighted-border-color:var(--px-color-success)}.px-select.px-select--warning[data-v-1ab275ee]{--px-select-item-selected-font-color:var(--px-color-warning);--px-select-item-selected-bg-color:var(--px-color-warning-light-9);--px-select-item-indicator-color:var(--px-color-warning);--px-select-item-highlighted-border-color:var(--px-color-warning)}.px-select.px-select--info[data-v-1ab275ee]{--px-select-item-selected-font-color:var(--px-color-info);--px-select-item-selected-bg-color:var(--px-color-info-light-9);--px-select-item-indicator-color:var(--px-color-info);--px-select-item-highlighted-border-color:var(--px-color-info)}.px-select.px-select--danger[data-v-1ab275ee]{--px-select-item-selected-font-color:var(--px-color-danger);--px-select-item-selected-bg-color:var(--px-color-danger-light-9);--px-select-item-indicator-color:var(--px-color-danger);--px-select-item-highlighted-border-color:var(--px-color-danger)}.px-select .px-select__menu[data-v-1ab275ee]{scrollbar-width:thin;scrollbar-color:var(--px-border-color) var(--px-fill-color-light)}.px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar{width:8px}.px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-track{background:var(--px-fill-color-light);border-left:2px solid var(--px-border-color)}.px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-thumb{background:var(--px-border-color);border:2px solid var(--px-fill-color-light)}.px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-thumb:hover{background:var(--px-text-color-secondary)}.px-dark .px-select .px-select__menu-item[data-v-1ab275ee]:hover:after{background-image:repeating-linear-gradient(0deg,#0000 0 2px,#ffffff08 2px 4px)}.px-dark .px-select .px-select__menu[data-v-1ab275ee]{scrollbar-color:var(--px-border-color) var(--px-fill-color-darker)}.px-dark .px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-track{background:var(--px-fill-color-darker);border-left-color:var(--px-border-color)}.px-dark .px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-thumb{background:var(--px-border-color);border-color:var(--px-fill-color-darker)}.px-dark .px-select .px-select__menu[data-v-1ab275ee]::-webkit-scrollbar-thumb:hover{background:var(--px-text-color-secondary)}.px-select[data-v-c8876ee5]{--px-select-item-hover-bg-color:var(--px-fill-color-light);--px-select-item-font-size:var(--px-font-size-base);--px-select-item-font-color:var(--px-text-color-primary);--px-select-item-selected-font-color:var(--px-color-primary);--px-select-item-selected-bg-color:var(--px-color-primary-light-9);--px-select-item-disabled-font-color:var(--px-text-color-disabled);--px-select-input-focus-border-color:var(--px-hover-border-color);--px-select-border-color:var(--px-border-color);--px-select-shadow-color:var(--px-shadow-color);--px-select-dropdown-bg-color:var(--px-fill-color-blank);--px-select-item-indicator-color:var(--px-color-primary);--px-select-item-highlighted-border-color:var(--px-color-primary);vertical-align:middle;line-height:32px;font-family:var(--px-font-family);display:inline-block}.px-select .px-select__nodata[data-v-c8876ee5],.px-select .px-select__loading[data-v-c8876ee5]{text-align:center;color:var(--px-text-color-secondary);font-size:var(--px-select-item-font-size);font-family:var(--px-font-family);margin:0;padding:12px 16px}.px-select .px-select__menu[data-v-c8876ee5]{box-sizing:border-box;margin:0;padding:4px 0;list-style:none}.px-select .px-select__menu-item[data-v-c8876ee5]{font-size:var(--px-select-item-font-size);font-family:var(--px-font-family);white-space:nowrap;text-overflow:ellipsis;color:var(--px-select-item-font-color);box-sizing:border-box;cursor:pointer;height:36px;margin:0;padding:0 16px 0 24px;line-height:36px;transition:none;position:relative;overflow:hidden}.px-select .px-select__menu-item[data-v-c8876ee5]:before{content:"";clip-path:polygon(0 0,100% 50%,0 100%);z-index:2;background:0 0;border:2px solid #0000;width:6px;height:6px;position:absolute;top:50%;left:10px;transform:translateY(-50%)}.px-select .px-select__menu-item[data-v-c8876ee5]:after{content:"";z-index:-1;background:0 0;position:absolute;inset:0 2px}.px-select .px-select__menu-item[data-v-c8876ee5]:hover:after{background-color:var(--px-select-item-hover-bg-color);background-image:repeating-linear-gradient(0deg,#0000 0 2px,#00000008 2px 4px)}.px-select .px-select__menu-item[data-v-c8876ee5]:hover:before{border-color:var(--px-hover-border-color);background:var(--px-hover-border-color)}.px-select .px-select__menu-item.is-selected[data-v-c8876ee5]{color:var(--px-select-item-selected-font-color);font-weight:500}.px-select .px-select__menu-item.is-selected[data-v-c8876ee5]:after{background-color:var(--px-select-item-selected-bg-color)}.px-select .px-select__menu-item.is-selected[data-v-c8876ee5]:before{background:var(--px-select-item-indicator-color);border-color:var(--px-select-item-indicator-color)}.px-select .px-select__menu-item.is-highlighted[data-v-c8876ee5]:after{background-color:var(--px-select-item-hover-bg-color)}.px-select .px-select__menu-item.is-highlighted[data-v-c8876ee5]:before{border-color:var(--px-select-item-highlighted-border-color);background:var(--px-select-item-highlighted-border-color)}.px-select .px-select__menu-item.is-disabled[data-v-c8876ee5]{color:var(--px-select-item-disabled-font-color);cursor:not-allowed}.px-select .px-select__menu-item.is-disabled[data-v-c8876ee5]:hover:after{background-color:#0000}.px-select .px-select__menu-item.is-disabled[data-v-c8876ee5]:hover:before{background:0 0;border-color:#0000}.px-select .px-select__menu-item[data-v-c8876ee5]:first-child:after{clip-path:polygon(0 2px,2px 2px,2px 0,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,100% 2px,100% 100%,0 100%);top:2px}.px-select .px-select__menu-item[data-v-c8876ee5]:last-child:after{clip-path:polygon(0 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,calc(100% - 4px) 100%,4px 100%,4px 100%,2px calc(100% - 2px),0 calc(100% - 2px));bottom:2px}.px-select .px-select__menu-item[data-v-c8876ee5]:first-child:last-child:after{clip-path:polygon(0 2px,2px 2px,2px 0,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,calc(100% - 4px) 100%,4px 100%,4px 100%,2px calc(100% - 2px),0 calc(100% - 2px));top:2px;bottom:2px}.px-select.is-disabled[data-v-c8876ee5]{opacity:.6;cursor:not-allowed}.px-select.px-select--large[data-v-c8876ee5]{line-height:44px}.px-select.px-select--large .px-select__menu-item[data-v-c8876ee5]{height:44px;line-height:44px;font-size:var(--px-font-size-large);padding:0 20px 0 28px}.px-select.px-select--large .px-select__menu-item[data-v-c8876ee5]:before{width:8px;height:8px;left:12px}.px-select.px-select--small[data-v-c8876ee5]{line-height:28px}.px-select.px-select--small .px-select__menu-item[data-v-c8876ee5]{height:28px;line-height:28px;font-size:var(--px-font-size-small);padding:0 12px 0 20px}.px-select.px-select--small .px-select__menu-item[data-v-c8876ee5]:before{width:4px;height:4px;left:8px}.px-select.px-select--primary[data-v-c8876ee5]{--px-select-item-selected-font-color:var(--px-color-primary);--px-select-item-selected-bg-color:var(--px-color-primary-light-9);--px-select-item-indicator-color:var(--px-color-primary);--px-select-item-highlighted-border-color:var(--px-color-primary)}.px-select.px-select--success[data-v-c8876ee5]{--px-select-item-selected-font-color:var(--px-color-success);--px-select-item-selected-bg-color:var(--px-color-success-light-9);--px-select-item-indicator-color:var(--px-color-success);--px-select-item-highlighted-border-color:var(--px-color-success)}.px-select.px-select--warning[data-v-c8876ee5]{--px-select-item-selected-font-color:var(--px-color-warning);--px-select-item-selected-bg-color:var(--px-color-warning-light-9);--px-select-item-indicator-color:var(--px-color-warning);--px-select-item-highlighted-border-color:var(--px-color-warning)}.px-select.px-select--info[data-v-c8876ee5]{--px-select-item-selected-font-color:var(--px-color-info);--px-select-item-selected-bg-color:var(--px-color-info-light-9);--px-select-item-indicator-color:var(--px-color-info);--px-select-item-highlighted-border-color:var(--px-color-info)}.px-select.px-select--danger[data-v-c8876ee5]{--px-select-item-selected-font-color:var(--px-color-danger);--px-select-item-selected-bg-color:var(--px-color-danger-light-9);--px-select-item-indicator-color:var(--px-color-danger);--px-select-item-highlighted-border-color:var(--px-color-danger)}.px-select .px-select__menu[data-v-c8876ee5]{scrollbar-width:thin;scrollbar-color:var(--px-border-color) var(--px-fill-color-light)}.px-select .px-select__menu[data-v-c8876ee5]::-webkit-scrollbar{width:8px}.px-select .px-select__menu[data-v-c8876ee5]::-webkit-scrollbar-track{background:var(--px-fill-color-light);border-left:2px solid var(--px-border-color)}.px-select .px-select__menu[data-v-c8876ee5]::-webkit-scrollbar-thumb{background:var(--px-border-color);border:2px solid var(--px-fill-color-light)}.px-select .px-select__menu[data-v-c8876ee5]::-webkit-scrollbar-thumb:hover{background:var(--px-text-color-secondary)}.px-dark .px-select .px-select__menu-item[data-v-c8876ee5]:hover:after{background-image:repeating-linear-gradient(0deg,#0000 0 2px,#ffffff08 2px 4px)}.px-dark .px-select .px-select__menu[data-v-c8876ee5]{scrollbar-color:var(--px-border-color) var(--px-fill-color-darker)}.px-dark .px-select .px-select__menu[data-v-c8876ee5]::-webkit-scrollbar-track{background:var(--px-fill-color-darker);border-left-color:var(--px-border-color)}.px-dark .px-select .px-select__menu[data-v-c8876ee5]::-webkit-scrollbar-thumb{background:var(--px-border-color);border-color:var(--px-fill-color-darker)}.px-dark .px-select .px-select__menu[data-v-c8876ee5]::-webkit-scrollbar-thumb:hover{background:var(--px-text-color-secondary)}.px-select .px-tooltip .px-tooltip__popper{padding:0}.px-select .px-tooltip .px-tooltip__popper:after{background:var(--px-select-dropdown-bg-color)}.px-select .px-input .header-angle{transition:none}.px-select .px-input .header-angle.is-active{transform:rotate(180deg)}.px-select .px-input__inner{cursor:pointer}.px-select.is-ghost .px-tooltip .px-tooltip__popper:after{background:var(--px-select-dropdown-bg-color)}