@dnb/eufemia 10.0.0-beta.4 → 10.0.0-beta.6

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 (159) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/cjs/components/accordion/Accordion.d.ts +1 -1
  3. package/cjs/components/accordion/AccordionHeader.d.ts +1 -1
  4. package/cjs/components/autocomplete/Autocomplete.d.ts +9 -3
  5. package/cjs/components/button/Button.d.ts +1 -1
  6. package/cjs/components/button/style/dnb-button--tertiary.css +0 -10
  7. package/cjs/components/button/style/dnb-button--tertiary.min.css +1 -1
  8. package/cjs/components/button/style/dnb-button--tertiary.scss +1 -14
  9. package/cjs/components/button/style/themes/dnb-button-theme-eiendom.css +4 -10
  10. package/cjs/components/button/style/themes/dnb-button-theme-eiendom.min.css +1 -1
  11. package/cjs/components/button/style/themes/dnb-button-theme-sbanken.css +128 -298
  12. package/cjs/components/button/style/themes/dnb-button-theme-sbanken.min.css +1 -1
  13. package/cjs/components/button/style/themes/dnb-button-theme-sbanken.scss +187 -33
  14. package/cjs/components/button/style/themes/dnb-button-theme-ui.css +4 -10
  15. package/cjs/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  16. package/cjs/components/button/style/themes/dnb-button-theme-ui.scss +5 -0
  17. package/cjs/components/date-picker/DatePickerAddon.js +1 -2
  18. package/cjs/components/date-picker/style/dnb-date-picker.css +5 -1
  19. package/cjs/components/date-picker/style/dnb-date-picker.min.css +1 -1
  20. package/cjs/components/date-picker/style/dnb-date-picker.scss +5 -1
  21. package/cjs/components/dialog/parts/DialogAction.d.ts +2 -2
  22. package/cjs/components/dialog/parts/DialogHeader.d.ts +2 -1
  23. package/cjs/components/dropdown/Dropdown.d.ts +6 -2
  24. package/cjs/components/help-button/HelpButton.d.ts +1 -1
  25. package/cjs/components/input/Input.d.ts +1 -1
  26. package/cjs/components/input-masked/InputMasked.d.ts +1 -1
  27. package/cjs/components/modal/ModalContent.d.ts +1 -0
  28. package/cjs/components/modal/ModalContent.js +10 -2
  29. package/cjs/components/modal/parts/CloseButton.d.ts +1 -1
  30. package/cjs/components/modal/types.d.ts +3 -3
  31. package/cjs/components/number-format/NumberUtils.js +1 -1
  32. package/cjs/components/pagination/Pagination.d.ts +33 -33
  33. package/cjs/components/tooltip/TooltipPortal.js +20 -6
  34. package/cjs/elements/div/Div.d.ts +2 -0
  35. package/cjs/extensions/payment-card/utils/cardProducts.js +5 -5
  36. package/cjs/fragments/drawer-list/DrawerList.js +5 -1
  37. package/cjs/shared/Eufemia.js +1 -1
  38. package/cjs/shared/Theme.d.ts +9 -1
  39. package/cjs/shared/Theme.js +55 -29
  40. package/cjs/style/dnb-ui-components.css +5 -1
  41. package/cjs/style/dnb-ui-components.min.css +1 -1
  42. package/cjs/style/themes/theme-eiendom/eiendom-theme-components.css +13 -21
  43. package/cjs/style/themes/theme-eiendom/eiendom-theme-components.min.css +1 -1
  44. package/cjs/style/themes/theme-sbanken/sbanken-theme-basis.css +1 -1
  45. package/cjs/style/themes/theme-sbanken/sbanken-theme-basis.min.css +1 -1
  46. package/cjs/style/themes/theme-sbanken/sbanken-theme-components.css +133 -299
  47. package/cjs/style/themes/theme-sbanken/sbanken-theme-components.min.css +1 -1
  48. package/cjs/style/themes/theme-sbanken/theme-mapping.scss +1 -1
  49. package/cjs/style/themes/theme-ui/ui-theme-components.css +9 -11
  50. package/cjs/style/themes/theme-ui/ui-theme-components.min.css +1 -1
  51. package/components/accordion/Accordion.d.ts +1 -1
  52. package/components/accordion/AccordionHeader.d.ts +1 -1
  53. package/components/autocomplete/Autocomplete.d.ts +9 -3
  54. package/components/button/Button.d.ts +1 -1
  55. package/components/button/style/dnb-button--tertiary.css +0 -10
  56. package/components/button/style/dnb-button--tertiary.min.css +1 -1
  57. package/components/button/style/dnb-button--tertiary.scss +1 -14
  58. package/components/button/style/themes/dnb-button-theme-eiendom.css +4 -10
  59. package/components/button/style/themes/dnb-button-theme-eiendom.min.css +1 -1
  60. package/components/button/style/themes/dnb-button-theme-sbanken.css +128 -298
  61. package/components/button/style/themes/dnb-button-theme-sbanken.min.css +1 -1
  62. package/components/button/style/themes/dnb-button-theme-sbanken.scss +187 -33
  63. package/components/button/style/themes/dnb-button-theme-ui.css +4 -10
  64. package/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  65. package/components/button/style/themes/dnb-button-theme-ui.scss +5 -0
  66. package/components/date-picker/DatePickerAddon.js +1 -2
  67. package/components/date-picker/style/dnb-date-picker.css +5 -1
  68. package/components/date-picker/style/dnb-date-picker.min.css +1 -1
  69. package/components/date-picker/style/dnb-date-picker.scss +5 -1
  70. package/components/dialog/parts/DialogAction.d.ts +2 -2
  71. package/components/dialog/parts/DialogHeader.d.ts +2 -1
  72. package/components/dropdown/Dropdown.d.ts +6 -2
  73. package/components/help-button/HelpButton.d.ts +1 -1
  74. package/components/input/Input.d.ts +1 -1
  75. package/components/input-masked/InputMasked.d.ts +1 -1
  76. package/components/modal/ModalContent.d.ts +1 -0
  77. package/components/modal/ModalContent.js +8 -2
  78. package/components/modal/parts/CloseButton.d.ts +1 -1
  79. package/components/modal/types.d.ts +3 -3
  80. package/components/number-format/NumberUtils.js +2 -2
  81. package/components/pagination/Pagination.d.ts +33 -33
  82. package/components/tooltip/TooltipPortal.js +18 -6
  83. package/elements/div/Div.d.ts +2 -0
  84. package/es/components/accordion/Accordion.d.ts +1 -1
  85. package/es/components/accordion/AccordionHeader.d.ts +1 -1
  86. package/es/components/autocomplete/Autocomplete.d.ts +9 -3
  87. package/es/components/button/Button.d.ts +1 -1
  88. package/es/components/button/style/dnb-button--tertiary.css +0 -10
  89. package/es/components/button/style/dnb-button--tertiary.min.css +1 -1
  90. package/es/components/button/style/dnb-button--tertiary.scss +1 -14
  91. package/es/components/button/style/themes/dnb-button-theme-eiendom.css +4 -10
  92. package/es/components/button/style/themes/dnb-button-theme-eiendom.min.css +1 -1
  93. package/es/components/button/style/themes/dnb-button-theme-sbanken.css +128 -298
  94. package/es/components/button/style/themes/dnb-button-theme-sbanken.min.css +1 -1
  95. package/es/components/button/style/themes/dnb-button-theme-sbanken.scss +187 -33
  96. package/es/components/button/style/themes/dnb-button-theme-ui.css +4 -10
  97. package/es/components/button/style/themes/dnb-button-theme-ui.min.css +1 -1
  98. package/es/components/button/style/themes/dnb-button-theme-ui.scss +5 -0
  99. package/es/components/date-picker/DatePickerAddon.js +1 -2
  100. package/es/components/date-picker/style/dnb-date-picker.css +5 -1
  101. package/es/components/date-picker/style/dnb-date-picker.min.css +1 -1
  102. package/es/components/date-picker/style/dnb-date-picker.scss +5 -1
  103. package/es/components/dialog/parts/DialogAction.d.ts +2 -2
  104. package/es/components/dialog/parts/DialogHeader.d.ts +2 -1
  105. package/es/components/dropdown/Dropdown.d.ts +6 -2
  106. package/es/components/help-button/HelpButton.d.ts +1 -1
  107. package/es/components/input/Input.d.ts +1 -1
  108. package/es/components/input-masked/InputMasked.d.ts +1 -1
  109. package/es/components/modal/ModalContent.d.ts +1 -0
  110. package/es/components/modal/ModalContent.js +8 -2
  111. package/es/components/modal/parts/CloseButton.d.ts +1 -1
  112. package/es/components/modal/types.d.ts +3 -3
  113. package/es/components/number-format/NumberUtils.js +2 -2
  114. package/es/components/pagination/Pagination.d.ts +33 -33
  115. package/es/components/tooltip/TooltipPortal.js +17 -5
  116. package/es/elements/div/Div.d.ts +2 -0
  117. package/es/extensions/payment-card/utils/cardProducts.js +5 -5
  118. package/es/fragments/drawer-list/DrawerList.js +4 -1
  119. package/es/shared/Eufemia.js +1 -1
  120. package/es/shared/Theme.d.ts +9 -1
  121. package/es/shared/Theme.js +51 -29
  122. package/es/style/dnb-ui-components.css +5 -1
  123. package/es/style/dnb-ui-components.min.css +1 -1
  124. package/es/style/themes/theme-eiendom/eiendom-theme-components.css +13 -21
  125. package/es/style/themes/theme-eiendom/eiendom-theme-components.min.css +1 -1
  126. package/es/style/themes/theme-sbanken/sbanken-theme-basis.css +1 -1
  127. package/es/style/themes/theme-sbanken/sbanken-theme-basis.min.css +1 -1
  128. package/es/style/themes/theme-sbanken/sbanken-theme-components.css +133 -299
  129. package/es/style/themes/theme-sbanken/sbanken-theme-components.min.css +1 -1
  130. package/es/style/themes/theme-sbanken/theme-mapping.scss +1 -1
  131. package/es/style/themes/theme-ui/ui-theme-components.css +9 -11
  132. package/es/style/themes/theme-ui/ui-theme-components.min.css +1 -1
  133. package/esm/dnb-ui-basis.min.mjs +1 -1
  134. package/esm/dnb-ui-components.min.mjs +1 -1
  135. package/esm/dnb-ui-elements.min.mjs +1 -1
  136. package/esm/dnb-ui-extensions.min.mjs +1 -1
  137. package/esm/dnb-ui-lib.min.mjs +1 -1
  138. package/extensions/payment-card/utils/cardProducts.js +5 -5
  139. package/fragments/drawer-list/DrawerList.js +4 -1
  140. package/package.json +1 -1
  141. package/shared/Eufemia.js +1 -1
  142. package/shared/Theme.d.ts +9 -1
  143. package/shared/Theme.js +51 -29
  144. package/style/dnb-ui-components.css +5 -1
  145. package/style/dnb-ui-components.min.css +1 -1
  146. package/style/themes/theme-eiendom/eiendom-theme-components.css +13 -21
  147. package/style/themes/theme-eiendom/eiendom-theme-components.min.css +1 -1
  148. package/style/themes/theme-sbanken/sbanken-theme-basis.css +1 -1
  149. package/style/themes/theme-sbanken/sbanken-theme-basis.min.css +1 -1
  150. package/style/themes/theme-sbanken/sbanken-theme-components.css +133 -299
  151. package/style/themes/theme-sbanken/sbanken-theme-components.min.css +1 -1
  152. package/style/themes/theme-sbanken/theme-mapping.scss +1 -1
  153. package/style/themes/theme-ui/ui-theme-components.css +9 -11
  154. package/style/themes/theme-ui/ui-theme-components.min.css +1 -1
  155. package/umd/dnb-ui-basis.min.js +1 -1
  156. package/umd/dnb-ui-components.min.js +1 -1
  157. package/umd/dnb-ui-elements.min.js +1 -1
  158. package/umd/dnb-ui-extensions.min.js +1 -1
  159. package/umd/dnb-ui-lib.min.js +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,42 @@
