@dnb/eufemia 10.4.2 → 10.6.0

package/es/components/accordion/AccordionStore.d.ts

@@ -19,13 +19,14 @@ export type StoreDataReturn = {
 export type StoreOptions = {
     force?: boolean;
 };
+type StoreProps = {
+    id?: string;
+    group?: string;
+};
 export declare class Store {
-    id: string;
-    group: string;
-    constructor({ id, group }: {
-        id: any;
-        group: any;
-    });
+    id?: string;
+    group?: string;
+    constructor({ id, group }: StoreProps);
     storeId(id?: string): string;
     saveState(expanded: boolean, id?: string, opts?: StoreOptions): void;
     getData(id?: string): StoreDataReturn;

package/es/components/accordion/AccordionStore.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import { isTrue, warn } from '../../shared/component-helper';
+import { warn } from '../../shared/component-helper';
 export class AccordionStore {
   constructor(id) {
     _defineProperty(this, "_instances", void 0);
@@ -83,7 +83,7 @@ export class Store {
       if (typeof store.id !== 'undefined') {
         state = id === store.id;
       } else if (typeof store.expanded !== 'undefined') {
-        state = isTrue(store.expanded);
+        state = store.expanded;
       }
     }
     return state;

package/es/components/accordion/AccordionStore.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionStore.js","names":["isTrue","warn","AccordionStore","constructor","id","_defineProperty","_id","_instances","onChange","forEach","inst","close","addInstance","instance","push","removeInstance","filter","Store","group","storeId","saveState","expanded","opts","store","getData","force","window","localStorage","setItem","JSON","stringify","e","rememberWarning","Object","prototype","hasOwnProperty","call","parse","getItem","getState","state","flush","type"],"sources":["../../../../src/components/accordion/AccordionStore.ts"],"sourcesContent":["import { isTrue, warn } from '../../shared/component-helper'\n\ntype AccordionStoreInstance = {\n  _id: string\n  close: () => void\n}\nexport class AccordionStore {\n  _instances: Array<AccordionStoreInstance>\n  _id: string\n  constructor(id: string) {\n    this._id = id\n    this._instances = []\n  }\n  onChange({ id }: { id: string }) {\n    this._instances.forEach((inst) => {\n      if (inst._id !== id) {\n        inst.close()\n      }\n    })\n  }\n  addInstance(instance: AccordionStoreInstance) {\n    this._instances.push(instance)\n  }\n  removeInstance(instance) {\n    this._instances = this._instances.filter((inst) => inst !== instance)\n  }\n}\n\nexport type StoreDataReturn = {\n  id: string\n  expanded: boolean\n}\nexport type StoreOptions = {\n  force?: boolean\n}\n\nexport class Store {\n  id: string\n  group: string\n\n  constructor({ id, group }) {\n    this.id = id\n    this.group = group\n    return this\n  }\n\n  storeId(id = this.id) {\n    if (this.group) {\n      // Skip using the random ID\n      if (this.group[0] === '#') {\n        return null\n      }\n      id = this.group\n    }\n    return `dnb-accordion-${id}`\n  }\n\n  saveState(expanded: boolean, id = this.id, opts: StoreOptions = {}) {\n    if (id) {\n      try {\n        const store = this.getData() || ({} as StoreDataReturn)\n\n        if (this.group) {\n          if (expanded) {\n            store.id = id\n          } else if (opts && opts.force) {\n            store.id = null\n          }\n        } else {\n          store.expanded = expanded\n        }\n\n        const storeId = this.storeId(id)\n        if (storeId) {\n          window.localStorage.setItem(storeId, JSON.stringify(store))\n        }\n      } catch (e) {\n        //\n      }\n    } else {\n      rememberWarning()\n    }\n  }\n\n  getData(id = this.id): StoreDataReturn {\n    const storeId = this.storeId(id)\n\n    if (storeId) {\n      try {\n        if (\n          Object.prototype.hasOwnProperty.call(\n            window.localStorage,\n            storeId\n          )\n        ) {\n          return JSON.parse(window.localStorage.getItem(storeId))\n        }\n      } catch (e) {\n        //\n      }\n    }\n\n    return null\n  }\n\n  getState(id = this.id) {\n    let state = null\n\n    const store = this.getData(id)\n\n    if (store) {\n      if (typeof store.id !== 'undefined') {\n        state = id === store.id\n      } else if (typeof store.expanded !== 'undefined') {\n        state = isTrue(store.expanded)\n      }\n    }\n\n    return state\n  }\n\n  flush(id = this.id) {\n    if (id) {\n      try {\n        const storeId = this.storeId(id)\n        if (storeId) {\n          window.localStorage.setItem(storeId, null)\n        }\n      } catch (e) {\n        //\n      }\n    }\n  }\n}\n\nexport function rememberWarning(type = 'accordion') {\n  warn(`Missing \"id\" prop the ${type}! \"remember_state\" is enabled.`)\n}\n"],"mappings":"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"}
+{"version":3,"file":"AccordionStore.js","names":["warn","AccordionStore","constructor","id","_defineProperty","_id","_instances","onChange","forEach","inst","close","addInstance","instance","push","removeInstance","filter","Store","group","storeId","saveState","expanded","opts","store","getData","force","window","localStorage","setItem","JSON","stringify","e","rememberWarning","Object","prototype","hasOwnProperty","call","parse","getItem","getState","state","flush","type"],"sources":["../../../../src/components/accordion/AccordionStore.ts"],"sourcesContent":["import { warn } from '../../shared/component-helper'\n\ntype AccordionStoreInstance = {\n  _id: string\n  close: () => void\n}\nexport class AccordionStore {\n  _instances: Array<AccordionStoreInstance>\n  _id: string\n  constructor(id: string) {\n    this._id = id\n    this._instances = []\n  }\n  onChange({ id }: { id: string }) {\n    this._instances.forEach((inst) => {\n      if (inst._id !== id) {\n        inst.close()\n      }\n    })\n  }\n  addInstance(instance: AccordionStoreInstance) {\n    this._instances.push(instance)\n  }\n  removeInstance(instance) {\n    this._instances = this._instances.filter((inst) => inst !== instance)\n  }\n}\n\nexport type StoreDataReturn = {\n  id: string\n  expanded: boolean\n}\nexport type StoreOptions = {\n  force?: boolean\n}\n\ntype StoreProps = {\n  id?: string\n  group?: string\n}\n\nexport class Store {\n  id?: string\n  group?: string\n\n  constructor({ id, group }: StoreProps) {\n    this.id = id\n    this.group = group\n    return this\n  }\n\n  storeId(id = this.id) {\n    if (this.group) {\n      // Skip using the random ID\n      if (this.group[0] === '#') {\n        return null\n      }\n      id = this.group\n    }\n    return `dnb-accordion-${id}`\n  }\n\n  saveState(expanded: boolean, id = this.id, opts: StoreOptions = {}) {\n    if (id) {\n      try {\n        const store = this.getData() || ({} as StoreDataReturn)\n\n        if (this.group) {\n          if (expanded) {\n            store.id = id\n          } else if (opts && opts.force) {\n            store.id = null\n          }\n        } else {\n          store.expanded = expanded\n        }\n\n        const storeId = this.storeId(id)\n        if (storeId) {\n          window.localStorage.setItem(storeId, JSON.stringify(store))\n        }\n      } catch (e) {\n        //\n      }\n    } else {\n      rememberWarning()\n    }\n  }\n\n  getData(id = this.id): StoreDataReturn {\n    const storeId = this.storeId(id)\n\n    if (storeId) {\n      try {\n        if (\n          Object.prototype.hasOwnProperty.call(\n            window.localStorage,\n            storeId\n          )\n        ) {\n          return JSON.parse(window.localStorage.getItem(storeId))\n        }\n      } catch (e) {\n        //\n      }\n    }\n\n    return null\n  }\n\n  getState(id = this.id) {\n    let state = null\n\n    const store = this.getData(id)\n\n    if (store) {\n      if (typeof store.id !== 'undefined') {\n        state = id === store.id\n      } else if (typeof store.expanded !== 'undefined') {\n        state = store.expanded\n      }\n    }\n\n    return state\n  }\n\n  flush(id = this.id) {\n    if (id) {\n      try {\n        const storeId = this.storeId(id)\n        if (storeId) {\n          window.localStorage.setItem(storeId, null)\n        }\n      } catch (e) {\n        //\n      }\n    }\n  }\n}\n\nexport function rememberWarning(type = 'accordion') {\n  warn(`Missing \"id\" prop the ${type}! \"remember_state\" is enabled.`)\n}\n"],"mappings":"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"}

package/es/components/accordion/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import { AccordionProps, GroupProps } from './Accordion';
+export declare const accordionDefaultProps: AccordionProps & GroupProps;

package/es/components/accordion/defaultProps.js

@@ -0,0 +1,5 @@
+export const accordionDefaultProps = {
+  variant: 'outlined',
+  icon_size: 'medium'
+};
+//# sourceMappingURL=defaultProps.js.map

package/es/components/accordion/defaultProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultProps.js","names":["accordionDefaultProps","variant","icon_size"],"sources":["../../../../src/components/accordion/defaultProps.ts"],"sourcesContent":["import { AccordionProps, GroupProps } from './Accordion'\n\nexport const accordionDefaultProps: AccordionProps & GroupProps = {\n  variant: 'outlined',\n  icon_size: 'medium',\n} as const\n"],"mappings":"AAEA,OAAO,MAAMA,qBAAkD,GAAG;EAChEC,OAAO,EAAE,UAAU;EACnBC,SAAS,EAAE;AACb,CAAU"}

package/es/components/anchor/style/anchor-mixins.scss

@@ -52,7 +52,7 @@
   &,
   &:hover,
   &:active,
-  &:focus {
+  &:focus-visible {
     border-radius: 0;
   }
 }
@@ -91,48 +91,47 @@
   }
 }
 
-@mixin anchorFocusStyle($whatinput: null) {
-  &:not(:active) {
-    background-color: transparent;
+@mixin anchorFocusStyle() {
+  background-color: transparent;
 
-    @include resetAnimationStyle();
-    @include resetUnderlineStyle();
-  }
+  @include resetAnimationStyle();
+  @include resetUnderlineStyle();
+
+  @include focusRing('always');
 
-  @if $whatinput {
-    @include focusRing($whatinput);
-  } @else {
-    @include focusRing();
-  }
   border-radius: 0.25em;
+  @content;
 }
 
-@mixin anchorBackground($color) {
-  box-shadow: inset 100vw 100vw 0 0 $color, -0.125em 0 0 0 $color,
-    0.125em 0 0 0 $color;
+@mixin anchorBackground($color, $overflow: 0.125em) {
+  @if $overflow {
+    box-shadow: inset 100vw 100vw 0 0 $color, -$overflow 0 0 0 $color,
+      $overflow 0 0 0 $color;
+  } @else {
+    box-shadow: inset 100vw 100vw 0 0 $color;
+  }
 }
 
 // other styles
 @mixin useAnchorContrastStyle($contrastColor: var(--color-emerald-green)) {
   color: var(--color-white);
 
-  &:hover,
-  &:active {
+  &:hover {
     color: $contrastColor;
-    background-color: var(--color-white);
-    text-decoration: none;
+    @include anchorBackground(var(--color-white));
   }
 
   &:active {
-    color: $contrastColor;
-    background-color: var(--color-white);
+    color: var(--color-white);
+    background-color: transparent;
+    @include anchorBackground(transparent);
   }
 
-  &:not(:disabled):focus {
+  &:focus-visible {
     color: var(--color-white);
     background-color: transparent;
 
-    @include focusRing(null, var(--color-white));
+    @include focusRing('always', var(--color-white));
   }
 }
 
@@ -181,12 +180,11 @@
   @include anchorDefaultStyle();
 
   // have focus before :active, because of border-radius
-  &:focus {
+  &:focus-visible {
     @include anchorFocusStyle();
   }
 
-  &:hover,
-  &:active {
+  &:hover {
     @include anchorHoverStyle();
   }
 
@@ -202,7 +200,8 @@
     }
   }
 
-  transition: box-shadow 200ms ease-in-out, border-radius 200ms ease-in-out;
+  transition: box-shadow 200ms ease-in-out, border-radius 200ms ease-in-out,
+    background 200ms ease-in-out;
 
   [data-visual-test-wrapper] & {
     transition: none;

package/es/components/anchor/style/dnb-anchor.css

@@ -29,7 +29,7 @@ button.dnb-anchor {
   text-decoration-thickness: var(--anchor-underline-thickness);
   text-underline-offset: 0.25em;
   border-radius: 0;
-  transition: box-shadow 200ms ease-in-out, border-radius 200ms ease-in-out;
+  transition: box-shadow 200ms ease-in-out, border-radius 200ms ease-in-out, background 200ms ease-in-out;
 }
 sup .dnb-anchor, sub .dnb-anchor {
   padding: 0 0.025em;
@@ -37,27 +37,36 @@ sup .dnb-anchor, sub .dnb-anchor {
 .dnb-p .dnb-anchor, .dnb-lead .dnb-anchor, .dnb-h--xx-large .dnb-anchor, .dnb-h--x-large .dnb-anchor, .dnb-h--large .dnb-anchor, .dnb-h--medium .dnb-anchor, .dnb-h--basis .dnb-anchor, .dnb-h--small .dnb-anchor, .dnb-h--x-small .dnb-anchor {
   font-size: inherit;
 }
-.dnb-anchor:focus {
+.dnb-anchor.focus-visible {
+  background-color: transparent;
+  transition: none;
   outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
   border-radius: 0.25em;
 }
-.dnb-anchor:focus:not(:active) {
+.dnb-anchor:focus-visible {
   background-color: transparent;
   transition: none;
-}
-.dnb-anchor:focus:not(:active), .dnb-section .dnb-anchor:focus:not(:active).dnb-anchor {
-  text-decoration: none;
-}
-html[data-whatinput=keyboard] .dnb-anchor:focus {
+  outline: none;
   --border-color: var(--focus-ring-color);
   --border-width: var(--focus-ring-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  border-radius: 0.25em;
 }
-.dnb-anchor:hover, .dnb-anchor:active {
+.dnb-anchor.focus-visible, .dnb-section .dnb-anchor.focus-visible.dnb-anchor {
+  text-decoration: none;
+}
+.dnb-anchor:focus-visible, .dnb-section .dnb-anchor:focus-visible.dnb-anchor {
+  text-decoration: none;
+}
+.dnb-anchor:hover {
   border-radius: 0.25em;
 }
-.dnb-anchor:hover, .dnb-section .dnb-anchor:hover.dnb-anchor, .dnb-anchor:active, .dnb-section .dnb-anchor:active.dnb-anchor {
+.dnb-anchor:hover, .dnb-section .dnb-anchor:hover.dnb-anchor {
   text-decoration: none;
 }
 .dnb-anchor:active {
@@ -114,6 +123,8 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
 }
 
 .dnb-anchor--focus {
+  background-color: transparent;
+  transition: none;
   outline: none;
   --border-color: var(--focus-ring-color);
   --border-width: var(--focus-ring-width);
@@ -121,11 +132,7 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
   border-color: transparent;
   border-radius: 0.25em;
 }
-.dnb-anchor--focus:not(:active) {
-  background-color: transparent;
-  transition: none;
-}
-.dnb-anchor--focus:not(:active), .dnb-section .dnb-anchor--focus:not(:active).dnb-anchor {
+.dnb-anchor--focus, .dnb-section .dnb-anchor--focus.dnb-anchor {
   text-decoration: none;
 }
 
@@ -150,7 +157,11 @@ html[data-whatinput=keyboard] .dnb-anchor:focus {
   background-color: transparent;
 }
 
-.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus {
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius.focus-visible {
+  border-radius: 0;
+}
+
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus-visible {
   border-radius: 0;
 }
 

package/es/components/anchor/style/dnb-anchor.min.css

@@ -1 +1 @@
-button.dnb-anchor{-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer;line-height:calc(var(--line-height-basis) + .125rem)}.dnb-anchor{--anchor-underline-thickness:0.0938rem;border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;text-decoration:underline;-webkit-text-decoration-color:currentcolor;text-decoration-color:currentcolor;text-decoration-thickness:var(--anchor-underline-thickness);text-underline-offset:.25em;transition:box-shadow .2s ease-in-out,border-radius .2s ease-in-out}sub .dnb-anchor,sup .dnb-anchor{padding:0 .025em}.dnb-h--basis .dnb-anchor,.dnb-h--large .dnb-anchor,.dnb-h--medium .dnb-anchor,.dnb-h--small .dnb-anchor,.dnb-h--x-large .dnb-anchor,.dnb-h--x-small .dnb-anchor,.dnb-h--xx-large .dnb-anchor,.dnb-lead .dnb-anchor,.dnb-p .dnb-anchor{font-size:inherit}.dnb-anchor:focus{border-radius:.25em;outline:none}.dnb-anchor:focus:not(:active){background-color:transparent;transition:none}.dnb-anchor:focus:not(:active),.dnb-section .dnb-anchor:focus:not(:active).dnb-anchor{text-decoration:none}html[data-whatinput=keyboard] .dnb-anchor:focus{--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-anchor:active,.dnb-anchor:hover{border-radius:.25em}.dnb-anchor:active,.dnb-anchor:hover,.dnb-section .dnb-anchor:active.dnb-anchor,.dnb-section .dnb-anchor:hover.dnb-anchor{text-decoration:none}.dnb-anchor:active{border-radius:.25em}.dnb-anchor:active,.dnb-section .dnb-anchor:active.dnb-anchor{text-decoration:none}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon){background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDBhLjc1Ljc1IDAgMCAwIDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwIDAgMTUgMHYuNzV6bS0uNzUgNGEuNzUuNzUgMCAwIDAgMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMCAwLTEuNSAwaDEuNXptLS43NSA2LjVWMTZjLjQxIDAgLjc1LS4zNC43NS0uNzVIMTV6bS0xNCAwSC4yNWMwIC40MS4zNC43NS43NS43NXYtLjc1ek0xIC43NVYwYS43NS43NSAwIDAgMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwIDAgMC0xLjV2MS41em0yLjcyIDMuNzJhLjc1Ljc1IDAgMCAwIDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4IDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiIGZpbGw9IiMwMDcyNzIiLz48L3N2Zz4=");background-size:0;position:relative}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{background-image:inherit;background-size:cover;color:inherit;content:"";display:inline-block;height:.889em;margin-left:.3em;margin-right:.125em;position:relative;transform-origin:bottom;transition:transform .3s ease-out,filter 1s ease-in-out;width:.889em}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):active{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDBhLjc1Ljc1IDAgMCAwIDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwIDAgMTUgMHYuNzV6bS0uNzUgNGEuNzUuNzUgMCAwIDAgMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMCAwLTEuNSAwaDEuNXptLS43NSA2LjVWMTZjLjQxIDAgLjc1LS4zNC43NS0uNzVIMTV6bS0xNCAwSC4yNWMwIC40MS4zNC43NS43NS43NXYtLjc1ek0xIC43NVYwYS43NS43NSAwIDAgMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwIDAgMC0xLjV2MS41em0yLjcyIDMuNzJhLjc1Ljc1IDAgMCAwIDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4IDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiIGZpbGw9IiNhNWUxZDIiLz48L3N2Zz4=")}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{top:.125em}[data-visual-test-wrapper] .dnb-anchor{transition:none}.dnb-anchor .dnb-icon{display:inline-block;transform:translateY(-.0625em)}.dnb-anchor--hover{border-radius:.25em}.dnb-anchor--hover,.dnb-section .dnb-anchor--hover.dnb-anchor{text-decoration:none}.dnb-anchor--active{border-radius:.25em}.dnb-anchor--active,.dnb-section .dnb-anchor--active.dnb-anchor{text-decoration:none}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none}.dnb-anchor--focus:not(:active){background-color:transparent;transition:none}.dnb-anchor--focus:not(:active),.dnb-section .dnb-anchor--focus:not(:active).dnb-anchor{text-decoration:none}.dnb-anchor--no-style{color:inherit;transition:none}.dnb-anchor--no-style,.dnb-section .dnb-anchor--no-style.dnb-anchor{text-decoration:none}.dnb-anchor--no-style:hover{background-color:transparent;color:inherit}.dnb-anchor--no-underline,.dnb-section .dnb-anchor--no-underline.dnb-anchor{text-decoration:none}.dnb-anchor--no-hover:hover{background-color:transparent;color:inherit}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-animation,a.dnb-button{transition:none}.dnb-anchor.dnb-skeleton,.dnb-skeleton>.dnb-anchor{text-decoration:none}.dnb-anchor.dnb-skeleton:after,.dnb-skeleton>.dnb-anchor:after{filter:grayscale(100%) opacity(.3)}
+button.dnb-anchor{-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer;line-height:calc(var(--line-height-basis) + .125rem)}.dnb-anchor{--anchor-underline-thickness:0.0938rem;border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;text-decoration:underline;-webkit-text-decoration-color:currentcolor;text-decoration-color:currentcolor;text-decoration-thickness:var(--anchor-underline-thickness);text-underline-offset:.25em;transition:box-shadow .2s ease-in-out,border-radius .2s ease-in-out,background .2s ease-in-out}sub .dnb-anchor,sup .dnb-anchor{padding:0 .025em}.dnb-h--basis .dnb-anchor,.dnb-h--large .dnb-anchor,.dnb-h--medium .dnb-anchor,.dnb-h--small .dnb-anchor,.dnb-h--x-large .dnb-anchor,.dnb-h--x-small .dnb-anchor,.dnb-h--xx-large .dnb-anchor,.dnb-lead .dnb-anchor,.dnb-p .dnb-anchor{font-size:inherit}.dnb-anchor.focus-visible{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-anchor:focus-visible{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-anchor.focus-visible,.dnb-section .dnb-anchor.focus-visible.dnb-anchor{text-decoration:none}.dnb-anchor:focus-visible,.dnb-section .dnb-anchor:focus-visible.dnb-anchor{text-decoration:none}.dnb-anchor:hover{border-radius:.25em}.dnb-anchor:hover,.dnb-section .dnb-anchor:hover.dnb-anchor{text-decoration:none}.dnb-anchor:active{border-radius:.25em}.dnb-anchor:active,.dnb-section .dnb-anchor:active.dnb-anchor{text-decoration:none}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon){background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDBhLjc1Ljc1IDAgMCAwIDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwIDAgMTUgMHYuNzV6bS0uNzUgNGEuNzUuNzUgMCAwIDAgMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMCAwLTEuNSAwaDEuNXptLS43NSA2LjVWMTZjLjQxIDAgLjc1LS4zNC43NS0uNzVIMTV6bS0xNCAwSC4yNWMwIC40MS4zNC43NS43NS43NXYtLjc1ek0xIC43NVYwYS43NS43NSAwIDAgMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwIDAgMC0xLjV2MS41em0yLjcyIDMuNzJhLjc1Ljc1IDAgMCAwIDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4IDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiIGZpbGw9IiMwMDcyNzIiLz48L3N2Zz4=");background-size:0;position:relative}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{background-image:inherit;background-size:cover;color:inherit;content:"";display:inline-block;height:.889em;margin-left:.3em;margin-right:.125em;position:relative;transform-origin:bottom;transition:transform .3s ease-out,filter 1s ease-in-out;width:.889em}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):active{background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTExIDBhLjc1Ljc1IDAgMCAwIDAgMS41VjB6bTQgLjc1aC43NUEuNzUuNzUgMCAwIDAgMTUgMHYuNzV6bS0uNzUgNGEuNzUuNzUgMCAwIDAgMS41IDBoLTEuNXptMS41IDRhLjc1Ljc1IDAgMCAwLTEuNSAwaDEuNXptLS43NSA2LjVWMTZjLjQxIDAgLjc1LS4zNC43NS0uNzVIMTV6bS0xNCAwSC4yNWMwIC40MS4zNC43NS43NS43NXYtLjc1ek0xIC43NVYwYS43NS43NSAwIDAgMC0uNzUuNzVIMXptNS43NS43NWEuNzUuNzUgMCAwIDAgMC0xLjV2MS41em0yLjcyIDMuNzJhLjc1Ljc1IDAgMCAwIDEuMDYgMS4wNkw5LjQ3IDUuMjJ6TTE0LjI1Ljc1djRoMS41di00aC0xLjV6bTAgOHY2LjVoMS41di02LjVoLTEuNXpNMTUgMTQuNUgxVjE2aDE0di0xLjV6bS0xMy4yNS43NVYuNzVILjI1djE0LjVoMS41ek0xIDEuNWg1Ljc1VjBIMXYxLjV6bTEwIDBoNFYwaC00djEuNXptLS40NyA0Ljc4IDUtNUwxNC40Ny4yMmwtNSA1IDEuMDYgMS4wNnoiIGZpbGw9IiNhNWUxZDIiLz48L3N2Zz4=")}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{top:.125em}[data-visual-test-wrapper] .dnb-anchor{transition:none}.dnb-anchor .dnb-icon{display:inline-block;transform:translateY(-.0625em)}.dnb-anchor--hover{border-radius:.25em}.dnb-anchor--hover,.dnb-section .dnb-anchor--hover.dnb-anchor{text-decoration:none}.dnb-anchor--active{border-radius:.25em}.dnb-anchor--active,.dnb-section .dnb-anchor--active.dnb-anchor{text-decoration:none}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);outline:none;transition:none}.dnb-anchor--focus,.dnb-section .dnb-anchor--focus.dnb-anchor{text-decoration:none}.dnb-anchor--no-style{color:inherit;transition:none}.dnb-anchor--no-style,.dnb-section .dnb-anchor--no-style.dnb-anchor{text-decoration:none}.dnb-anchor--no-style:hover{background-color:transparent;color:inherit}.dnb-anchor--no-underline,.dnb-section .dnb-anchor--no-underline.dnb-anchor{text-decoration:none}.dnb-anchor--no-hover:hover{background-color:transparent;color:inherit}.dnb-anchor--no-radius,.dnb-anchor--no-radius.focus-visible,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus-visible,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-animation,a.dnb-button{transition:none}.dnb-anchor.dnb-skeleton,.dnb-skeleton>.dnb-anchor{text-decoration:none}.dnb-anchor.dnb-skeleton:after,.dnb-skeleton>.dnb-anchor:after{filter:grayscale(100%) opacity(.3)}

package/es/components/anchor/style/dnb-anchor.scss

@@ -30,7 +30,7 @@ button.dnb-anchor {
 }
 
 .dnb-anchor--focus {
-  @include anchorFocusStyle('always');
+  @include anchorFocusStyle();
 }
 
 // no use case for that yet

package/es/components/anchor/style/themes/dnb-anchor-theme-sbanken.css

@@ -1,7 +1,4 @@
 @charset "UTF-8";
-/*
- * Utilities
- */
 /*
  * Anchor mixins
  *
@@ -11,94 +8,134 @@
  */
 .dnb-anchor {
   --anchor-underline-thickness: 0.125rem;
+  --anchor-background: transparent;
   font-weight: var(--sb-font-weight-bold);
   color: var(--sb-color-gray-dark-3);
   -webkit-text-decoration-color: var(--sb-color-green-dark);
           text-decoration-color: var(--sb-color-green-dark);
-  padding: calc((var(--line-height-basis) - 1.2em) / 2) 0.25em;
+  padding: 0.15625em 0;
+  border-radius: 0.5em;
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background);
+}
+.dnb-anchor--no-underline, .dnb-anchor--has-icon, .dnb-anchor--inline {
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background), -0.25em 0 0 0 var(--anchor-background), 0.25em 0 0 0 var(--anchor-background);
 }
 .dnb-anchor:hover {
+  --anchor-background: var(--sb-color-green-dark);
   color: var(--sb-color-text);
-  background-color: var(--sb-color-green-dark);
   transition: none;
-  border-radius: 0.5rem;
+  border-radius: 0.5em;
 }
 .dnb-anchor:active {
+  --anchor-background: var(--sb-color-green);
   color: var(--sb-color-text);
-  background-color: var(--sb-color-green);
-  border-radius: 0.5rem;
+  transition: none;
+  border-radius: 0.5em;
 }
-.dnb-anchor:focus {
+.dnb-anchor.focus-visible {
   color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
-  border-radius: 0.25rem;
+  border-radius: 0.25em;
 }
-.dnb-anchor:focus:not(:active) {
+.dnb-anchor:focus-visible {
+  color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
+  border-radius: 0.25em;
 }
-.dnb-anchor:focus.dnb-anchor--icon-left {
+.dnb-anchor.focus-visible.dnb-anchor--icon-left {
   margin-left: 0;
 }
-.dnb-anchor:focus.dnb-anchor--icon-left .dnb-icon {
+.dnb-anchor:focus-visible.dnb-anchor--icon-left {
   margin-left: 0;
 }
-.dnb-anchor:focus.dnb-anchor--icon-right {
+.dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon {
+  margin-left: 0;
+}
+.dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon {
+  margin-left: 0;
+}
+.dnb-anchor.focus-visible.dnb-anchor--icon-right {
+  margin-right: 0;
+}
+.dnb-anchor:focus-visible.dnb-anchor--icon-right {
   margin-right: 0;
 }
-.dnb-anchor:focus.dnb-anchor--icon-right .dnb-icon {
+.dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon {
   margin-right: 0;
 }
-.dnb-anchor.dnb-anchor--icon-left {
-  padding-left: 0;
+.dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon {
+  margin-right: 0;
+}
+.dnb-anchor--icon-left {
   margin-left: 1.125em;
 }
-.dnb-anchor.dnb-anchor--icon-left .dnb-icon {
+.dnb-anchor--icon-left .dnb-icon {
   font-size: 1em;
   margin-right: 0.125em;
   margin-left: -1.125em;
 }
-.dnb-anchor.dnb-anchor--icon-right {
-  padding-right: 0;
+.dnb-anchor--icon-right {
   margin-right: 1.125em;
 }
-.dnb-anchor.dnb-anchor--icon-right .dnb-icon {
+.dnb-anchor--icon-right .dnb-icon {
   font-size: 1em;
   margin-left: 0.125em;
   margin-right: -1.125em;
 }
-.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left) {
-  padding-left: 0;
+.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon) {
+  padding-right: 0.25em;
 }
-.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left)::before {
-  content: " ";
+.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon)::after {
+  position: initial;
+  display: inline-block;
+  width: 1.275em;
+  height: 0.9em;
+  line-height: 0.9em;
+  margin-left: 0;
+  margin-right: 0;
+  background-position: right;
+  background-size: contain;
 }
-.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank]) {
-  padding-right: 0;
+.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--no-style):not(.dnb-anchor--icon-left)::before {
+  -webkit-text-decoration-color: var(--sb-color-green-dark);
+          text-decoration-color: var(--sb-color-green-dark);
+  content: " ";
 }
-.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank])::after {
+.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--no-style):not(.dnb-anchor--icon-right)::after {
+  -webkit-text-decoration-color: var(--sb-color-green-dark);
+          text-decoration-color: var(--sb-color-green-dark);
   content: " ";
 }
 
 .dnb-anchor--hover {
+  --anchor-background: var(--sb-color-green-dark);
   color: var(--sb-color-text);
-  background-color: var(--sb-color-green-dark);
   transition: none;
-  border-radius: 0.5rem;
+  border-radius: 0.5em;
 }
 
 .dnb-anchor--active {
+  --anchor-background: var(--sb-color-green);
   color: var(--sb-color-text);
-  background-color: var(--sb-color-green);
-  border-radius: 0.5rem;
+  transition: none;
+  border-radius: 0.5em;
 }
 
 .dnb-anchor--focus {
+  background-color: transparent;
+  transition: none;
+  outline: none;
+  --border-color: var(--focus-ring-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+  border-radius: 0.25em;
   color: var(--sb-color-blue-dark);
   background-color: var(--sb-color-blue-light-3);
-  border-radius: 0.25rem;
+  border-radius: 0.25em;
 }
-.dnb-anchor--focus:not(:active) {
-  background-color: var(--sb-color-blue-light-3);
+.dnb-anchor--focus, .dnb-section .dnb-anchor--focus.dnb-anchor {
+  text-decoration: none;
 }
 .dnb-anchor--focus.dnb-anchor--icon-left {
   margin-left: 0;
@@ -113,28 +150,44 @@
   margin-right: 0;
 }
 
-.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus {
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius.focus-visible {
+  border-radius: 0;
+}
+
+.dnb-anchor--no-radius, .dnb-anchor--no-radius:hover, .dnb-anchor--no-radius:active, .dnb-anchor--no-radius:focus-visible {
   border-radius: 0;
 }
 
+.dnb-anchor--inline {
+  -webkit-text-decoration-color: currentcolor;
+          text-decoration-color: currentcolor;
+}
+
 .dnb-anchor--contrast {
   color: var(--color-white);
 }
-.dnb-anchor--contrast:hover, .dnb-anchor--contrast:active {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
-  text-decoration: none;
+.dnb-anchor--contrast:hover {
+  color: var(--sb-color-text);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-white), -0.125em 0 0 0 var(--color-white), 0.125em 0 0 0 var(--color-white);
 }
 .dnb-anchor--contrast:active {
-  color: var(--color-emerald-green);
-  background-color: var(--color-white);
+  color: var(--color-white);
+  background-color: transparent;
+  box-shadow: inset 100vw 100vw 0 0 transparent, -0.125em 0 0 0 transparent, 0.125em 0 0 0 transparent;
 }
-.dnb-anchor--contrast:not(:disabled):focus {
+.dnb-anchor--contrast.focus-visible {
   color: var(--color-white);
   background-color: transparent;
   outline: none;
+  --border-color: var(--color-white);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
-html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus {
+.dnb-anchor--contrast:focus-visible {
+  color: var(--color-white);
+  background-color: transparent;
+  outline: none;
   --border-color: var(--color-white);
   --border-width: var(--focus-ring-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);

package/es/components/anchor/style/themes/dnb-anchor-theme-sbanken.min.css

@@ -1 +1 @@
-@charset "UTF-8";.dnb-anchor{--anchor-underline-thickness:0.125rem;color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);padding:calc((var(--line-height-basis) - 1.2em)/2) .25em;-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}.dnb-anchor:hover{background-color:var(--sb-color-green-dark);transition:none}.dnb-anchor:active,.dnb-anchor:hover{border-radius:.5rem;color:var(--sb-color-text)}.dnb-anchor:active{background-color:var(--sb-color-green)}.dnb-anchor:focus{border-radius:.25rem;color:var(--sb-color-blue-dark)}.dnb-anchor:focus,.dnb-anchor:focus:not(:active){background-color:var(--sb-color-blue-light-3)}.dnb-anchor:focus.dnb-anchor--icon-left,.dnb-anchor:focus.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor:focus.dnb-anchor--icon-right,.dnb-anchor:focus.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor.dnb-anchor--icon-left{margin-left:1.125em;padding-left:0}.dnb-anchor.dnb-anchor--icon-left .dnb-icon{font-size:1em;margin-left:-1.125em;margin-right:.125em}.dnb-anchor.dnb-anchor--icon-right{margin-right:1.125em;padding-right:0}.dnb-anchor.dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left){padding-left:0}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-left):before{content:" "}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank]){padding-right:0}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--icon-right):not(.dnb-anchor[target=_blank]):after{content:" "}.dnb-anchor--hover{background-color:var(--sb-color-green-dark);transition:none}.dnb-anchor--active,.dnb-anchor--hover{border-radius:.5rem;color:var(--sb-color-text)}.dnb-anchor--active{background-color:var(--sb-color-green)}.dnb-anchor--focus{border-radius:.25rem;color:var(--sb-color-blue-dark)}.dnb-anchor--focus,.dnb-anchor--focus:not(:active){background-color:var(--sb-color-blue-light-3)}.dnb-anchor--focus.dnb-anchor--icon-left,.dnb-anchor--focus.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor--focus.dnb-anchor--icon-right,.dnb-anchor--focus.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--contrast{color:var(--color-white)}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{text-decoration:none}.dnb-anchor--contrast:active,.dnb-anchor--contrast:hover{background-color:var(--color-white);color:var(--color-emerald-green)}.dnb-anchor--contrast:not(:disabled):focus{background-color:transparent;color:var(--color-white);outline:none}html[data-whatinput=keyboard] .dnb-anchor--contrast:not(:disabled):focus{--border-color:var(--color-white);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}
+@charset "UTF-8";.dnb-anchor{--anchor-underline-thickness:0.125rem;--anchor-background:transparent;border-radius:.5em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background);color:var(--sb-color-gray-dark-3);font-weight:var(--sb-font-weight-bold);padding:.15625em 0;-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}.dnb-anchor--has-icon,.dnb-anchor--inline,.dnb-anchor--no-underline{box-shadow:inset 100vw 100vw 0 0 var(--anchor-background),-.25em 0 0 0 var(--anchor-background),.25em 0 0 0 var(--anchor-background)}.dnb-anchor:hover{--anchor-background:var(--sb-color-green-dark)}.dnb-anchor:active,.dnb-anchor:hover{border-radius:.5em;color:var(--sb-color-text);transition:none}.dnb-anchor:active{--anchor-background:var(--sb-color-green)}.dnb-anchor.focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}.dnb-anchor:focus-visible{background-color:var(--sb-color-blue-light-3);border-radius:.25em;color:var(--sb-color-blue-dark)}.dnb-anchor.focus-visible.dnb-anchor--icon-left{margin-left:0}.dnb-anchor:focus-visible.dnb-anchor--icon-left{margin-left:0}.dnb-anchor.focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor:focus-visible.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor.focus-visible.dnb-anchor--icon-right{margin-right:0}.dnb-anchor:focus-visible.dnb-anchor--icon-right{margin-right:0}.dnb-anchor.focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor:focus-visible.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor--icon-left{margin-left:1.125em}.dnb-anchor--icon-left .dnb-icon{font-size:1em;margin-left:-1.125em;margin-right:.125em}.dnb-anchor--icon-right{margin-right:1.125em}.dnb-anchor--icon-right .dnb-icon{font-size:1em;margin-left:.125em;margin-right:-1.125em}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon){padding-right:.25em}.dnb-anchor[target=_blank]:not(:empty):not(.dnb-anchor--no-icon):after{background-position:100%;background-size:contain;display:inline-block;height:.9em;line-height:.9em;margin-left:0;margin-right:0;position:static;width:1.275em}.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--no-style):not(.dnb-anchor--icon-left):before,.dnb-anchor:not(.dnb-anchor--no-underline):not(.dnb-anchor--has-icon):not(.anchor-hash):not(.dnb-anchor--inline):not(.dnb-anchor--no-style):not(.dnb-anchor--icon-right):after{content:" ";-webkit-text-decoration-color:var(--sb-color-green-dark);text-decoration-color:var(--sb-color-green-dark)}.dnb-anchor--hover{--anchor-background:var(--sb-color-green-dark)}.dnb-anchor--active,.dnb-anchor--hover{border-radius:.5em;color:var(--sb-color-text);transition:none}.dnb-anchor--active{--anchor-background:var(--sb-color-green)}.dnb-anchor--focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:transparent;background-color:var(--sb-color-blue-light-3);border-color:transparent;border-radius:.25em;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-blue-dark);outline:none;transition:none}.dnb-anchor--focus,.dnb-section .dnb-anchor--focus.dnb-anchor{text-decoration:none}.dnb-anchor--focus.dnb-anchor--icon-left,.dnb-anchor--focus.dnb-anchor--icon-left .dnb-icon{margin-left:0}.dnb-anchor--focus.dnb-anchor--icon-right,.dnb-anchor--focus.dnb-anchor--icon-right .dnb-icon{margin-right:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius.focus-visible,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--no-radius,.dnb-anchor--no-radius:active,.dnb-anchor--no-radius:focus-visible,.dnb-anchor--no-radius:hover{border-radius:0}.dnb-anchor--inline{-webkit-text-decoration-color:currentcolor;text-decoration-color:currentcolor}.dnb-anchor--contrast{color:var(--color-white)}.dnb-anchor--contrast:hover{box-shadow:inset 100vw 100vw 0 0 var(--color-white),-.125em 0 0 0 var(--color-white),.125em 0 0 0 var(--color-white);color:var(--sb-color-text)}.dnb-anchor--contrast:active{background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,-.125em 0 0 0 transparent,.125em 0 0 0 transparent;color:var(--color-white)}.dnb-anchor--contrast.focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}.dnb-anchor--contrast:focus-visible{--border-color:var(--color-white);--border-width:var(--focus-ring-width);background-color:transparent;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-white);outline:none}