1/*
2 * DO NOT EDIT THIS FILE.
3 * See the following change record for more information,
4 * https://www.drupal.org/node/3084859
5 * @preserve
6 */
7
8/**
9 * @file
10 * Comment section and individual comments.
11 */
12
13.comment--level-1 {
14  border-top: 2px solid #e7edf1
15}
16
17.comment--level-1 ~ .comment--level-1 {
18    margin-top: 2.25rem;
19  }
20
21.comments__title {
22  display: flex;
23  align-items: center;
24  margin-top: 0;
25}
26
27[dir="ltr"] .comments__count {
28  margin-left: 1.125rem
29}
30
31[dir="rtl"] .comments__count {
32  margin-right: 1.125rem
33}
34
35[dir="ltr"] .comments__count {
36  margin-right: 1.125rem
37}
38
39[dir="rtl"] .comments__count {
40  margin-left: 1.125rem
41}
42
43[dir="ltr"] .comments__count {
44  padding-left: 0.3125rem
45}
46
47[dir="rtl"] .comments__count {
48  padding-right: 0.3125rem
49}
50
51[dir="ltr"] .comments__count {
52  padding-right: 0.3125rem
53}
54
55[dir="rtl"] .comments__count {
56  padding-left: 0.3125rem
57}
58
59.comments__count {
60  position: relative;
61  display: inline-block;
62  min-width: 2.125rem;
63  margin-top: 0;
64  margin-bottom: 0.5625rem;
65  padding-top: 0;
66  padding-bottom: 0;
67  text-align: center;
68  color: #fff;
69  border-radius: 2px;
70  background-color: #0d77b5;
71  font-size: 0.6875rem;
72  line-height: 1.3125rem
73}
74
75[dir="ltr"] .comments__count:after {
76    left: 0.5rem
77}
78
79[dir="rtl"] .comments__count:after {
80    right: 0.5rem
81}
82
83[dir="ltr"] .comments__count:after {
84    border-right: 8px solid transparent
85}
86
87[dir="rtl"] .comments__count:after {
88    border-left: 8px solid transparent
89}
90
91.comments__count:after {
92    position: absolute;
93    bottom: -0.4375rem;
94    width: 0;
95    height: 0;
96    content: "";
97    border-top: 7px solid #0d77b5;
98  }
99
100.comment-form {
101  padding-bottom: 2.25rem;
102}
103
104[dir="ltr"] .add-comment__form {
105  padding-left: 0
106}
107
108[dir="rtl"] .add-comment__form {
109  padding-right: 0
110}
111
112[dir="ltr"] .comment {
113  padding-left: 3.375rem
114}
115
116[dir="rtl"] .comment {
117  padding-right: 3.375rem
118}
119
120.comment {
121  position: relative;
122  padding-top: 2.25rem
123}
124
125@media (min-width: 43.75rem) {
126
127[dir="ltr"] .comment {
128    padding-left: 0
129  }
130
131[dir="rtl"] .comment {
132    padding-right: 0
133  }
134  }
135
136.comment__text-content {
137  font-size: 1rem
138}
139
140.comment__text-content blockquote {
141    font-size: 1.3125rem;
142    line-height: 2.25rem;
143  }
144
145.comment__text-content {
146
147  /* Override for .field:not(:last-child) */
148}
149
150.comment__text-content:not(:last-child) {
151    margin-bottom: 0;
152  }
153
154.comment__links {
155  margin-top: 1.125rem;
156  margin-bottom: 0;
157}
158
159.comment__links-link {
160  text-decoration: none;
161  font-size: 0.875rem;
162  font-weight: bold;
163  line-height: 1.125rem
164}
165
166.comment__links-link:hover {
167    text-decoration: underline;
168  }
169
170.add-comment__picture-wrapper {
171  top: 2.25rem;
172}
173
174[dir="ltr"] .add-comment__picture,[dir="ltr"]
175.comment__picture {
176  left: 0
177}
178
179[dir="rtl"] .add-comment__picture,[dir="rtl"]
180.comment__picture {
181  right: 0
182}
183
184.add-comment__picture,
185.comment__picture {
186  position: absolute;
187  overflow: hidden;
188  width: 2.25rem;
189  height: 2.25rem;
190  border-radius: 50%;
191  background-color: #e7edf1
192}
193
194.add-comment__picture *:not(img), .comment__picture *:not(img) {
195    display: inherit;
196    width: inherit;
197    height: inherit;
198  }
199
200.add-comment__picture img, .comment__picture img {
201    width: 100%;
202    height: 100%;
203    -o-object-fit: cover;
204    object-fit: cover
205
206    /* @TODO: create image-style for profile's avatar to have image squared by default. */
207  }
208
209@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
210
211.add-comment__picture img, .comment__picture img {
212      position: absolute;
213      /* stylelint-disable csstools/use-logical */
214      top: 50%;
215      left: 50%;
216      /* stylelint-enable csstools/use-logical */
217      width: 100%;
218      height: auto;
219      transform: translate(-50%, -50%)
220  }
221    }
222
223@media (min-width: 43.75rem) {
224
225[dir="ltr"] .add-comment__picture,[dir="ltr"]
226.comment__picture {
227    left: -5.625rem
228  }
229
230[dir="rtl"] .add-comment__picture,[dir="rtl"]
231.comment__picture {
232    right: -5.625rem
233  }
234
235.add-comment__picture,
236.comment__picture {
237    width: 3.375rem;
238    height: 3.375rem
239}
240  }
241
242@media (min-width: 43.75rem) {
243
244[dir="ltr"] .indented .comment__picture {
245    left: -4.5rem
246  }
247
248[dir="rtl"] .indented .comment__picture {
249    right: -4.5rem
250  }
251
252.indented .comment__picture {
253    width: 2.25rem;
254    height: 2.25rem
255}
256  }
257
258.comment__meta * {
259    display: inline;
260  }
261
262[dir="ltr"] .comment__author {
263  margin-right: 1.125rem
264}
265
266[dir="rtl"] .comment__author {
267  margin-left: 1.125rem
268}
269
270.comment__author {
271  font-family: "metropolis", sans-serif;
272  font-size: 1rem;
273  font-weight: 700;
274  line-height: 1.125rem
275}
276
277.comment__author a {
278    text-decoration: none;
279  }
280
281.comment__time {
282  margin: 0;
283  color: #6e7172;
284  font-family: "metropolis", sans-serif;
285  font-size: 0.875rem;
286  line-height: 1.125rem;
287}
288
289[dir="ltr"] .indented {
290  margin-left: 2.25rem
291}
292
293[dir="rtl"] .indented {
294  margin-right: 2.25rem
295}
296
297[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
298    left: -3.375rem
299}
300
301[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
302    right: -3.375rem
303}
304
305[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
306    border-left: solid 1px #e7edf1
307}
308
309[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
310    border-right: solid 1px #e7edf1
311}
312
313.indented > .comment:not(:last-of-type):not(.has-children):before {
314    position: absolute;
315    top: 2.25rem; /* Comment's padding-top */
316    width: 0;
317    height: 100%;
318    content: ""
319  }
320
321@media (min-width: 43.75rem) {
322
323[dir="ltr"] .indented > .comment:not(:last-of-type):not(.has-children):before {
324      left: -3.375rem
325  }
326
327[dir="rtl"] .indented > .comment:not(:last-of-type):not(.has-children):before {
328      right: -3.375rem
329  }
330    }
331
332@media (min-width: 43.75rem) {
333
334[dir="ltr"] .indented {
335    margin-left: 4.5rem
336  }
337
338[dir="rtl"] .indented {
339    margin-right: 4.5rem
340  }
341  }
342
343[dir="ltr"] .show-hide-btn {
344  margin-left: 3.375rem
345}
346
347[dir="rtl"] .show-hide-btn {
348  margin-right: 3.375rem
349}
350
351[dir="ltr"] .show-hide-btn {
352  margin-right: 0
353}
354
355[dir="rtl"] .show-hide-btn {
356  margin-left: 0
357}
358
359[dir="ltr"] .show-hide-btn {
360  padding-left: 0
361}
362
363[dir="rtl"] .show-hide-btn {
364  padding-right: 0
365}
366
367[dir="ltr"] .show-hide-btn {
368  padding-right: 0
369}
370
371[dir="rtl"] .show-hide-btn {
372  padding-left: 0
373}
374
375.show-hide-btn {
376  margin-top: 2.25rem;
377  margin-bottom: 0;
378  padding-top: 0;
379  padding-bottom: 0;
380  cursor: pointer;
381  color: #313637;
382  border: 0;
383  background: none;
384  font-size: 0.875rem;
385  font-weight: 600;
386  line-height: 1.125rem;
387  -webkit-appearance: none;
388  -moz-appearance: none;
389  appearance: none
390}
391
392.show-hide-btn[aria-expanded="true"]:after {
393    content: "\0020 -";
394  }
395
396.show-hide-btn[aria-expanded="false"]:after {
397    content: "\0020 +";
398  }
399
400@media (min-width: 43.75rem) {
401
402[dir="ltr"] .show-hide-btn {
403    margin-left: 0
404  }
405
406[dir="rtl"] .show-hide-btn {
407    margin-right: 0
408  }
409  }
410