@oslokommune/punkt-css 12.15.0 → 12.18.7

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 (45) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/css/components/alert.css +4 -0
  3. package/dist/css/components/alert.min.css +1 -1
  4. package/dist/css/components/card.css +4 -0
  5. package/dist/css/components/card.min.css +1 -1
  6. package/dist/css/components/linkcard.css +4 -0
  7. package/dist/css/components/linkcard.min.css +1 -1
  8. package/dist/css/components/messagebox.css +4 -0
  9. package/dist/css/components/messagebox.min.css +1 -1
  10. package/dist/css/components/textinput.css +1 -1
  11. package/dist/css/components/textinput.min.css +1 -1
  12. package/dist/css/elements/button.css +488 -0
  13. package/dist/css/elements/button.min.css +1 -0
  14. package/dist/css/elements/checkbox-radio.css +287 -0
  15. package/dist/css/elements/checkbox-radio.min.css +1 -0
  16. package/dist/css/elements/form.css +104 -0
  17. package/dist/css/elements/form.min.css +1 -0
  18. package/dist/css/elements/hr.css +8 -0
  19. package/dist/css/elements/hr.min.css +1 -0
  20. package/dist/css/elements/image.css +25 -0
  21. package/dist/css/elements/image.min.css +1 -0
  22. package/dist/css/elements/input.css +269 -0
  23. package/dist/css/elements/input.min.css +1 -0
  24. package/dist/css/elements/list.css +110 -0
  25. package/dist/css/elements/list.min.css +1 -0
  26. package/dist/css/elements/section.css +216 -0
  27. package/dist/css/elements/section.min.css +1 -0
  28. package/dist/css/elements/select.css +302 -0
  29. package/dist/css/elements/select.min.css +1 -0
  30. package/dist/css/elements/table.css +110 -0
  31. package/dist/css/elements/table.min.css +1 -0
  32. package/dist/css/pkt-base.css +1 -1
  33. package/dist/css/pkt-base.min.css +1 -1
  34. package/dist/css/pkt-components.css +17 -1
  35. package/dist/css/pkt-components.min.css +1 -1
  36. package/dist/css/pkt-elements.css +3 -3
  37. package/dist/css/pkt-elements.min.css +1 -1
  38. package/dist/css/pkt.css +20 -4
  39. package/dist/css/pkt.min.css +1 -1
  40. package/dist/scss/abstracts/variables/_index.scss +1 -1
  41. package/dist/scss/components/_alert.scss +4 -0
  42. package/dist/scss/components/_card.scss +4 -0
  43. package/dist/scss/components/_linkcard.scss +4 -0
  44. package/dist/scss/components/_messagebox.scss +4 -0
  45. package/package.json +2 -2