3
3
  All notable changes to @dnb/eufemia will be documented in this file. See
4
4
  [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [10.0.0-beta.6](https://github.com/dnbexperience/eufemia/compare/v10.0.0-beta.5...v10.0.0-beta.6) (2023-05-10)
7
+
8
+
9
+ ### :memo: Documentation
10
+
11
+ * **Portal:** removes Modal's new status ([#2312](https://github.com/dnbexperience/eufemia/issues/2312)) ([38016b6](https://github.com/dnbexperience/eufemia/commit/38016b6b5fb9125e8f8358990849ee986642380f))
12
+ * **v10:** add docs for HelpButton's modal_props ([#2314](https://github.com/dnbexperience/eufemia/issues/2314)) ([66132f4](https://github.com/dnbexperience/eufemia/commit/66132f4a1207e860d7ebccd1c7d586d468ac777e))
13
+ * **v10:** add example for updating import of properties ([#2313](https://github.com/dnbexperience/eufemia/issues/2313)) ([c31c679](https://github.com/dnbexperience/eufemia/commit/c31c679b1c76cd98ed0cc94b6ee79b3ce7f70f6a))
14
+
15
+
16
+ ### :sparkles: Features
17
+
18
+ * release of v10.0.0-beta.6 ([61bd05c](https://github.com/dnbexperience/eufemia/commit/61bd05cb9bc43632197811e46dfd8e795ce23bc3))
19
+
20
+ ## [10.0.0-beta.5](https://github.com/dnbexperience/eufemia/compare/v10.0.0-beta.4...v10.0.0-beta.5) (2023-05-08)
21
+
22
+
23
+ ### :sparkles: Features
24
+
25
+ * **Autocomplete:** export AutocompleteData type ([#2299](https://github.com/dnbexperience/eufemia/issues/2299)) ([3d44140](https://github.com/dnbexperience/eufemia/commit/3d441405aba5b0132bc87296e263c4017397b191))
26
+ * **Autocomplete:** export AutocompleteOptionsRender type ([#2300](https://github.com/dnbexperience/eufemia/issues/2300)) ([e12241a](https://github.com/dnbexperience/eufemia/commit/e12241a53ec84b1b5b8e1c85bc8ea3770124551a))
27
+ * **Button:** sbanken styling ([#2273](https://github.com/dnbexperience/eufemia/issues/2273)) ([a7e6086](https://github.com/dnbexperience/eufemia/commit/a7e60867ce63e76a271a783e1a5ce4ca0a67067e))
28
+ * **Dialog:** adds ReactNode as type for texts ([#2294](https://github.com/dnbexperience/eufemia/issues/2294)) ([0e52411](https://github.com/dnbexperience/eufemia/commit/0e524110d4ce8cb1ba5ca0e4ae6cd2399d328b07))
29
+ * **Dropdown:** export DropdownData type ([#2298](https://github.com/dnbexperience/eufemia/issues/2298)) ([0950a33](https://github.com/dnbexperience/eufemia/commit/0950a33df797b2d4b3b5a4faa08d857b8894cb87))
30
+
31
+
32
+ ### :memo: Documentation
33
+
34
+ * **v10:** adds explicit examples for props that's changes type to boolean ([#2292](https://github.com/dnbexperience/eufemia/issues/2292)) ([7fac2d2](https://github.com/dnbexperience/eufemia/commit/7fac2d2118937fffd39fab27dfc5e6fb4044385b))
35
+ * **v10:** adds info about removal of closeButtonAttributes ([#2296](https://github.com/dnbexperience/eufemia/issues/2296)) ([9c59caf](https://github.com/dnbexperience/eufemia/commit/9c59caf4a7c6ff31f00cb5e0876bb7713d2fb0dd))
36
+ * **v10:** adds info about removal of closeButtonAttributes ([#2296](https://github.com/dnbexperience/eufemia/issues/2296)) ([6b2abd5](https://github.com/dnbexperience/eufemia/commit/6b2abd5fbfceda917dc8c9032e8ffb1bd5e70874))
37
+ * **v10:** adds info about replacing white with default ([#2295](https://github.com/dnbexperience/eufemia/issues/2295)) ([1ca276a](https://github.com/dnbexperience/eufemia/commit/1ca276a3784d76724644018c965864ae79bb71e6))
38
+ * **v10:** improve docs for EufemiaStyleImporter files ([#2302](https://github.com/dnbexperience/eufemia/issues/2302)) ([9babe64](https://github.com/dnbexperience/eufemia/commit/9babe64384af24bd2f91c246f321bab997d9da55))
39
+ * **v10:** minor spelling improvement ([#2301](https://github.com/dnbexperience/eufemia/issues/2301)) ([aa64437](https://github.com/dnbexperience/eufemia/commit/aa64437e4b903198d4ba67545f959cc0aacaf525))
40
+ * **v10:** prop change for FormStatus of status to state ([#2293](https://github.com/dnbexperience/eufemia/issues/2293)) ([5a7efa8](https://github.com/dnbexperience/eufemia/commit/5a7efa88693dfd898307becdc445f5649519ba0d))
41
+
6
42
  ## [10.0.0-beta.4](https://github.com/dnbexperience/eufemia/compare/v10.0.0-beta.3...v10.0.0-beta.4) (2023-05-06)
7
43
 
8
44
 
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import type { ButtonIconPosition } from '../button';
2
+ import type { ButtonIconPosition } from '../Button';
3
3
  import type { HeadingLevel } from '../Heading';
4
4
  import type { IconIcon, IconSize } from '../Icon';
5
5
  import type { SkeletonShow } from '../Skeleton';
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import type { ButtonIconPosition } from '../button';
2
+ import type { ButtonIconPosition } from '../Button';
3
3
  import type { HeadingLevel } from '../Heading';
4
4
  import type { IconSize } from '../Icon';
5
5
  import type { SkeletonShow } from '../Skeleton';
@@ -1,6 +1,10 @@
1
1
  import * as React from 'react';
2
- import type { DrawerListProps } from '../../fragments/DrawerList';
3
- import type { ButtonIconPosition } from '../button';
2
+ import type {
3
+ DrawerListProps,
4
+ DrawerListData,
5
+ DrawerListOptionsRender
6
+ } from '../../fragments/DrawerList';
7
+ import type { ButtonIconPosition } from '../Button';
4
8
  import type { FormLabelLabelDirection, FormLabelText } from '../FormLabel';
5
9
  import type {
6
10
  FormStatusProps,
@@ -10,6 +14,8 @@ import type {
10
14
  import type { IconIcon, IconSize } from '../Icon';
11
15
  import type { SkeletonShow } from '../Skeleton';
12
16
  import type { SpacingProps } from '../space/types';
17
+ export type AutocompleteData = DrawerListData;
18
+ export type AutocompleteOptionsRender = DrawerListOptionsRender;
13
19
  type AutocompleteMode = 'sync' | 'async';
14
20
  type AutocompleteTitle = string | React.ReactNode;
15
21
  type AutocompletePlaceholder = string | React.ReactNode;
@@ -23,7 +29,7 @@ type AutocompleteSubmitButtonIcon =
23
29
  | ((...args: any[]) => any);
24
30
  type AutocompleteInputRef =
25
31
  | ((...args: any[]) => any)
26
- | Record<string, unknown>;
32
+ | React.MutableRefObject<HTMLInputElement | undefined>;
27
33
  type AutocompleteInputIcon =
28
34
  | string
29
35
  | React.ReactNode
@@ -53,7 +53,7 @@ export type ButtonProps = {
53
53
  title?: React.ReactNode;
54
54
 
55
55
  /**
56
- * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary`.
56
+ * Defines the kind of button. Possible values are `primary`, `secondary`, `tertiary` and `signal`. Defaults to `primary` (or `secondary` if icon only).
57
57
  */
58
58
  variant?: ButtonVariant;
59
59
 
@@ -30,14 +30,6 @@
30
30
  .dnb-skeleton .dnb-button--tertiary .dnb-button__text::after {
31
31
  content: none;
32
32
  }
33
- .dnb-button--tertiary.dnb-button--has-text {
34
- padding-left: 0;
35
- padding-right: 0;
36
- }
37
- .dnb-button--tertiary.dnb-button--has-icon .dnb-button__text::after {
38
- left: -1rem;
39
- right: -1rem;
40
- }
41
33
  .dnb-button--tertiary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled] {
42
34
  cursor: not-allowed;
43
35
  }
@@ -137,7 +129,6 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
137
129
  }
138
130
  .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text::after {
139
131
  left: -0.5rem;
140
- right: 0;
141
132
  }
142
133
  .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon {
143
134
  margin-right: -0.5rem;
@@ -165,7 +156,6 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
165
156
  padding-right: 1rem;
166
157
  }
167
158
  .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text::after {
168
- left: 0;
169
159
  right: -0.5rem;
170
160
  }
171
161
  .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon {
@@ -1 +1 @@
1
- .dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary.dnb-button--has-text{padding-left:0;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon .dnb-button__text:after{left:-1rem;right:-1rem}.dnb-button--tertiary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{opacity:1;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{padding:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small);margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text:after{left:0;right:0}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text:after{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text:after{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:-1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text:after{left:0;right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:-1rem}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before{left:0;right:0}html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}
1
+ .dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{opacity:1;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{padding:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small);margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text:after{left:0;right:0}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text:after{left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text:after{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:-1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text:after{right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:-1rem}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before{left:0;right:0}html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}
@@ -17,17 +17,6 @@
17
17
  }
18
18
  }
19
19
 
20
- &.dnb-button--has-text {
21
- padding-left: 0;
22
- padding-right: 0;
23
- }
24
-
25
- // change underline if has icon
26
- &.dnb-button--has-icon .dnb-button__text::after {
27
- left: -1rem;
28
- right: -1rem;
29
- }
30
-
31
20
  @include focus() {
32
21
  @include removeFocusRing('keyboard');
33
22
  @include buttonFocusRing();
@@ -62,7 +51,7 @@
62
51
  }
63
52
 
64
53
  .dnb-button__icon {
65
- align-self: flex-start;
54
+ align-self: flex-start; // needed to vertically center icon
66
55
  margin-top: calc(var(--button-height) / 2 - 0.5rem);
67
56
  }
68
57
  &.dnb-button--size-large .dnb-button__icon {
@@ -121,7 +110,6 @@
121
110
  // underline
122
111
  &::after {
123
112
  left: -0.5rem;
124
- right: 0;
125
113
  }
126
114
  }
127
115
  .dnb-button__icon {
@@ -155,7 +143,6 @@
155
143
 
156
144
  // underline
157
145
  &::after {
158
- left: 0;
159
146
  right: -0.5rem;
160
147
  }
161
148
  }
@@ -45,14 +45,6 @@
45
45
  .dnb-skeleton .dnb-button--tertiary .dnb-button__text::after {
46
46
  content: none;
47
47
  }
48
- .dnb-button--tertiary.dnb-button--has-text {
49
- padding-left: 0;
50
- padding-right: 0;
51
- }
52
- .dnb-button--tertiary.dnb-button--has-icon .dnb-button__text::after {
53
- left: -1rem;
54
- right: -1rem;
55
- }
56
48
  .dnb-button--tertiary:focus[disabled], html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled] {
57
49
  cursor: not-allowed;
58
50
  }
@@ -152,7 +144,6 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
152
144
  }
153
145
  .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text::after {
154
146
  left: -0.5rem;
155
- right: 0;
156
147
  }
157
148
  .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon {
158
149
  margin-right: -0.5rem;
@@ -180,7 +171,6 @@ html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .
180
171
  padding-right: 1rem;
181
172
  }
182
173
  .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text::after {
183
- left: 0;
184
174
  right: -0.5rem;
185
175
  }
186
176
  .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon {
@@ -377,6 +367,10 @@ html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):
377
367
  color: var(--color-sea-green);
378
368
  background-color: transparent;
379
369
  }
370
+ .dnb-button--tertiary.dnb-button--has-text {
371
+ padding-left: 0;
372
+ padding-right: 0;
373
+ }
380
374
  html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled] {
381
375
  cursor: not-allowed;
382
376
  }
@@ -1 +1 @@
1
- .dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary.dnb-button--has-text{padding-left:0;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon .dnb-button__text:after{left:-1rem;right:-1rem}.dnb-button--tertiary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{opacity:1;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{padding:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text:after{left:0;right:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text:after{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text:after{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:-1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text:after{left:0;right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:-1rem}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before{left:0;right:0}html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button--primary{background-color:var(--color-sea-green);color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:var(--color-white);color:var(--color-sea-green)}.dnb-button--primary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:focus[disabled]{cursor:not-allowed}.dnb-button--primary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){background-color:var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-button--primary[disabled]{background-color:var(--color-sea-green-30);color:var(--color-white)}.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:var(--color-fire-red);color:var(--color-white)}.dnb-button--secondary{--border-color:var(--color-sea-green);background-color:var(--color-white);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:focus[disabled]{cursor:not-allowed}.dnb-button--secondary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){background-color:var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green-30)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon{color:inherit}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){background-color:var(--color-mint-green-50)}.dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button).dnb-button--size-large{line-height:calc(var(--button-height--large) - .5rem);width:calc(var(--button-width--large) - .5rem)}.dnb-button--active{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary{background-color:transparent;color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{color:var(--color-emerald-green)}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{color:var(--color-emerald-green)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small)}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary[disabled]{color:var(--color-sea-green-30)}.dnb-button--signal{background-color:var(--color-accent-yellow);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) .dnb-button--signal:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]){--border-color:var(--color-ocean-green);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active[disabled],html[data-whatintent=touch] .dnb-button--signal:active[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]),html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]){--border-color:var(--color-ocean-green);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:focus[disabled]{cursor:not-allowed}.dnb-button--signal:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal:active[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:active[disabled]{cursor:not-allowed}.dnb-button--signal:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal[disabled]{background-color:var(--color-accent-yellow-30);color:var(--color-black-20)}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]){background-color:transparent;box-shadow:none}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):after{background-color:currentcolor;bottom:0;content:"";left:0;position:absolute;top:0;width:.0625rem}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover{box-shadow:none;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus:after,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover:after{background-color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):not(:active):hover{border-radius:0}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active{box-shadow:none;color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active:after{background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{background-color:var(--color-black-3);color:var(--color-black-55)}.dnb-button--primary{background-color:var(--color-emerald-green)}html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-sea-green);--border-width:0.125rem;background-color:var(--color-sea-green);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-button--primary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled]{cursor:not-allowed}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-sea-green);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-button--primary[disabled]{--border-color:var(--color-black-55);--border-width:0.0625rem;background-color:var(--color-black-8);color:var(--color-black-55)}.dnb-button--primary[disabled],.dnb-button--secondary{border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--secondary{--border-color:var(--color-emerald-green);--border-width:0.0625rem;color:var(--color-emerald-green)}.dnb-button--secondary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled]{cursor:not-allowed}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-pistachio);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary[disabled]{--border-color:var(--color-black-55);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-black-55)}.dnb-button--secondary:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-pistachio);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--tertiary{color:var(--color-emerald-green)}.dnb-button--tertiary[disabled]{color:var(--color-black-55)}
1
+ .dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}.dnb-button--tertiary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]){box-shadow:none}.dnb-button--tertiary:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{border-radius:inherit;bottom:0;content:"";height:inherit;left:-.5rem;outline:none;position:absolute;right:-.5rem;top:0;z-index:1}html[data-whatinput=keyboard] .dnb-button--tertiary:focus:not([disabled]):before,html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) .dnb-button--tertiary:focus:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{opacity:1;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary .dnb-button__icon{align-self:flex-start;margin-top:calc(var(--button-height)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-large .dnb-button__icon{margin-top:calc(var(--button-height--large)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-medium .dnb-button__icon{margin-top:calc(var(--button-height--medium)/2 - .5rem)}.dnb-button--tertiary.dnb-button--size-small .dnb-button__icon{margin-top:calc(var(--button-height--small)/2 - .5rem)}.dnb-button--tertiary.dnb-button--icon-position-top{border-radius:.5rem;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{padding:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__icon{align-self:center;margin-top:.5rem}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text:after{left:0;right:0}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text{padding-left:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__text:after{left:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon{margin-left:0;margin-right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text{margin-left:1rem;padding-left:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left.dnb-button--icon-size-medium .dnb-button__text:after{left:-.5rem;right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left:focus:not([disabled]):before{right:-1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text{padding-right:1rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__text:after{right:-.5rem}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right .dnb-button__icon{margin-left:-.5rem;margin-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text{margin-right:1rem;padding-right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-large .dnb-button__text:after,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right.dnb-button--icon-size-medium .dnb-button__text:after{right:0}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right:focus:not([disabled]):before{left:-1rem}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before,html:not([data-whatintent=touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):focus:not([disabled]):before{left:0;right:0}html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button--primary{background-color:var(--color-sea-green);color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-emerald-green);background-color:var(--color-white);color:var(--color-sea-green)}.dnb-button--primary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:focus[disabled]{cursor:not-allowed}.dnb-button--primary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--primary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--primary:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){background-color:var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-button--primary[disabled]{background-color:var(--color-sea-green-30);color:var(--color-white)}.dnb-button:not([disabled]).dnb-button--primary.dnb-button__status--error{background-color:var(--color-fire-red);color:var(--color-white)}.dnb-button--secondary{--border-color:var(--color-sea-green);background-color:var(--color-white);box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:focus[disabled]{cursor:not-allowed}.dnb-button--secondary:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){background-color:var(--color-mint-green-50);color:var(--color-sea-green)}.dnb-button--secondary[disabled],.dnb-button--secondary[disabled]:focus{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green-30)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error{--border-color:var(--color-fire-red);--border-width:0.0625rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-fire-red)}.dnb-button:not([disabled]).dnb-button--secondary.dnb-button__status--error .dnb-button__icon{color:inherit}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary:not(.dnb-button--has-text):focus[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){background-color:var(--color-mint-green-50)}.dnb-button--secondary:not(.dnb-button--has-text):not(.dnb-button--input-button).dnb-button--size-large{line-height:calc(var(--button-height--large) - .5rem);width:calc(var(--button-width--large) - .5rem)}.dnb-button--active{--border-color:var(--color-emerald-green);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--tertiary{background-color:transparent;color:var(--color-sea-green)}.dnb-button--tertiary.dnb-button--has-text{padding-left:0;padding-right:0}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{color:var(--color-emerald-green)}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{color:var(--color-emerald-green)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small)}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary[disabled]{color:var(--color-sea-green-30)}.dnb-button--signal{background-color:var(--color-accent-yellow);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) .dnb-button--signal:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--signal:hover:not([disabled]){--border-color:var(--color-ocean-green);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active[disabled],html[data-whatintent=touch] .dnb-button--signal:active[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]),html[data-whatintent=touch] .dnb-button--signal:active:not([disabled]){--border-color:var(--color-ocean-green);--border-width:0.125rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal:focus[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:focus[disabled]{cursor:not-allowed}.dnb-button--signal:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-button--signal:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--signal:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal:active[disabled],html:not([data-whatintent=touch]) .dnb-button--signal:active[disabled]{cursor:not-allowed}.dnb-button--signal:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--signal:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-accent-yellow);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-ocean-green)}.dnb-button--signal[disabled]{background-color:var(--color-accent-yellow-30);color:var(--color-black-20)}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]){background-color:transparent;box-shadow:none}.dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):after{background-color:currentcolor;bottom:0;content:"";left:0;position:absolute;top:0;width:.0625rem}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover{box-shadow:none;color:var(--color-white)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):focus:after,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):hover:after{background-color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):not(:active):hover{border-radius:0}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active{box-shadow:none;color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active,html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text):not([disabled]):active:after{background-color:var(--color-mint-green-50)}html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondary:not(.dnb-button--has-text)[disabled]{background-color:var(--color-black-3);color:var(--color-black-55)}.dnb-button--primary{background-color:var(--color-emerald-green)}html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--color-sea-green);--border-width:0.125rem;background-color:var(--color-sea-green);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-button--primary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled]{cursor:not-allowed}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-sea-green);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white)}.dnb-button--primary[disabled]{--border-color:var(--color-black-55);--border-width:0.0625rem;background-color:var(--color-black-8);color:var(--color-black-55)}.dnb-button--primary[disabled],.dnb-button--secondary{border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-button--secondary{--border-color:var(--color-emerald-green);--border-width:0.0625rem;color:var(--color-emerald-green)}.dnb-button--secondary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled]{cursor:not-allowed}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-pistachio);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--secondary[disabled]{--border-color:var(--color-black-55);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-black-55)}.dnb-button--secondary:not(.dnb-button--has-text):active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active[disabled]{cursor:not-allowed}.dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text):active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-pistachio);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-emerald-green)}.dnb-button--tertiary{color:var(--color-emerald-green)}.dnb-button--tertiary[disabled]{color:var(--color-black-55)}