@digdir/designsystemet-css 0.11.0-alpha.8 → 0.11.0-next.10

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 (70) hide show
  1. package/accordion.css +118 -120
  2. package/alert.css +58 -64
  3. package/box.css +70 -72
  4. package/button.css +174 -176
  5. package/card.css +189 -191
  6. package/checkbox.css +157 -159
  7. package/chip.css +140 -142
  8. package/combobox.css +295 -295
  9. package/dist/accordion.css +1 -1
  10. package/dist/alert.css +1 -1
  11. package/dist/box.css +1 -1
  12. package/dist/button.css +1 -1
  13. package/dist/card.css +1 -1
  14. package/dist/checkbox.css +1 -1
  15. package/dist/chip.css +1 -1
  16. package/dist/combobox.css +1 -1
  17. package/dist/divider.css +1 -1
  18. package/dist/dropdownmenu.css +1 -1
  19. package/dist/error-summary.css +1 -1
  20. package/dist/fieldset.css +1 -1
  21. package/dist/helptext.css +1 -1
  22. package/dist/index.css +1 -1
  23. package/dist/link.css +1 -1
  24. package/dist/list.css +1 -1
  25. package/dist/modal.css +1 -1
  26. package/dist/native-select.css +1 -1
  27. package/dist/pagination.css +1 -1
  28. package/dist/popover.css +1 -1
  29. package/dist/radio.css +1 -1
  30. package/dist/search.css +1 -1
  31. package/dist/skeleton.css +1 -1
  32. package/dist/skiplink.css +1 -1
  33. package/dist/spinner.css +1 -1
  34. package/dist/switch.css +1 -1
  35. package/dist/table.css +1 -1
  36. package/dist/tabs.css +1 -1
  37. package/dist/tag.css +1 -1
  38. package/dist/textarea.css +1 -1
  39. package/dist/textfield.css +1 -1
  40. package/dist/togglegroup.css +1 -1
  41. package/dist/tooltip.css +1 -1
  42. package/dist/utilities.css +1 -0
  43. package/divider.css +13 -15
  44. package/dropdownmenu.css +55 -46
  45. package/error-summary.css +19 -15
  46. package/fieldset.css +42 -44
  47. package/helptext.css +49 -46
  48. package/index.css +39 -39
  49. package/link.css +50 -52
  50. package/list.css +18 -14
  51. package/modal.css +86 -85
  52. package/native-select.css +88 -90
  53. package/package.json +2 -3
  54. package/pagination.css +53 -55
  55. package/popover.css +71 -69
  56. package/radio.css +151 -142
  57. package/search.css +138 -142
  58. package/skeleton.css +46 -47
  59. package/skiplink.css +41 -41
  60. package/spinner.css +51 -49
  61. package/switch.css +190 -192
  62. package/table.css +117 -111
  63. package/tabs.css +69 -75
  64. package/tag.css +57 -59
  65. package/textarea.css +64 -66
  66. package/textfield.css +122 -122
  67. package/togglegroup.css +22 -24
  68. package/tooltip.css +12 -11
  69. package/utilities.css +38 -0
  70. package/LICENSE +0 -7