package/dist/css/elements/button.css ADDED
@@ -0,0 +1,488 @@
1
+ /* Button element!
2
+ *
3
+ * Size: small, medium, large
4
+ * Skin: primary, secondary, tertiary
5
+ * State: normal, focus, hover, active, disabled
6
+ * Variant: label-only, icon-left, icon-right, icon-only
7
+ * Background: light, dark
8
+ */
9
+ /*
10
+ * Accessibility
11
+ * https://kittygiraudel.com/2016/10/13/css-hide-and-seek/#undesirable-overflows-18012019
12
+ */
13
+ .pkt-btn--icon-only .pkt-btn__text {
14
+ border: 0 !important;
15
+ clip: rect(1px, 1px, 1px, 1px) !important;
16
+ -webkit-clip-path: inset(50%) !important;
17
+ clip-path: inset(50%) !important;
18
+ height: 1px !important;
19
+ overflow: hidden !important;
20
+ margin: -1px !important;
21
+ padding: 0 !important;
22
+ position: absolute !important;
23
+ width: 1px !important;
24
+ white-space: nowrap !important;
25
+ }
26
+
27
+ .pkt-btn__icon svg {
28
+ --ring-color: var(--pkt-color-brand-dark-blue-700);
29
+ --spinner-color: var(--pkt-color-brand-blue-1000);
30
+ }
31
+ [data-mode=dark] .pkt-btn__icon svg {
32
+ --ring-color: var(--pkt-color-brand-neutrals-white);
33
+ --spinner-color: var(--pkt-color-brand-dark-blue-1000);
34
+ }
35
+
36
+ .pkt-btn {
37
+ --pkt-color-button-background-normal: var(--pkt-color-brand-dark-blue-1000);
38
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-blue-1000);
39
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
40
+ --pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);
41
+ --pkt-color-button-border-focus: var(--pkt-color-brand-warm-blue-1000);
42
+ --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
43
+ --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
44
+ --pkt-color-button-background-hover: var(--pkt-color-brand-warm-blue-1000);
45
+ --pkt-color-button-border-hover: var(--pkt-color-brand-warm-blue-1000);
46
+ --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
47
+ --pkt-color-button-background-active: var(--pkt-color-brand-warm-blue-1000);
48
+ --pkt-color-button-border-active: var(--pkt-color-brand-warm-blue-1000);
49
+ --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
50
+ --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
51
+ --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
52
+ --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-500);
53
+ }
54
+
55
+ [data-mode=dark] .pkt-btn {
56
+ --pkt-color-button-background-normal: var(--pkt-color-brand-blue-500);
57
+ --pkt-color-button-border-normal: var(--pkt-color-brand-blue-500);
58
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
59
+ --pkt-color-button-background-focus: var(--pkt-color-brand-blue-1000);
60
+ --pkt-color-button-border-focus: var(--pkt-color-brand-blue-1000);
61
+ --pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);
62
+ --pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);
63
+ --pkt-color-button-background-hover: var(--pkt-color-brand-blue-1000);
64
+ --pkt-color-button-border-hover: var(--pkt-color-brand-blue-1000);
65
+ --pkt-color-button-text-hover: var(--pkt-color-brand-dark-blue-1000);
66
+ --pkt-color-button-background-active: var(--pkt-color-brand-blue-1000);
67
+ --pkt-color-button-border-active: var(--pkt-color-brand-blue-1000);
68
+ --pkt-color-button-text-active: var(--pkt-color-brand-dark-blue-1000);
69
+ --pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);
70
+ --pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);
71
+ --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
72
+ }
73
+ [data-mode=dark] .pkt-btn--green-dark {
74
+ --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
75
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
76
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
77
+ }
78
+ [data-mode=dark] .pkt-btn--green-dark-outline {
79
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
80
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
81
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
82
+ }
83
+ [data-mode=dark] .pkt-btn--green {
84
+ --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
85
+ --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
86
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
87
+ }
88
+ [data-mode=dark] .pkt-btn--green-outline {
89
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
90
+ --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
91
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
92
+ }
93
+ [data-mode=dark] .pkt-btn--blue {
94
+ --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
95
+ --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
96
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
97
+ }
98
+ [data-mode=dark] .pkt-btn--blue-outline {
99
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
100
+ --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
101
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
102
+ }
103
+ [data-mode=dark] .pkt-btn--beige-light {
104
+ --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
105
+ --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
106
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
107
+ }
108
+ [data-mode=dark] .pkt-btn--beige-dark-outline {
109
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
110
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
111
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
112
+ }
113
+ [data-mode=dark] .pkt-btn--yellow {
114
+ --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
115
+ --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
116
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
117
+ }
118
+ [data-mode=dark] .pkt-btn--yellow-outline {
119
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
120
+ --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
121
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
122
+ }
123
+ [data-mode=dark] .pkt-btn--red {
124
+ --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
125
+ --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
126
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
127
+ }
128
+ [data-mode=dark] .pkt-btn--red-outline {
129
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
130
+ --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
131
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
132
+ }
133
+
134
+ .pkt-btn--secondary {
135
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
136
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
137
+ --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
138
+ }
139
+
140
+ [data-mode=dark] .pkt-btn--secondary {
141
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
142
+ --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-white);
143
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
144
+ --pkt-color-button-background-focus: var(--pkt-color-brand-blue-500);
145
+ --pkt-color-button-border-focus: var(--pkt-color-brand-blue-500);
146
+ --pkt-color-button-background-hover: var(--pkt-color-brand-blue-500);
147
+ --pkt-color-button-border-hover: var(--pkt-color-brand-blue-500);
148
+ --pkt-color-button-background-active: var(--pkt-color-brand-blue-500);
149
+ --pkt-color-button-border-active: var(--pkt-color-brand-blue-500);
150
+ --pkt-color-button-background-disabled: var(--pkt-color-grays-gray-100);
151
+ --pkt-color-button-border-disabled: var(--pkt-color-grays-gray-100);
152
+ }
153
+ [data-mode=dark] .pkt-btn--secondary--green-dark {
154
+ --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
155
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
156
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
157
+ }
158
+ [data-mode=dark] .pkt-btn--secondary--green-dark-outline {
159
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
160
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
161
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
162
+ }
163
+ [data-mode=dark] .pkt-btn--secondary--green {
164
+ --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
165
+ --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
166
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
167
+ }
168
+ [data-mode=dark] .pkt-btn--secondary--green-outline {
169
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
170
+ --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
171
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
172
+ }
173
+ [data-mode=dark] .pkt-btn--secondary--blue {
174
+ --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
175
+ --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
176
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
177
+ }
178
+ [data-mode=dark] .pkt-btn--secondary--blue-outline {
179
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
180
+ --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
181
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
182
+ }
183
+ [data-mode=dark] .pkt-btn--secondary--beige-light {
184
+ --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
185
+ --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
186
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
187
+ }
188
+ [data-mode=dark] .pkt-btn--secondary--beige-dark-outline {
189
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
190
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
191
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
192
+ }
193
+ [data-mode=dark] .pkt-btn--secondary--yellow {
194
+ --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
195
+ --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
196
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
197
+ }
198
+ [data-mode=dark] .pkt-btn--secondary--yellow-outline {
199
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
200
+ --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
201
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
202
+ }
203
+ [data-mode=dark] .pkt-btn--secondary--red {
204
+ --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
205
+ --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
206
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
207
+ }
208
+ [data-mode=dark] .pkt-btn--secondary--red-outline {
209
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
210
+ --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
211
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
212
+ }
213
+
214
+ .pkt-btn--tertiary {
215
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
216
+ --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
217
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
218
+ --pkt-color-button-background-focus: var(--pkt-color-brand-neutrals-200);
219
+ --pkt-color-button-text-focus: var(--pkt-color-brand-warm-blue-1000);
220
+ --pkt-color-button-background-hover: var(--pkt-color-brand-neutrals-200);
221
+ --pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-200);
222
+ --pkt-color-button-text-hover: var(--pkt-color-brand-warm-blue-1000);
223
+ --pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600);
224
+ }
225
+
226
+ [data-mode=dark] .pkt-btn--tertiary {
227
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
228
+ --pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);
229
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
230
+ --pkt-color-button-background-focus: var(--pkt-color-brand-dark-blue-700);
231
+ --pkt-color-button-border-focus: var(--pkt-color-brand-dark-blue-700);
232
+ --pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);
233
+ --pkt-color-button-background-hover: var(--pkt-color-brand-dark-blue-700);
234
+ --pkt-color-button-border-hover: var(--pkt-color-brand-dark-blue-700);
235
+ --pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);
236
+ --pkt-color-button-background-active: var(--pkt-color-brand-dark-blue-700);
237
+ --pkt-color-button-border-active: var(--pkt-color-brand-dark-blue-700);
238
+ --pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);
239
+ }
240
+ [data-mode=dark] .pkt-btn--tertiary--green-dark {
241
+ --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
242
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
243
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
244
+ }
245
+ [data-mode=dark] .pkt-btn--tertiary--green-dark-outline {
246
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
247
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
248
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
249
+ }
250
+ [data-mode=dark] .pkt-btn--tertiary--green {
251
+ --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
252
+ --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
253
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
254
+ }
255
+ [data-mode=dark] .pkt-btn--tertiary--green-outline {
256
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
257
+ --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
258
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
259
+ }
260
+ [data-mode=dark] .pkt-btn--tertiary--blue {
261
+ --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
262
+ --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
263
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
264
+ }
265
+ [data-mode=dark] .pkt-btn--tertiary--blue-outline {
266
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
267
+ --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
268
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
269
+ }
270
+ [data-mode=dark] .pkt-btn--tertiary--beige-light {
271
+ --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
272
+ --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
273
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
274
+ }
275
+ [data-mode=dark] .pkt-btn--tertiary--beige-dark-outline {
276
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
277
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
278
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
279
+ }
280
+ [data-mode=dark] .pkt-btn--tertiary--yellow {
281
+ --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
282
+ --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
283
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
284
+ }
285
+ [data-mode=dark] .pkt-btn--tertiary--yellow-outline {
286
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
287
+ --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
288
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
289
+ }
290
+ [data-mode=dark] .pkt-btn--tertiary--red {
291
+ --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
292
+ --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
293
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
294
+ }
295
+ [data-mode=dark] .pkt-btn--tertiary--red-outline {
296
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
297
+ --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
298
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
299
+ }
300
+
301
+ .pkt-btn {
302
+ border-radius: 0;
303
+ cursor: pointer;
304
+ display: inline-flex;
305
+ font-family: inherit;
306
+ font-weight: normal;
307
+ -moz-user-select: none;
308
+ -webkit-user-select: none;
309
+ -ms-user-select: none;
310
+ user-select: none;
311
+ vertical-align: top;
312
+ background-color: var(--pkt-color-button-background-normal);
313
+ border: 2px solid var(--pkt-color-button-border-normal);
314
+ color: var(--pkt-color-button-text-normal);
315
+ text-decoration: none;
316
+ text-decoration-thickness: 1px;
317
+ text-underline-offset: 0.3em;
318
+ text-align: left;
319
+ align-items: center;
320
+ column-gap: 0.5rem;
321
+ }
322
+ .pkt-btn {
323
+ height: 3rem;
324
+ padding: 0 1rem;
325
+ line-height: 1.1;
326
+ letter-spacing: -0.2px;
327
+ font-weight: 500;
328
+ font-size: 1.125rem;
329
+ line-height: 1.75rem;
330
+ }
331
+ .pkt-btn__icon, .pkt-btn__icon .pkt-icon {
332
+ height: 1.5rem;
333
+ width: 1.5rem;
334
+ }
335
+ .pkt-btn--label-only .pkt-btn__icon:not(.pkt-btn__spinner) {
336
+ display: none;
337
+ }
338
+ .pkt-btn--icon-left {
339
+ flex-direction: row;
340
+ }
341
+ .pkt-btn--icon-right {
342
+ flex-direction: row-reverse;
343
+ }
344
+ .pkt-btn--icons-right-and-left {
345
+ flex-direction: row;
346
+ }
347
+ .pkt-btn--icon-only {
348
+ padding: 0 0.625rem;
349
+ }
350
+ .pkt-btn--small {
351
+ height: 2.625rem;
352
+ padding: 0 0.5rem;
353
+ line-height: 1.1;
354
+ letter-spacing: -0.2px;
355
+ font-weight: 500;
356
+ font-size: 0.875rem;
357
+ line-height: 1.375rem;
358
+ }
359
+ .pkt-btn--small .pkt-btn__icon, .pkt-btn--small .pkt-btn__icon .pkt-icon {
360
+ height: 1.25rem;
361
+ width: 1.25rem;
362
+ }
363
+ .pkt-btn--small.pkt-btn--icon-only {
364
+ padding: 0 0.5625rem;
365
+ }
366
+ .pkt-btn--large {
367
+ height: 4rem;
368
+ padding: 0 1rem;
369
+ line-height: 1.1;
370
+ letter-spacing: -0.2px;
371
+ font-weight: 500;
372
+ font-size: 1.5rem;
373
+ line-height: 2.25rem;
374
+ }
375
+ .pkt-btn--large .pkt-btn__icon, .pkt-btn--large .pkt-btn__icon .pkt-icon {
376
+ height: 2rem;
377
+ width: 2rem;
378
+ }
379
+ .pkt-btn--large.pkt-btn--icon-only {
380
+ padding: 0 0.875rem;
381
+ }
382
+ .pkt-btn[class*=pkt-btn--icon] > .pkt-btn__icon {
383
+ display: flex;
384
+ }
385
+ .pkt-btn__icon {
386
+ --fg-color: currentColor;
387
+ display: none;
388
+ flex-shrink: 0;
389
+ }
390
+ .pkt-btn:link, .pkt-btn:visited {
391
+ color: var(--pkt-color-button-text-normal);
392
+ }
393
+ a.pkt-btn:focus,
394
+ div.pkt-btn:not([data-disabled]):focus, .pkt-btn:enabled:focus, .pkt-btn.pkt-btn--focus {
395
+ background-color: var(--pkt-color-button-background-focus);
396
+ color: var(--pkt-color-button-text-focus);
397
+ border-color: var(--pkt-color-button-border-focus);
398
+ outline: 4px solid var(--pkt-color-border-states-focus);
399
+ text-decoration: none;
400
+ }
401
+
402
+ a.pkt-btn:hover,
403
+ div.pkt-btn:not([data-disabled]):hover, .pkt-btn:enabled:hover, .pkt-btn.pkt-btn--hover {
404
+ background-color: var(--pkt-color-button-background-hover);
405
+ border-color: var(--pkt-color-button-border-hover);
406
+ color: var(--pkt-color-button-text-hover);
407
+ outline: 0;
408
+ text-decoration: underline;
409
+ }
410
+
411
+ a.pkt-btn:active,
412
+ div.pkt-btn:not([data-disabled]):active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pkt-btn--active:hover {
413
+ background-color: var(--pkt-color-button-background-active);
414
+ border-color: var(--pkt-color-button-border-active);
415
+ color: var(--pkt-color-button-text-active);
416
+ outline: 0;
417
+ text-decoration: none;
418
+ }
419
+
420
+ .pkt-btn:disabled, .pkt-btn[disabled], .pkt-btn[data-disabled] {
421
+ background-color: var(--pkt-color-button-background-disabled);
422
+ border-color: var(--pkt-color-button-border-disabled);
423
+ color: var(--pkt-color-button-text-disabled);
424
+ cursor: inherit;
425
+ }
426
+ .pkt-btn::-moz-focus-inner {
427
+ border: 0;
428
+ }
429
+ .pkt-btn--green-dark {
430
+ --pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);
431
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
432
+ --pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);
433
+ }
434
+ .pkt-btn--green-dark-outline {
435
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
436
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);
437
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
438
+ }
439
+ .pkt-btn--green {
440
+ --pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);
441
+ --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
442
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
443
+ }
444
+ .pkt-btn--green-outline {
445
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
446
+ --pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);
447
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
448
+ }
449
+ .pkt-btn--blue {
450
+ --pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);
451
+ --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
452
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
453
+ }
454
+ .pkt-btn--blue-outline {
455
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
456
+ --pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);
457
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
458
+ }
459
+ .pkt-btn--beige-light {
460
+ --pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);
461
+ --pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);
462
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
463
+ }
464
+ .pkt-btn--beige-dark-outline {
465
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
466
+ --pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);
467
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
468
+ }
469
+ .pkt-btn--yellow {
470
+ --pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);
471
+ --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
472
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
473
+ }
474
+ .pkt-btn--yellow-outline {
475
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
476
+ --pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);
477
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
478
+ }
479
+ .pkt-btn--red {
480
+ --pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);
481
+ --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
482
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
483
+ }
484
+ .pkt-btn--red-outline {
485
+ --pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);
486
+ --pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);
487
+ --pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);
488
+ }
package/dist/css/elements/button.min.css ADDED
@@ -0,0 +1 @@
1
+ .pkt-btn--icon-only .pkt-btn__text{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;overflow:hidden !important;margin:-1px !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.pkt-btn__icon svg{--ring-color: var(--pkt-color-brand-dark-blue-700);--spinner-color: var(--pkt-color-brand-blue-1000)}[data-mode=dark] .pkt-btn__icon svg{--ring-color: var(--pkt-color-brand-neutrals-white);--spinner-color: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-border-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);--pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);--pkt-color-button-background-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-border-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-border-active: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);--pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);--pkt-color-button-text-disabled: var(--pkt-color-grays-gray-500)}[data-mode=dark] .pkt-btn{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-500);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-500);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-background-focus: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-focus: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-focus: var(--pkt-color-brand-dark-blue-1000);--pkt-color-border-states-focus: var(--pkt-color-brand-purple-1000);--pkt-color-button-background-hover: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-hover: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-hover: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-background-active: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-active: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-active: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-background-disabled: var(--pkt-color-brand-neutrals-100);--pkt-color-button-border-disabled: var(--pkt-color-brand-neutrals-100);--pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600)}[data-mode=dark] .pkt-btn--green-dark{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--green-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--green{--pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--green-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--blue{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--blue-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--beige-light{--pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--beige-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--yellow{--pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--yellow-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--red{--pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--red-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}.pkt-btn--secondary{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600)}[data-mode=dark] .pkt-btn--secondary{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-focus: var(--pkt-color-brand-blue-500);--pkt-color-button-border-focus: var(--pkt-color-brand-blue-500);--pkt-color-button-background-hover: var(--pkt-color-brand-blue-500);--pkt-color-button-border-hover: var(--pkt-color-brand-blue-500);--pkt-color-button-background-active: var(--pkt-color-brand-blue-500);--pkt-color-button-border-active: var(--pkt-color-brand-blue-500);--pkt-color-button-background-disabled: var(--pkt-color-grays-gray-100);--pkt-color-button-border-disabled: var(--pkt-color-grays-gray-100)}[data-mode=dark] .pkt-btn--secondary--green-dark{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--green-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--green{--pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--green-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--blue{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--blue-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--beige-light{--pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--beige-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--yellow{--pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--yellow-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--secondary--red{--pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--secondary--red-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}.pkt-btn--tertiary{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000);--pkt-color-button-background-focus: var(--pkt-color-brand-neutrals-200);--pkt-color-button-text-focus: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-background-hover: var(--pkt-color-brand-neutrals-200);--pkt-color-button-border-hover: var(--pkt-color-brand-neutrals-200);--pkt-color-button-text-hover: var(--pkt-color-brand-warm-blue-1000);--pkt-color-button-text-disabled: var(--pkt-color-grays-gray-600)}[data-mode=dark] .pkt-btn--tertiary{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-focus: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-border-focus: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-text-focus: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-hover: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-border-hover: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-text-hover: var(--pkt-color-brand-neutrals-white);--pkt-color-button-background-active: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-border-active: var(--pkt-color-brand-dark-blue-700);--pkt-color-button-text-active: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--green-dark{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--green-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--green{--pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--green-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--blue{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--blue-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--beige-light{--pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--beige-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--yellow{--pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--yellow-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}[data-mode=dark] .pkt-btn--tertiary--red{--pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}[data-mode=dark] .pkt-btn--tertiary--red-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}.pkt-btn{border-radius:0;cursor:pointer;display:inline-flex;font-family:inherit;font-weight:normal;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;vertical-align:top;background-color:var(--pkt-color-button-background-normal);border:2px solid var(--pkt-color-button-border-normal);color:var(--pkt-color-button-text-normal);text-decoration:none;text-decoration-thickness:1px;text-underline-offset:.3em;text-align:left;align-items:center;column-gap:.5rem}.pkt-btn{height:3rem;padding:0 1rem;line-height:1.1;letter-spacing:-0.2px;font-weight:500;font-size:1.125rem;line-height:1.75rem}.pkt-btn__icon,.pkt-btn__icon .pkt-icon{height:1.5rem;width:1.5rem}.pkt-btn--label-only .pkt-btn__icon:not(.pkt-btn__spinner){display:none}.pkt-btn--icon-left{flex-direction:row}.pkt-btn--icon-right{flex-direction:row-reverse}.pkt-btn--icons-right-and-left{flex-direction:row}.pkt-btn--icon-only{padding:0 .625rem}.pkt-btn--small{height:2.625rem;padding:0 .5rem;line-height:1.1;letter-spacing:-0.2px;font-weight:500;font-size:.875rem;line-height:1.375rem}.pkt-btn--small .pkt-btn__icon,.pkt-btn--small .pkt-btn__icon .pkt-icon{height:1.25rem;width:1.25rem}.pkt-btn--small.pkt-btn--icon-only{padding:0 .5625rem}.pkt-btn--large{height:4rem;padding:0 1rem;line-height:1.1;letter-spacing:-0.2px;font-weight:500;font-size:1.5rem;line-height:2.25rem}.pkt-btn--large .pkt-btn__icon,.pkt-btn--large .pkt-btn__icon .pkt-icon{height:2rem;width:2rem}.pkt-btn--large.pkt-btn--icon-only{padding:0 .875rem}.pkt-btn[class*=pkt-btn--icon]>.pkt-btn__icon{display:flex}.pkt-btn__icon{--fg-color: currentColor;display:none;flex-shrink:0}.pkt-btn:link,.pkt-btn:visited{color:var(--pkt-color-button-text-normal)}a.pkt-btn:focus,div.pkt-btn:not([data-disabled]):focus,.pkt-btn:enabled:focus,.pkt-btn.pkt-btn--focus{background-color:var(--pkt-color-button-background-focus);color:var(--pkt-color-button-text-focus);border-color:var(--pkt-color-button-border-focus);outline:4px solid var(--pkt-color-border-states-focus);text-decoration:none}a.pkt-btn:hover,div.pkt-btn:not([data-disabled]):hover,.pkt-btn:enabled:hover,.pkt-btn.pkt-btn--hover{background-color:var(--pkt-color-button-background-hover);border-color:var(--pkt-color-button-border-hover);color:var(--pkt-color-button-text-hover);outline:0;text-decoration:underline}a.pkt-btn:active,div.pkt-btn:not([data-disabled]):active,.pkt-btn:enabled:active,.pkt-btn.pkt-btn--active,.pkt-btn.pkt-btn--active:hover{background-color:var(--pkt-color-button-background-active);border-color:var(--pkt-color-button-border-active);color:var(--pkt-color-button-text-active);outline:0;text-decoration:none}.pkt-btn:disabled,.pkt-btn[disabled],.pkt-btn[data-disabled]{background-color:var(--pkt-color-button-background-disabled);border-color:var(--pkt-color-button-border-disabled);color:var(--pkt-color-button-text-disabled);cursor:inherit}.pkt-btn::-moz-focus-inner{border:0}.pkt-btn--green-dark{--pkt-color-button-background-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-neutrals-white)}.pkt-btn--green-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--green{--pkt-color-button-background-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--green-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-green-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--blue{--pkt-color-button-background-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--blue-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-blue-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--beige-light{--pkt-color-button-background-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-light-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--beige-dark-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-dark-beige-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--yellow{--pkt-color-button-background-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--yellow-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-yellow-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--red{--pkt-color-button-background-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}.pkt-btn--red-outline{--pkt-color-button-background-normal: var(--pkt-color-brand-neutrals-transparent);--pkt-color-button-border-normal: var(--pkt-color-brand-red-1000);--pkt-color-button-text-normal: var(--pkt-color-brand-dark-blue-1000)}