@dnb/eufemia 10.22.0 → 10.24.0

package/cjs/components/anchor/Anchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"Anchor.js","names":["_react","_interopRequireDefault","require","_classnames","_Element","_shared","_Context","_componentHelper","_helpers","_IconPrimary2","_Tooltip","_icons","_IconPrimary","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","defaultProps","AnchorInstance","localProps","context","React","useContext","Context","allProps","extendPropsWithContext","skeleton","getTranslation","Anchor","inner_ref","innerRef","createRef","id","element","className","children","tooltip","icon","iconPosition","omitClass","targetBlankTitle","rest","theme","useTheme","iconSpacer","isSbanken","attributes","internalId","makeUniqueId","as","prefix","suffix","href","to","showLaunchIcon","opensNewTab","showTooltip","title","createElement","Fragment","launchIcon","iconNode","pickIcon","classnames","showDelay","targetElement","forwardRef","props","ref","_supportsSpacingProps","_default","exports","scrollToHashHandler","event","_element$pathname","currentTarget","getAttribute","document","includes","isSamePath","startsWith","window","location","pathname","replace","split","reverse","anchorElem","getElementById","HTMLElement","scrollPadding","parseFloat","getComputedStyle","documentElement","scrollPaddingTop","top","getOffsetTop","scroll","error","console","_icon$props","_icon$props2","_icon$props2$classNam","_icon$props3","cloneElement","test"],"sources":["../../../../src/components/anchor/Anchor.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps, ElementIsType } from '../../elements/Element'\nimport { useTheme } from '../../shared'\nimport Context from '../../shared/Context'\nimport {\n  makeUniqueId,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { getOffsetTop } from '../../shared/helpers'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport Tooltip from '../tooltip/Tooltip'\nimport { launch as launchIcon } from '../../icons'\nimport type { IconIcon } from '../icon/Icon'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { SpacingProps } from '../../shared/types'\n\nexport type AnchorProps = {\n  element?: ElementIsType\n  href?: string\n  to?: string\n  targetBlankTitle?: string\n  target?: string\n  tooltip?: React.ReactNode\n  icon?: IconIcon\n  iconPosition?: 'left' | 'right'\n  skeleton?: SkeletonShow\n  omitClass?: boolean\n  innerRef?: React.RefObject<HTMLAnchorElement>\n\n  /** @deprecated use innerRef instead */\n  inner_ref?: React.RefObject<HTMLAnchorElement>\n}\n\nexport type AnchorAllProps = AnchorProps &\n  Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> &\n  SpacingProps\n\nconst defaultProps = {}\n\nexport function AnchorInstance(localProps: AnchorAllProps) {\n  const context = React.useContext(Context)\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    { skeleton: context?.skeleton },\n    context?.getTranslation(localProps as AnchorAllProps).Anchor,\n    context?.Anchor\n  )\n\n  // deprecated: inner_ref is still needed to support Button's usage of Anchor\n  if (typeof allProps.inner_ref !== 'undefined') {\n    allProps.innerRef = allProps.inner_ref\n    delete allProps.inner_ref\n  }\n\n  if (!allProps.innerRef) {\n    allProps.innerRef = React.createRef()\n  }\n\n  const {\n    id,\n    element,\n    className,\n    children,\n    tooltip,\n    icon,\n    iconPosition = 'left',\n    omitClass,\n    innerRef,\n    targetBlankTitle,\n    ...rest\n  } = allProps\n\n  const theme = useTheme()\n  const iconSpacer = theme?.isSbanken ? ' ' : ''\n  const attributes = rest as ElementProps\n  const internalId = id || 'id' + makeUniqueId()\n  const as = (element || 'a') as string\n\n  let prefix: React.ReactNode\n  let suffix: React.ReactNode\n\n  const href = allProps.href || allProps.to\n  const showLaunchIcon = opensNewTab(allProps.target, href)\n  const showTooltip = (tooltip || showLaunchIcon) && !allProps.title\n\n  // WCAG guide: https://www.w3.org/TR/WCAG20-TECHS/G201.html\n  if (showLaunchIcon && !omitClass) {\n    suffix = (\n      <>\n        {iconSpacer}\n        <IconPrimary\n          className=\"dnb-anchor__launch-icon\"\n          icon={launchIcon}\n        />\n      </>\n    )\n  }\n\n  if (icon) {\n    const iconNode = pickIcon(icon) || <IconPrimary icon={icon} />\n    if (iconPosition === 'left') {\n      prefix = (\n        <>\n          {iconNode}\n          {iconSpacer}\n        </>\n      )\n    } else if (iconPosition === 'right') {\n      suffix = (\n        <>\n          {iconSpacer}\n          {iconNode}\n        </>\n      )\n    }\n  }\n\n  return (\n    <>\n      <E\n        as={as}\n        id={id}\n        className={classnames(\n          omitClass !== true &&\n            classnames(\n              'dnb-anchor',\n              prefix && 'dnb-anchor--icon-left',\n              suffix && 'dnb-anchor--icon-right',\n              typeof children !== 'string' && 'dnb-anchor--was-node'\n            ),\n          className\n        )}\n        {...attributes}\n        innerRef={innerRef}\n      >\n        {prefix}\n        {children}\n        {suffix}\n      </E>\n\n      {showTooltip && (\n        <Tooltip\n          showDelay={100}\n          id={internalId + '-tooltip'}\n          targetElement={innerRef}\n          tooltip={tooltip}\n        >\n          {allProps.title || targetBlankTitle}\n        </Tooltip>\n      )}\n    </>\n  )\n}\n\nconst Anchor = React.forwardRef(\n  (props: AnchorAllProps, ref: React.RefObject<HTMLAnchorElement>) => {\n    return <AnchorInstance innerRef={ref} {...props} />\n  }\n)\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nAnchor._supportsSpacingProps = true\n\nexport default Anchor\n\nexport function scrollToHashHandler(\n  event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n) {\n  const element = event.currentTarget as HTMLAnchorElement\n  const href = element.getAttribute('href')\n\n  if (typeof document === 'undefined' || !href.includes('#')) {\n    return // stop here\n  }\n\n  /**\n   * What happens here?\n   * When `scroll-behavior: smooth;` in CSS is set,\n   * Blink/Chromium wants the user to click two times in order to actually scroll to the anchor hash.\n   * The first click, sets the hash, the second one, scrolls to it.\n   * We want Chromium browsers to scroll to the element on the first click.\n   */\n  const isSamePath =\n    href.startsWith('#') ||\n    window.location.href.includes(element.pathname?.replace(/\\/$/, ''))\n\n  // Only continue, when we are sure we are on the same page,\n  // because, the same ID may exists occasionally on the current page.\n  if (isSamePath) {\n    const id = href.split(/#/g).reverse()[0]\n    const anchorElem = document.getElementById(id)\n\n    if (anchorElem instanceof HTMLElement) {\n      try {\n        const scrollPadding = parseFloat(\n          window.getComputedStyle(document.documentElement)\n            .scrollPaddingTop\n        )\n        const top = getOffsetTop(anchorElem) - scrollPadding || 0\n\n        window.scroll({ top })\n\n        return { element: anchorElem }\n      } catch (error) {\n        console.error(error)\n      }\n    }\n  }\n}\n\nexport function pickIcon(icon) {\n  return icon?.props?.icon || icon?.props?.className?.includes('dnb-icon')\n    ? React.cloneElement(icon, {\n        key: 'button-icon-clone',\n        className: classnames(icon.props?.className, 'dnb-button__icon'),\n      })\n    : null\n}\n\nexport const opensNewTab = (target: string, href: string): boolean =>\n  target === '_blank' && !/^(mailto|tel|sms)/.test(href)\n"],"mappings":"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"}
+{"version":3,"file":"Anchor.js","names":["_react","_interopRequireDefault","require","_classnames","_Element","_Context","_componentHelper","_helpers","_IconPrimary2","_Tooltip","_icons","_IconPrimary","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","defaultProps","AnchorInstance","localProps","context","React","useContext","Context","allProps","extendPropsWithContext","skeleton","getTranslation","Anchor","inner_ref","innerRef","createRef","id","element","className","children","tooltip","icon","iconPosition","omitClass","targetBlankTitle","rest","attributes","internalId","makeUniqueId","as","href","to","_opensNewTab","opensNewTab","showLaunchIcon","includes","showTooltip","title","iconNode","getIcon","suffix","createElement","launchIcon","prefix","Fragment","classnames","showDelay","targetElement","forwardRef","props","ref","_supportsSpacingProps","_default","exports","scrollToHashHandler","event","_element$pathname","currentTarget","getAttribute","document","isSamePath","startsWith","window","location","pathname","replace","split","reverse","anchorElem","getElementById","HTMLElement","scrollPadding","parseFloat","getComputedStyle","documentElement","scrollPaddingTop","top","getOffsetTop","scroll","error","console","pickIcon","_icon$props","_icon$props2","_icon$props2$classNam","_icon$props3","cloneElement","test"],"sources":["../../../../src/components/anchor/Anchor.tsx"],"sourcesContent":["/**\n * HTML Element\n *\n */\n\nimport React from 'react'\nimport classnames from 'classnames'\nimport E, { ElementProps } from '../../elements/Element'\nimport Context from '../../shared/Context'\nimport {\n  makeUniqueId,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\nimport { getOffsetTop } from '../../shared/helpers'\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport Tooltip from '../tooltip/Tooltip'\nimport { launch as launchIcon } from '../../icons'\nimport type { IconIcon } from '../icon/Icon'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport type { DynamicElement, SpacingProps } from '../../shared/types'\n\nexport type AnchorProps = {\n  element?: DynamicElement<HTMLAnchorElement | AnchorAllProps>\n  href?: string\n  to?: string\n  targetBlankTitle?: string\n  target?: string\n  tooltip?: React.ReactNode\n  icon?: IconIcon\n  iconPosition?: 'left' | 'right'\n  skeleton?: SkeletonShow\n  omitClass?: boolean\n  innerRef?: React.RefObject<HTMLAnchorElement>\n\n  /** @deprecated use innerRef instead */\n  inner_ref?: React.RefObject<HTMLAnchorElement>\n}\n\nexport type AnchorAllProps = AnchorProps &\n  Omit<React.HTMLProps<HTMLAnchorElement>, 'ref'> &\n  SpacingProps\n\nconst defaultProps = {}\n\nexport function AnchorInstance(localProps: AnchorAllProps) {\n  const context = React.useContext(Context)\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    { skeleton: context?.skeleton },\n    context?.getTranslation(localProps as AnchorAllProps).Anchor,\n    context?.Anchor\n  )\n\n  // deprecated: inner_ref is still needed to support Button's usage of Anchor\n  if (typeof allProps.inner_ref !== 'undefined') {\n    allProps.innerRef = allProps.inner_ref\n    delete allProps.inner_ref\n  }\n\n  if (!allProps.innerRef) {\n    allProps.innerRef = React.createRef()\n  }\n\n  const {\n    id,\n    element,\n    className,\n    children,\n    tooltip,\n    icon,\n    iconPosition = 'left',\n    omitClass,\n    innerRef,\n    targetBlankTitle,\n    ...rest\n  } = allProps\n\n  const attributes = rest as ElementProps\n  const internalId = id || 'id' + makeUniqueId()\n  const as = element || 'a'\n\n  const href = allProps.href || allProps.to\n  const _opensNewTab = opensNewTab(allProps.target, href)\n  const showLaunchIcon =\n    _opensNewTab &&\n    !className?.includes('dnb-anchor--no-icon') &&\n    !omitClass\n  const showTooltip = (tooltip || _opensNewTab) && !allProps.title\n\n  const iconNode = icon && getIcon(icon)\n\n  const suffix =\n    (iconPosition === 'right' && iconNode) ||\n    (showLaunchIcon && (\n      <IconPrimary className=\"dnb-anchor__launch-icon\" icon={launchIcon} />\n    ))\n\n  const prefix = iconPosition === 'left' && iconNode\n\n  return (\n    <>\n      <E\n        as={as}\n        id={id}\n        className={classnames(\n          omitClass !== true &&\n            classnames(\n              'dnb-anchor',\n              prefix && 'dnb-anchor--icon-left',\n              suffix && 'dnb-anchor--icon-right',\n              typeof children !== 'string' && 'dnb-anchor--was-node'\n            ),\n          className\n        )}\n        {...attributes}\n        innerRef={innerRef}\n      >\n        {prefix}\n        {children}\n        {suffix}\n      </E>\n\n      {showTooltip && (\n        <Tooltip\n          showDelay={100}\n          id={internalId + '-tooltip'}\n          targetElement={innerRef}\n          tooltip={tooltip}\n        >\n          {allProps.title || targetBlankTitle}\n        </Tooltip>\n      )}\n    </>\n  )\n}\n\nconst Anchor = React.forwardRef(\n  (props: AnchorAllProps, ref: React.RefObject<HTMLAnchorElement>) => {\n    return <AnchorInstance innerRef={ref} {...props} />\n  }\n)\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nAnchor._supportsSpacingProps = true\n\nexport default Anchor\n\nexport function scrollToHashHandler(\n  event: React.MouseEvent<HTMLAnchorElement, MouseEvent>\n) {\n  const element = event.currentTarget as HTMLAnchorElement\n  const href = element.getAttribute('href')\n\n  if (typeof document === 'undefined' || !href.includes('#')) {\n    return // stop here\n  }\n\n  /**\n   * What happens here?\n   * When `scroll-behavior: smooth;` in CSS is set,\n   * Blink/Chromium wants the user to click two times in order to actually scroll to the anchor hash.\n   * The first click, sets the hash, the second one, scrolls to it.\n   * We want Chromium browsers to scroll to the element on the first click.\n   */\n  const isSamePath =\n    href.startsWith('#') ||\n    window.location.href.includes(element.pathname?.replace(/\\/$/, ''))\n\n  // Only continue, when we are sure we are on the same page,\n  // because, the same ID may exists occasionally on the current page.\n  if (isSamePath) {\n    const id = href.split(/#/g).reverse()[0]\n    const anchorElem = document.getElementById(id)\n\n    if (anchorElem instanceof HTMLElement) {\n      try {\n        const scrollPadding = parseFloat(\n          window.getComputedStyle(document.documentElement)\n            .scrollPaddingTop\n        )\n        const top = getOffsetTop(anchorElem) - scrollPadding || 0\n\n        window.scroll({ top })\n\n        return { element: anchorElem }\n      } catch (error) {\n        console.error(error)\n      }\n    }\n  }\n}\n\nfunction getIcon(icon) {\n  return pickIcon(icon) || <IconPrimary icon={icon} />\n}\n\nexport function pickIcon(icon, className?: string) {\n  return icon?.props?.icon || icon?.props?.className?.includes('dnb-icon')\n    ? React.cloneElement(icon, {\n        key: 'button-icon-clone',\n        className: classnames(icon.props?.className, className),\n      })\n    : null\n}\n\nexport const opensNewTab = (target: string, href: string): boolean =>\n  target === '_blank' && !/^(mailto|tel|sms)/.test(href)\n"],"mappings":"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"}

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