package/native-select.css CHANGED
@@ -1,108 +1,106 @@
1
- @layer ds.nativeselect {
2
- .ds-native-select__wrapper {
3
- position: relative;
4
- display: grid;
5
- flex: 0 1 auto;
6
- }
1
+ .ds-native-select__wrapper {
2
+ position: relative;
3
+ display: grid;
4
+ flex: 0 1 auto;
5
+ }
7
6
 
8
- /* chevron for native select */
9
- .ds-native-select__wrapper::after {
10
- content: '';
11
- position: absolute;
12
- background-color: var(--ds-color-neutral-text-default);
13
- pointer-events: none;
14
- top: 50%;
15
- right: var(--ds-spacing-2);
16
- transform: translateY(-50%);
17
- width: 1.5em;
18
- height: 1.5em;
19
- mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
20
- mask-size: contain;
21
- }
7
+ /* chevron for native select */
8
+ .ds-native-select__wrapper::after {
9
+ content: '';
10
+ position: absolute;
11
+ background-color: var(--ds-color-neutral-text-default);
12
+ pointer-events: none;
13
+ top: 50%;
14
+ right: var(--ds-spacing-2);
15
+ transform: translateY(-50%);
16
+ width: 1.5em;
17
+ height: 1.5em;
18
+ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
19
+ mask-size: contain;
20
+ }
22
21
 
23
- .ds-native-select {
24
- position: relative;
25
- font-family: inherit;
26
- box-sizing: border-box;
27
- padding: 0 var(--ds-spacing-2);
28
- border: solid 1px var(--ds-color-neutral-border-default);
29
- border-radius: var(--ds-border-radius-md);
30
- background-color: var(--ds-color-neutral-background-default);
31
- color: var(--ds-color-neutral-text-default);
32
- appearance: none;
33
- }
22
+ .ds-native-select {
23
+ position: relative;
24
+ font-family: inherit;
25
+ box-sizing: border-box;
26
+ padding: 0 var(--ds-spacing-2);
27
+ border: solid 1px var(--ds-color-neutral-border-default);
28
+ border-radius: var(--ds-border-radius-md);
29
+ background-color: var(--ds-color-neutral-background-default);
30
+ color: var(--ds-color-neutral-text-default);
31
+ appearance: none;
32
+ }
34
33
 
35
- @media (hover: hover) and (pointer: fine) {
36
- .ds-native-select:not(:focus-visible, :disabled, [aria-disabled]):hover {
37
- border-color: var(--ds-color-accent-border-strong);
38
- box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
39
- }
34
+ @media (hover: hover) and (pointer: fine) {
35
+ .ds-native-select:not(:focus-visible, :disabled, [aria-disabled]):hover {
36
+ border-color: var(--ds-color-accent-border-strong);
37
+ box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
40
38
  }
39
+ }
41
40
 
42
- .ds-native-select.ds-native-select--multiple {
43
- background-image: none;
44
- }
41
+ .ds-native-select.ds-native-select--multiple {
42
+ background-image: none;
43
+ }
45
44
 
46
- .ds-native-select--sm {
47
- padding: 0 var(--ds-spacing-2);
48
- padding-right: var(--ds-spacing-8);
49
- height: var(--ds-sizing-10);
50
- }
45
+ .ds-native-select--sm {
46
+ padding: 0 var(--ds-spacing-2);
47
+ padding-right: var(--ds-spacing-8);
48
+ height: var(--ds-sizing-10);
49
+ }
51
50
 
52
- .ds-native-select--md {
53
- padding: 0 var(--ds-spacing-3);
54
- padding-right: var(--ds-spacing-10);
55
- height: var(--ds-sizing-12);
56
- }
51
+ .ds-native-select--md {
52
+ padding: 0 var(--ds-spacing-3);
53
+ padding-right: var(--ds-spacing-10);
54
+ height: var(--ds-sizing-12);
55
+ }
57
56
 
58
- .ds-native-select--lg {
59
- padding: 0 var(--ds-spacing-4);
60
- padding-right: var(--ds-spacing-12);
61
- height: var(--ds-sizing-14);
62
- }
57
+ .ds-native-select--lg {
58
+ padding: 0 var(--ds-spacing-4);
59
+ padding-right: var(--ds-spacing-12);
60
+ height: var(--ds-sizing-14);
61
+ }
63
62
 
64
- .ds-native-select--container {
65
- display: grid;
66
- gap: var(--ds-spacing-2);
67
- }
63
+ .ds-native-select--container {
64
+ display: grid;
65
+ gap: var(--ds-spacing-2);
66
+ }
68
67
 
69
- .ds-native-select--container:has(.ds-native-select:disabled) {
70
- opacity: var(--ds-disabled-opacity);
71
- }
68
+ .ds-native-select--container:has(.ds-native-select:disabled) {
69
+ opacity: var(--ds-disabled-opacity);
70
+ }
72
71
 
73
- .ds-native-select:disabled {
74
- cursor: not-allowed;
75
- }
72
+ .ds-native-select:disabled {
73
+ cursor: not-allowed;
74
+ }
76
75
 
77
- .ds-native-select--readonly .ds-native-select {
78
- background: var(--ds-color-neutral-background-subtle);
79
- border-color: var(--ds-color-neutral-border-strong);
80
- }
76
+ .ds-native-select--readonly .ds-native-select {
77
+ background: var(--ds-color-neutral-background-subtle);
78
+ border-color: var(--ds-color-neutral-border-strong);
79
+ }
81
80
 
82
- .ds-native-select--error > .ds-native-select:not(:focus-visible) {
83
- border-color: var(--ds-color-danger-border-default);
84
- box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
85
- }
81
+ .ds-native-select--error > .ds-native-select:not(:focus-visible) {
82
+ border-color: var(--ds-color-danger-border-default);
83
+ box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
84
+ }
86
85
 
87
- .ds-native-select__readonly__icon {
88
- height: 1.2em;
89
- width: 1.2em;
90
- }
86
+ .ds-native-select__readonly__icon {
87
+ height: 1.2em;
88
+ width: 1.2em;
89
+ }
91
90
 
92
- .ds-native-select__error-message:empty {
93
- display: none;
94
- }
91
+ .ds-native-select__error-message:empty {
92
+ display: none;
93
+ }
95
94
 
96
- .ds-native-select__label {
97
- min-width: min-content;
98
- display: inline-flex;
99
- flex-direction: row;
100
- gap: var(--ds-spacing-1);
101
- align-items: center;
102
- }
95
+ .ds-native-select__label {
96
+ min-width: min-content;
97
+ display: inline-flex;
98
+ flex-direction: row;
99
+ gap: var(--ds-spacing-1);
100
+ align-items: center;
101
+ }
103
102
 
104
- .ds-native-select__description {
105
- color: var(--ds-color-neutral-text-subtle);
106
- margin-top: calc(var(--ds-spacing-2) * -1);
107
- }
103
+ .ds-native-select__description {
104
+ color: var(--ds-color-neutral-text-subtle);
105
+ margin-top: calc(var(--ds-spacing-2) * -1);
108
106
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@digdir/designsystemet-css",
3
- "version": "0.11.0-alpha.8",
3
+ "version": "0.11.0-next.10",
4
4
  "description": "CSS for Designsystemet",
5
5
  "author": "Designsystemet team",
6
6
  "repository": "https://github.com/digdir/designsystemet",
@@ -38,6 +38,5 @@
38
38
  "postcss-cli": "^11.0.0",
39
39
  "postcss-import": "^16.0.1",
40
40
  "rimraf": "^5.0.5"
41
- },
42
- "gitHead": "da315701edbee97727abade0a6ff67619edcf3a7"
41
+ }
43
42
  }