@@ -82,16 +82,11 @@
   @content;
 }
 
-@mixin anchorBackground($color, $overflow: 0.125em) {
-  @if $overflow {
-    --anchor-background-gutter: #{$overflow};
-    box-shadow:
-      inset 100vw 100vw 0 0 $color,
-      calc(var(--anchor-background-gutter) * -1) 0 0 0 $color,
-      var(--anchor-background-gutter) 0 0 0 $color;
-  } @else {
-    box-shadow: inset 100vw 100vw 0 0 $color;
-  }
+@mixin anchorBackground($color) {
+  box-shadow:
+    inset 100vw 100vw 0 0 $color,
+    calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 $color,
+    var(--anchor-background-gutter-right, 0.125rem) 0 0 0 $color;
 }
 
 // other styles
@@ -120,6 +115,10 @@
 }
 
 @mixin anchorStyle() {
+  --anchor-icon-gutter: 0.25em;
+  // word-joiner character (zero-width non-breaking space) connects icon with word
+  --anchor-icon-seperator: '\2060';
+  --anchor-icon-fallback-position: translateY(-0.125em);
   @include anchorDefaultStyle();
 
   // have focus before :active, because of border-radius
@@ -148,15 +147,54 @@
 
   // other stuff, not related to the Anchor directly
   .dnb-icon {
-    display: inline-block;
+    display: inline;
+    vertical-align: baseline;
+    white-space: nowrap; // force icon to line break with word
+    font-size: inherit;
 
-    // -1px to center the icons against large chars
-    transform: translateY(-0.0625em);
+    svg {
+      vertical-align: middle;
+      transform: var(--anchor-icon-fallback-position);
+    }
+  }
+
+  @supports (height: 1lh) {
+    .dnb-icon {
+      vertical-align: top;
+      line-height: 1lh;
+
+      svg {
+        vertical-align: top;
+        transform: translateY(calc(0.5lh - 0.5em));
+      }
+    }
   }
 
   &--no-icon .dnb-icon {
     display: none;
   }
+
+  &--icon-left .dnb-icon:first-child {
+    &::after {
+      content: var(--anchor-icon-seperator);
+    }
+    svg {
+      margin-right: var(--anchor-icon-gutter);
+    }
+  }
+
+  &--icon-right .dnb-icon:last-child {
+    &::before {
+      content: var(--anchor-icon-seperator);
+    }
+    svg {
+      margin-left: var(--anchor-icon-gutter);
+    }
+  }
+
+  .dnb-icon--default {
+    font-size: calc(16em / 18);
+  }
 }
 
 @mixin anchorTag() {
@@ -187,6 +225,17 @@
   }
 }
 