package/pagination.css CHANGED
@@ -1,69 +1,67 @@
1
- @layer ds.pagination {
2
- .ds-pagination {
3
- --dsc-pagination-listitem-margin: var(--ds-spacing-4);
4
- --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
5
- --dsc-pagination-chevron-margin: var(--ds-spacing-2);
1
+ .ds-pagination {
2
+ --dsc-pagination-listitem-margin: var(--ds-spacing-4);
3
+ --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
4
+ --dsc-pagination-chevron-margin: var(--ds-spacing-2);
6
5
 
7
- list-style-type: none;
8
- display: flex;
9
- padding: 0;
10
- margin: 0;
11
- position: relative;
12
- width: fit-content;
13
- }
6
+ list-style-type: none;
7
+ display: flex;
8
+ padding: 0;
9
+ margin: 0;
10
+ position: relative;
11
+ width: fit-content;
12
+ }
14
13
 
15
- .ds-pagination--hidden {
16
- visibility: hidden;
17
- }
14
+ .ds-pagination--hidden {
15
+ visibility: hidden;
16
+ }
18
17
 
19
- .ds-pagination--sm {
20
- --dsc-pagination-chevron-margin: var(--ds-spacing-2);
21
- }
18
+ .ds-pagination--sm {
19
+ --dsc-pagination-chevron-margin: var(--ds-spacing-2);
20
+ }
22
21
 
23
- .ds-pagination--md {
24
- --dsc-pagination-chevron-margin: var(--ds-spacing-2);
25
- }
22
+ .ds-pagination--md {
23
+ --dsc-pagination-chevron-margin: var(--ds-spacing-2);
24
+ }
26
25
 
27
- .ds-pagination--lg {
28
- --dsc-pagination-chevron-margin: var(--ds-spacing-2);
29
- }
26
+ .ds-pagination--lg {
27
+ --dsc-pagination-chevron-margin: var(--ds-spacing-2);
28
+ }
30
29
 
31
- .ds-pagination li:first-child {
32
- margin-right: var(--dsc-pagination-chevron-margin);
33
- }
30
+ .ds-pagination li:first-child {
31
+ margin-right: var(--dsc-pagination-chevron-margin);
32
+ }
34
33
 
35
- .ds-pagination li:last-child {
36
- margin-left: var(--dsc-pagination-chevron-margin);
37
- }
34
+ .ds-pagination li:last-child {
35
+ margin-left: var(--dsc-pagination-chevron-margin);
36
+ }
38
37
 
39
- .ds-pagination__item {
40
- flex: 1;
41
- margin-right: var(--dsc-pagination-listitem-margin);
42
- }
38
+ .ds-pagination__item {
39
+ flex: 1;
40
+ margin-right: var(--dsc-pagination-listitem-margin);
41
+ }
43
42
 
44
- .ds-pagination--sm .ds-pagination__item {
45
- --dsc-pagination-listitem-margin: var(--ds-spacing-2);
46
- --dsc-pagination-ellipsis-width: var(--ds-sizing-10);
47
- }
43
+ .ds-pagination--sm .ds-pagination__item {
44
+ --dsc-pagination-listitem-margin: var(--ds-spacing-2);
45
+ --dsc-pagination-ellipsis-width: var(--ds-sizing-10);
46
+ }
48
47
 
49
- .ds-pagination--md .ds-pagination__item {
50
- --dsc-pagination-listitem-margin: var(--ds-spacing-4);
51
- --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
52
- }
48
+ .ds-pagination--md .ds-pagination__item {
49
+ --dsc-pagination-listitem-margin: var(--ds-spacing-4);
50
+ --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
51
+ }
53
52
 
54
- .ds-pagination--lg .ds-pagination__item {
55
- --dsc-pagination-listitem-margin: var(--ds-spacing-6);
56
- --dsc-pagination-ellipsis-width: var(--ds-sizing-14);
57
- }
53
+ .ds-pagination--lg .ds-pagination__item {
54
+ --dsc-pagination-listitem-margin: var(--ds-spacing-6);
55
+ --dsc-pagination-ellipsis-width: var(--ds-sizing-14);
56
+ }
58
57
 
59
- .ds-pagination__item.ds-pagination--compact {
60
- --dsc-pagination-listitem-margin: var(--ds-spacing-0);
61
- --dsc-pagination-chevron-margin: var(--ds-spacing-1);
62
- }
58
+ .ds-pagination__item.ds-pagination--compact {
59
+ --dsc-pagination-listitem-margin: var(--ds-spacing-0);
60
+ --dsc-pagination-chevron-margin: var(--ds-spacing-1);
61
+ }
63
62
 
64
- .ds-pagination__ellipsis {
65
- margin-top: 0.5em;
66
- text-align: center;
67
- width: var(--dsc-pagination-ellipsis-width);
68
- }
63
+ .ds-pagination__ellipsis {
64
+ margin-top: 0.5em;
65
+ text-align: center;
66
+ width: var(--dsc-pagination-ellipsis-width);
69
67
  }
package/popover.css CHANGED
@@ -1,82 +1,84 @@
1
- @layer ds.popover {
2
- .ds-popover {
3
- --dsc-popover-border: 1px solid;
4
- --dsc-popover-background: var(--ds-color-neutral-background-default);
5
-
6
- z-index: 1500;
7
- background: var(--dsc-popover-background);
8
- padding: var(--ds-spacing-3);
9
- border: var(--dsc-popover-border);
10
- border-radius: min(1rem, var(--ds-border-radius-md));
11
- max-width: 300px;
12
- }
13
-
14
- .ds-popover--sm {
15
- padding: var(--ds-spacing-2) var(--ds-spacing-3);
16
- }
17
-
18
- .ds-popover--md {
19
- padding: var(--ds-spacing-3) var(--ds-spacing-4);
20
- }
21
-
22
- .ds-popover--lg {
23
- padding: var(--ds-spacing-3) var(--ds-spacing-5);
24
- }
25
-
26
- .ds-popover--default {
27
- --dsc-popover-background: var(--ds-color-neutral-background-default);
1
+ .ds-popover {
2
+ --dsc-popover-border: 1px solid;
3
+ --dsc-popover-background: var(--ds-color-neutral-background-default);
4
+ --dsc-popover-color: var(--ds-color-neutral-text-default);
5
+ --dsc-popover-border-color: var(--ds-color-neutral-border-default);
6
+ --dsc-popover-padding: var(--ds-spacing-3);
7
+ --dsc-popover-max-width: 300px;
8
+ --dsc-popover-border-radius: min(1rem, var(--ds-border-radius-md));
9
+
10
+ z-index: 1500;
11
+ background: var(--dsc-popover-background);
12
+ color: var(--dsc-popover-color);
13
+ padding: var(--dsc-popover-padding);
14
+ border: var(--dsc-popover-border);
15
+ border-radius: var(--dsc-popover-border-radius);
16
+ border-color: var(--dsc-popover-border-color);
17
+ max-width: var(--dsc-popover-max-width);
18
+ }
28
19
 
29
- border-color: var(--ds-color-neutral-border-default);
30
- }
20
+ .ds-popover--sm {
21
+ --dsc-popover-padding: var(--ds-spacing-2) var(--ds-spacing-3);
22
+ }
31
23
 
32
- .ds-popover--info {
33
- --dsc-popover-background: var(--ds-color-info-surface-default);
24
+ .ds-popover--md {
25
+ --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-4);
26
+ }
34
27
 
35
- border-color: var(--ds-color-info-border-default);
36
- color: var(--ds-color-info-text-default);
37
- }
28
+ .ds-popover--lg {
29
+ --dsc-popover-padding: var(--ds-spacing-3) var(--ds-spacing-5);
30
+ }
38
31
 
39
- .ds-popover--warning {
40
- --dsc-popover-background: var(--ds-color-warning-surface-default);
32
+ .ds-popover--default {
33
+ --dsc-popover-background: var(--ds-color-neutral-background-default);
34
+ --dsc-popover-border-color: var(--ds-color-neutral-border-default);
35
+ --dsc-popover-color: var(--ds-color-neutral-text-default);
36
+ }
41
37
 
42
- border-color: var(--ds-color-warning-border-default);
43
- color: var(--ds-color-warning-text-default);
44
- }
38
+ .ds-popover--info {
39
+ --dsc-popover-background: var(--ds-color-info-surface-default);
40
+ --dsc-popover-border-color: var(--ds-color-info-border-default);
41
+ --dsc-popover-color: var(--ds-color-info-text-default);
42
+ }
45
43
 
46
- .ds-popover--danger {
47
- --dsc-popover-background: var(--ds-color-danger-surface-default);
44
+ .ds-popover--warning {
45
+ --dsc-popover-background: var(--ds-color-warning-surface-default);
46
+ --dsc-popover-border-color: var(--ds-color-warning-border-default);
47
+ --dsc-popover-color: var(--ds-color-warning-text-default);
48
+ }
48
49
 
49
- border-color: var(--ds-color-danger-border-default);
50
- color: var(--ds-color-danger-text-default);
51
- }
50
+ .ds-popover--danger {
51
+ --dsc-popover-background: var(--ds-color-danger-surface-default);
52
+ --dsc-popover-border-color: var(--ds-color-danger-border-default);
53
+ --dsc-popover-color: var(--ds-color-danger-text-default);
54
+ }
52
55
 
53
- .ds-popover__arrow {
54
- position: absolute;
55
- background: var(--dsc-popover-background);
56
- transform: rotate(45deg);
57
- }
56
+ .ds-popover__arrow {
57
+ position: absolute;
58
+ background: var(--dsc-popover-background);
59
+ transform: rotate(45deg);
60
+ }
58
61
 
59
- .ds-popover__arrow.ds-popover__arrow--top {
60
- border-top: var(--dsc-popover-border);
61
- border-left: var(--dsc-popover-border);
62
- border-color: inherit;
63
- }
62
+ .ds-popover__arrow.ds-popover__arrow--top {
63
+ border-top: var(--dsc-popover-border);
64
+ border-left: var(--dsc-popover-border);
65
+ border-color: inherit;
66
+ }
64
67
 
65
- .ds-popover__arrow.ds-popover__arrow--bottom {
66
- border-bottom: var(--dsc-popover-border);
67
- border-right: var(--dsc-popover-border);
68
- border-color: inherit;
69
- }
68
+ .ds-popover__arrow.ds-popover__arrow--bottom {
69
+ border-bottom: var(--dsc-popover-border);
70
+ border-right: var(--dsc-popover-border);
71
+ border-color: inherit;
72
+ }
70
73
 
71
- .ds-popover__arrow.ds-popover__arrow--right {
72
- border-top: var(--dsc-popover-border);
73
- border-right: var(--dsc-popover-border);
74
- border-color: inherit;
75
- }
74
+ .ds-popover__arrow.ds-popover__arrow--right {
75
+ border-top: var(--dsc-popover-border);
76
+ border-right: var(--dsc-popover-border);
77
+ border-color: inherit;
78
+ }
76
79
 
77
- .ds-popover__arrow.ds-popover__arrow--left {
78
- border-bottom: var(--dsc-popover-border);
79
- border-left: var(--dsc-popover-border);
80
- border-color: inherit;
81
- }
80
+ .ds-popover__arrow.ds-popover__arrow--left {
81
+ border-bottom: var(--dsc-popover-border);
82
+ border-left: var(--dsc-popover-border);
83
+ border-color: inherit;
82
84
  }