+@mixin notInline() {
+  &:where(:not(.dnb-anchor--inline)) {
+    @content;
+  }
+  &:not(.dnb-anchor--inline) {
+    @include whereFallback() {
+      @content;
+    }
+  }
+}
+
 @mixin whereFallback() {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
   @supports not (selector(*:where(*))) {

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

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
  * Anchor
  *
@@ -20,6 +21,9 @@ button.dnb-anchor {
 
 :where(:not(.dnb-anchor--no-style)).dnb-anchor {
   --anchor-underline-thickness: 0.0938rem;
+  --anchor-icon-gutter: 0.25em;
+  --anchor-icon-seperator: "⁠";
+  --anchor-icon-fallback-position: translateY(-0.125em);
   display: inline;
   padding: 0.05575em 0;
   font-size: var(--font-size-basis);
@@ -81,19 +85,49 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   transition: none;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon {
-  display: inline-block;
-  transform: translateY(-0.0625em);
+  display: inline;
+  vertical-align: baseline;
+  white-space: nowrap;
+  font-size: inherit;
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg {
+  vertical-align: middle;
+  transform: var(--anchor-icon-fallback-position);
+}
+@supports (height: 1lh) {
+  :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon {
+    vertical-align: top;
+    line-height: 1lh;
+  }
+  :where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg {
+    vertical-align: top;
+    transform: translateY(calc(0.5lh - 0.5em));
+  }
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon {
   display: none;
 }
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child::after {
+  content: var(--anchor-icon-seperator);
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child svg {
+  margin-right: var(--anchor-icon-gutter);
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child::before {
+  content: var(--anchor-icon-seperator);
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child svg {
+  margin-left: var(--anchor-icon-gutter);
+}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default {
+  font-size: 0.8888888889em;
+}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast {
   color: var(--color-white);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)) {
   color: var(--anchor-color--contrast);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+  box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -101,15 +135,13 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
 @supports not (selector(*:where(*))) {
   :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
     color: var(--anchor-color--contrast);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
   }
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:active {
   color: var(--color-white);
   background-color: transparent;
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter) * -1) 0 0 0 transparent, var(--anchor-background-gutter) 0 0 0 transparent;
+  box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 transparent, var(--anchor-background-gutter-right, 0.125rem) 0 0 0 transparent;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:focus-visible {
   color: var(--color-white);
@@ -127,6 +159,9 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
 @supports not (selector(*:where(*))) {
   :not(.dnb-anchor--no-style).dnb-anchor {
     --anchor-underline-thickness: 0.0938rem;
+    --anchor-icon-gutter: 0.25em;
+    --anchor-icon-seperator: "⁠";
+    --anchor-icon-fallback-position: translateY(-0.125em);
     display: inline;
     padding: 0.05575em 0;
     font-size: var(--font-size-basis);
@@ -188,19 +223,49 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
     transition: none;
   }
   :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon {
-    display: inline-block;
-    transform: translateY(-0.0625em);
+    display: inline;
+    vertical-align: baseline;
+    white-space: nowrap;
+    font-size: inherit;
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg {
+    vertical-align: middle;
+    transform: var(--anchor-icon-fallback-position);
+  }
+  @supports (height: 1lh) {
+    :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon {
+      vertical-align: top;
+      line-height: 1lh;
+    }
+    :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg {
+      vertical-align: top;
+      transform: translateY(calc(0.5lh - 0.5em));
+    }
   }
   :not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon {
     display: none;
   }
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child::after {
+    content: var(--anchor-icon-seperator);
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child svg {
+    margin-right: var(--anchor-icon-gutter);
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child::before {
+    content: var(--anchor-icon-seperator);
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child svg {
+    margin-left: var(--anchor-icon-gutter);
+  }
+  :not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default {
+    font-size: 0.8888888889em;
+  }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast {
     color: var(--color-white);
   }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)) {
     color: var(--anchor-color--contrast);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+    box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
   }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
     /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -208,15 +273,13 @@ sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor-
   @supports not (selector(*:where(*))) {
     :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover) {
       color: var(--anchor-color--contrast);
-      --anchor-background-gutter: 0.125em;
-      box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter) 0 0 0 var(--color-white);
+      box-shadow: inset 100vw 100vw 0 0 var(--color-white), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--color-white), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--color-white);
     }
   }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:active {
     color: var(--color-white);
     background-color: transparent;
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter) * -1) 0 0 0 transparent, var(--anchor-background-gutter) 0 0 0 transparent;
+    box-shadow: inset 100vw 100vw 0 0 transparent, calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 transparent, var(--anchor-background-gutter-right, 0.125rem) 0 0 0 transparent;
   }
   :not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:focus-visible {
     color: var(--color-white);

package/cjs/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)}:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-underline-thickness:0.0938rem;border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;-webkit-text-decoration:underline;text-decoration:underline;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 :where(:not(.dnb-anchor--no-style)).dnb-anchor,sup :where(:not(.dnb-anchor--no-style)).dnb-anchor{padding:0 .025em}.dnb-h--basis :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--medium :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--small :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--x-large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--x-small :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--xx-large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-lead :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-p :where(:not(.dnb-anchor--no-style)).dnb-anchor{font-size:inherit}:where(:not(.dnb-anchor--no-style)).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-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{-webkit-text-decoration:none;text-decoration:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){-webkit-text-decoration:none;text-decoration:none}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){-webkit-text-decoration:none;text-decoration:none}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:active.dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{-webkit-text-decoration:none;text-decoration:none}[data-visual-test-wrapper] :where(:not(.dnb-anchor--no-style)).dnb-anchor{transition:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon{display:inline-block;transform:translateY(-.0625em)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon{display:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast{color:var(--color-white)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover){--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:active{--anchor-background-gutter:0.125em;background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,calc(var(--anchor-background-gutter)*-1) 0 0 0 transparent,var(--anchor-background-gutter) 0 0 0 transparent;color:var(--color-white)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.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}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-underline-thickness:0.0938rem;border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;-webkit-text-decoration:underline;text-decoration:underline;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 :not(.dnb-anchor--no-style).dnb-anchor,sup :not(.dnb-anchor--no-style).dnb-anchor{padding:0 .025em}.dnb-h--basis :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--medium :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--small :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--x-large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--x-small :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--xx-large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-lead :not(.dnb-anchor--no-style).dnb-anchor,.dnb-p :not(.dnb-anchor--no-style).dnb-anchor{font-size:inherit}:not(.dnb-anchor--no-style).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-section :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{-webkit-text-decoration:none;text-decoration:none}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){-webkit-text-decoration:none;text-decoration:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){-webkit-text-decoration:none;text-decoration:none}}:not(.dnb-anchor--no-style).dnb-anchor:active{border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:active.dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:active{-webkit-text-decoration:none;text-decoration:none}[data-visual-test-wrapper] :not(.dnb-anchor--no-style).dnb-anchor{transition:none}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon{display:inline-block;transform:translateY(-.0625em)}:not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon{display:none}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast{color:var(--color-white)}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)){--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover){--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:active{--anchor-background-gutter:0.125em;background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,calc(var(--anchor-background-gutter)*-1) 0 0 0 transparent,var(--anchor-background-gutter) 0 0 0 transparent;color:var(--color-white)}:not(.dnb-anchor--no-style).dnb-anchor.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--hover{border-radius:.25em}.dnb-anchor--hover,.dnb-section .dnb-anchor--hover.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--active{border-radius:.25em}.dnb-anchor--active,.dnb-section .dnb-anchor--active.dnb-anchor{-webkit-text-decoration:none;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-anchor--no-underline,.dnb-section .dnb-anchor--focus.dnb-anchor,.dnb-section .dnb-anchor--no-underline.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.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{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor.dnb-skeleton .dnb-icon,.dnb-skeleton>.dnb-anchor .dnb-icon{filter:grayscale(100%) opacity(.3)}
+@charset "UTF-8";button.dnb-anchor{-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer;line-height:calc(var(--line-height-basis) + .125rem)}:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-underline-thickness:0.0938rem;--anchor-icon-gutter:0.25em;--anchor-icon-seperator:"⁠";--anchor-icon-fallback-position:translateY(-0.125em);border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;-webkit-text-decoration:underline;text-decoration:underline;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 :where(:not(.dnb-anchor--no-style)).dnb-anchor,sup :where(:not(.dnb-anchor--no-style)).dnb-anchor{padding:0 .025em}.dnb-h--basis :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--medium :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--small :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--x-large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--x-small :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-h--xx-large :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-lead :where(:not(.dnb-anchor--no-style)).dnb-anchor,.dnb-p :where(:not(.dnb-anchor--no-style)).dnb-anchor{font-size:inherit}:where(:not(.dnb-anchor--no-style)).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-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{-webkit-text-decoration:none;text-decoration:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){-webkit-text-decoration:none;text-decoration:none}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){-webkit-text-decoration:none;text-decoration:none}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{border-radius:.25em}.dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:active.dnb-anchor,:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{-webkit-text-decoration:none;text-decoration:none}[data-visual-test-wrapper] :where(:not(.dnb-anchor--no-style)).dnb-anchor{transition:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon{display:inline;font-size:inherit;vertical-align:baseline;white-space:nowrap}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg{transform:var(--anchor-icon-fallback-position);vertical-align:middle}@supports (height:1lh){:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon{line-height:1lh;vertical-align:top}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg{transform:translateY(calc(.5lh - .5em));vertical-align:top}}:where(:not(.dnb-anchor--no-style)).dnb-anchor--no-icon .dnb-icon{display:none}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child:after{content:var(--anchor-icon-seperator)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child svg{margin-right:var(--anchor-icon-gutter)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child:before{content:var(--anchor-icon-seperator)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child svg{margin-left:var(--anchor-icon-gutter)}:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default{font-size:.8888888889em}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast{color:var(--color-white)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)){box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover){box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}}:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--contrast:active{background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 transparent,var(--anchor-background-gutter-right,.125rem) 0 0 0 transparent;color:var(--color-white)}:where(:not(.dnb-anchor--no-style)).dnb-anchor.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}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-underline-thickness:0.0938rem;--anchor-icon-gutter:0.25em;--anchor-icon-seperator:"⁠";--anchor-icon-fallback-position:translateY(-0.125em);border-radius:0;display:inline;font-size:var(--font-size-basis);padding:.05575em 0;-webkit-text-decoration:underline;text-decoration:underline;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 :not(.dnb-anchor--no-style).dnb-anchor,sup :not(.dnb-anchor--no-style).dnb-anchor{padding:0 .025em}.dnb-h--basis :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--medium :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--small :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--x-large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--x-small :not(.dnb-anchor--no-style).dnb-anchor,.dnb-h--xx-large :not(.dnb-anchor--no-style).dnb-anchor,.dnb-lead :not(.dnb-anchor--no-style).dnb-anchor,.dnb-p :not(.dnb-anchor--no-style).dnb-anchor{font-size:inherit}:not(.dnb-anchor--no-style).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-section :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{-webkit-text-decoration:none;text-decoration:none}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){-webkit-text-decoration:none;text-decoration:none}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){-webkit-text-decoration:none;text-decoration:none}}:not(.dnb-anchor--no-style).dnb-anchor:active{border-radius:.25em}.dnb-section :not(.dnb-anchor--no-style).dnb-anchor:active.dnb-anchor,:not(.dnb-anchor--no-style).dnb-anchor:active{-webkit-text-decoration:none;text-decoration:none}[data-visual-test-wrapper] :not(.dnb-anchor--no-style).dnb-anchor{transition:none}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon{display:inline;font-size:inherit;vertical-align:baseline;white-space:nowrap}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg{transform:var(--anchor-icon-fallback-position);vertical-align:middle}@supports (height:1lh){:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon{line-height:1lh;vertical-align:top}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg{transform:translateY(calc(.5lh - .5em));vertical-align:top}}:not(.dnb-anchor--no-style).dnb-anchor--no-icon .dnb-icon{display:none}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child:after{content:var(--anchor-icon-seperator)}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child svg{margin-right:var(--anchor-icon-gutter)}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child:before{content:var(--anchor-icon-seperator)}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child svg{margin-left:var(--anchor-icon-gutter)}:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default{font-size:.8888888889em}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast{color:var(--color-white)}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:where(:not(.dnb-anchor--no-hover)){box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:hover:not(.dnb-anchor--no-hover){box-shadow:inset 100vw 100vw 0 0 var(--color-white),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--color-white),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--color-white);color:var(--anchor-color--contrast)}}:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--contrast:active{background-color:transparent;box-shadow:inset 100vw 100vw 0 0 transparent,calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 transparent,var(--anchor-background-gutter-right,.125rem) 0 0 0 transparent;color:var(--color-white)}:not(.dnb-anchor--no-style).dnb-anchor.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--hover{border-radius:.25em}.dnb-anchor--hover,.dnb-section .dnb-anchor--hover.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor--active{border-radius:.25em}.dnb-anchor--active,.dnb-section .dnb-anchor--active.dnb-anchor{-webkit-text-decoration:none;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-anchor--no-underline,.dnb-section .dnb-anchor--focus.dnb-anchor,.dnb-section .dnb-anchor--no-underline.dnb-anchor{-webkit-text-decoration:none;text-decoration:none}.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{-webkit-text-decoration:none;text-decoration:none}.dnb-anchor.dnb-skeleton .dnb-icon,.dnb-skeleton>.dnb-anchor .dnb-icon{filter:grayscale(100%) opacity(.3)}

package/cjs/components/anchor/style/themes/dnb-anchor-theme-eiendom.css

@@ -19,8 +19,7 @@
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
   --anchor-color: var(--color-sea-green);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
   /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -28,26 +27,18 @@
 @supports not (selector(*:where(*))) {
   :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
     --anchor-color: var(--color-sea-green);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
   }
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:active {
   --anchor-color: var(--anchor-color--active);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
   --anchor-color: var(--color-sea-green);
 }
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child {
-  margin-right: 0.25em;
-}
-:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child {
-  margin-left: 0.25em;
-}
 :where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default {
-  font-size: 1.11em;
+  font-size: 1em;
 }
 :where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path {
   stroke-width: 1.2;
@@ -67,8 +58,7 @@
   }
   :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
     --anchor-color: var(--color-sea-green);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
   }
   :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
     /* stylelint-disable-next-line scss/operator-no-unspaced */
@@ -76,26 +66,18 @@
   @supports not (selector(*:where(*))) {
     :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
       --anchor-color: var(--color-sea-green);
-      --anchor-background-gutter: 0.125em;
-      box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+      box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
     }
   }
   :not(.dnb-anchor--no-style).dnb-anchor:active {
     --anchor-color: var(--anchor-color--active);
-    --anchor-background-gutter: 0.125em;
-    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active);
+    box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
   }
   :not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
     --anchor-color: var(--color-sea-green);
   }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child {
-    margin-right: 0.25em;
-  }
-  :not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child {
-    margin-left: 0.25em;
-  }
   :not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default {
-    font-size: 1.11em;
+    font-size: 1em;
   }
   :not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path {
     stroke-width: 1.2;
@@ -104,14 +86,12 @@
 
 .dnb-anchor--hover {
   --anchor-color: var(--color-sea-green);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--hover);
 }
 
 .dnb-anchor--active {
   --anchor-color: var(--anchor-color--active);
-  --anchor-background-gutter: 0.125em;
-  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active);
+  box-shadow: inset 100vw 100vw 0 0 var(--anchor-background--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-background--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-background--active);
 }
 
 .dnb-anchor--focus {

package/cjs/components/anchor/style/themes/dnb-anchor-theme-eiendom.min.css

@@ -1 +1 @@
-:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-color:var(--anchor-color--active);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child{margin-right:.25em}:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child{margin-left:.25em}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1.11em}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-color:var(--anchor-color--active);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child{margin-right:.25em}:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child{margin-left:.25em}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1.11em}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}}.dnb-anchor--hover{--anchor-color:var(--color-sea-green);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--hover)}.dnb-anchor--active{--anchor-color:var(--anchor-color--active);--anchor-background-gutter:0.125em;box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter) 0 0 0 var(--anchor-background--active)}.dnb-anchor--focus{--anchor-color:var(--color-sea-green)}:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-color--default:var(--color-emerald-green);--anchor-color--contrast:var(--color-sea-green);--anchor-color--active:var(--color-sea-green);--anchor-background--hover:transparent;--anchor-background--active:var(--color-pistachio)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-color--default:var(--color-emerald-green);--anchor-color--contrast:var(--color-sea-green);--anchor-color--active:var(--color-sea-green);--anchor-background--hover:transparent;--anchor-background--active:var(--color-pistachio)}}
+:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}@supports not (selector(*:where(*))){:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}}:where(:not(.dnb-anchor--no-style)).dnb-anchor:active{--anchor-color:var(--anchor-color--active);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--active)}:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1em}:where(:not(.dnb-anchor--no-style)).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-color:var(--anchor-color--default,var(--color-sea-green));--anchor-color--active:var(--color-mint-green);--anchor-color--contrast:var(--color-emerald-green);--anchor-background--hover:var(--color-mint-green-50);--anchor-background--active:var(--color-emerald-green);color:var(--anchor-color)}:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)){--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover){--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}}:not(.dnb-anchor--no-style).dnb-anchor:active{--anchor-color:var(--anchor-color--active);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--active)}:not(.dnb-anchor--no-style).dnb-anchor:focus-visible{--anchor-color:var(--color-sea-green)}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default{font-size:1em}:not(.dnb-anchor--no-style).dnb-anchor__launch-icon.dnb-icon.dnb-icon--default svg path{stroke-width:1.2}}.dnb-anchor--hover{--anchor-color:var(--color-sea-green);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--hover),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--hover),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--hover)}.dnb-anchor--active{--anchor-color:var(--anchor-color--active);box-shadow:inset 100vw 100vw 0 0 var(--anchor-background--active),calc(var(--anchor-background-gutter-left, .125rem)*-1) 0 0 0 var(--anchor-background--active),var(--anchor-background-gutter-right,.125rem) 0 0 0 var(--anchor-background--active)}.dnb-anchor--focus{--anchor-color:var(--color-sea-green)}:where(:not(.dnb-anchor--no-style)).dnb-anchor{--anchor-color--default:var(--color-emerald-green);--anchor-color--contrast:var(--color-sea-green);--anchor-color--active:var(--color-sea-green);--anchor-background--hover:transparent;--anchor-background--active:var(--color-pistachio)}@supports not (selector(*:where(*))){:not(.dnb-anchor--no-style).dnb-anchor{--anchor-color--default:var(--color-emerald-green);--anchor-color--contrast:var(--color-sea-green);--anchor-color--active:var(--color-sea-green);--anchor-background--hover:transparent;--anchor-background--active:var(--color-pistachio)}}