@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
1,365 lines (1,358 loc) • 476 kB
CSS
@charset "UTF-8";
/**
* ATTENTION: This file is auto generated by using "styleFactory".
* Do not change the content!
*
*/
/*
* Utilities
*/
/**
* ATTENTION: This file is auto generated by using "styleFactory".
* Do not change the content!
*
*/
/**
* ATTENTION: This file is auto generated by using "styleFactory".
* Do not change the content!
*
*/
/**
* ATTENTION: This file is auto generated by using "styleFactory".
* Do not change the content!
*
*/
/*
* DrawerList component
*
*/
.dnb-drawer-list {
--drawer-list-distance: 0.5rem;
--drawer-list-padding: 0.5rem;
--drawer-list-list-border-radius: var(--token-radius-md);
--drawer-list-option-border-radius: var(--token-radius-sm);
--drawer-list-option-border-width: 0.25rem;
--drawer-list-option-gap: 0.5rem;
--drawer-list-option-divider: 0.0625rem;
--drawer-list-padding-horizontal--large: 1.25rem;
--drawer-list-height--small: 1.5rem;
--drawer-list-height--default: 2rem;
--drawer-list-height--medium: 2.5rem;
--drawer-list-height--large: 3rem;
--drawer-list-option-inner-background: var(
--token-color-background-neutral
);
--drawer-list-list-background: var(--token-color-background-neutral);
--drawer-list-list-line-height: var(--line-height-basis);
--drawer-list-group-title-color: var(--token-color-text-neutral);
--drawer-list-group-title-bg: var(
--token-color-background-neutral-alternative
);
display: block;
position: relative;
width: inherit;
min-width: inherit;
font-size: var(--font-size-small);
}
.dnb-drawer-list__portal {
--drawer-list-width: 16rem;
}
.dnb-drawer-list__portal__style {
position: absolute;
transition: top 300ms var(--easing-default), left 300ms var(--easing-default), width 300ms var(--easing-default);
z-index: calc(var(--modal-z-index, 3200) + 300);
}
.dnb-drawer-list__portal__style--fixed {
position: fixed;
}
.dnb-drawer-list__root {
width: inherit;
min-width: inherit;
}
.dnb-drawer-list__root--portal {
position: absolute;
top: 0;
left: 0;
}
.dnb-drawer-list__content {
width: 100%;
padding: 0;
}
.dnb-drawer-list__list {
--drawer-list-list-border-width: 0.0625rem;
position: absolute;
z-index: 3;
top: var(--drawer-list-top, auto);
bottom: var(--drawer-list-bottom, auto);
left: 0;
right: 0;
width: inherit;
min-width: inherit;
margin: 0;
padding: 0;
font-size: var(--font-size-basis);
line-height: var(--drawer-list-list-line-height);
background-color: var(--drawer-list-list-background);
transform: translateY(0);
transition: transform 200ms, opacity 160ms ease-out;
box-shadow: var(--shadow-sharp);
border-radius: var(--drawer-list-list-border-radius);
}
.dnb-drawer-list__options {
--drawer-list-option-extra-border--default: 0 0 transparent;
--drawer-list-option-color-text--default: var(
--token-color-text-neutral
);
--drawer-list-option-color-text--disabled: var(
--token-color-text-action-disabled
);
--drawer-list-option-color-bg--default: var(
--token-color-background-neutral
);
--drawer-list-option-color-bg--hover: var(
--token-color-background-neutral-subtle
);
--drawer-list-option-color-bg--active: var(
--token-color-background-neutral-base
);
--drawer-list-option-color-bg--focus: var(
--token-color-background-neutral-subtle
);
--drawer-list-option-color-bg--disabled: var(
--token-color-background-neutral
);
--drawer-list-option-color-border--default: transparent;
--drawer-list-option-color-border--focus: var(
--token-color-stroke-action-focus
);
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
max-height: 90vh;
padding: var(--drawer-list-padding);
list-style: none;
border: none;
border-radius: var(--drawer-list-list-border-radius);
}
.dnb-drawer-list__options:focus-visible {
outline: none;
}
.dnb-drawer-list__options::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-radius: inherit;
box-shadow: 0 0 0 var(--drawer-list-list-border-width) var(--token-color-stroke-neutral-subtle);
}
.dnb-drawer-list--scroll .dnb-drawer-list__options {
min-height: 2rem;
max-height: 70vh;
transition: max-height 300ms var(--easing-default);
overflow-y: auto;
overscroll-behavior: contain;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
.dnb-drawer-list--scroll .dnb-drawer-list__options {
scroll-behavior: auto;
}
}
.dnb-drawer-list--scroll .dnb-drawer-list__options {
scrollbar-color: var(--scrollbar-thumb-color, var(--token-color-text-neutral-alternative)) transparent;
}
@supports not (scrollbar-color: auto) {
.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:vertical {
width: var(--scrollbar-track-width, 0.5rem);
}
.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar:horizontal {
height: var(--scrollbar-track-width, 0.5rem);
}
.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar {
border-radius: var(--scrollbar-thumb-width, 0.5rem);
background-color: var(--scrollbar-track-color, var(--token-color-background-neutral-base));
}
.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color, var(--token-color-text-neutral-alternative));
}
.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover-color, var(--token-color-text-neutral));
}
.dnb-drawer-list--scroll .dnb-drawer-list__options::-webkit-scrollbar-thumb {
border-radius: var(--scrollbar-thumb-width, 0.5rem);
}
}
@media (prefers-reduced-motion: reduce) {
.dnb-drawer-list--scroll .dnb-drawer-list__options {
transition-duration: 0.01ms;
}
}
.dnb-drawer-list--scroll.dnb-drawer-list--no-animation .dnb-drawer-list__options {
transition: none !important;
}
.dnb-drawer-list--open .dnb-drawer-list__options {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
.dnb-drawer-list--open .dnb-drawer-list__options {
scroll-behavior: auto;
}
}
.dnb-drawer-list--no-scroll-animation .dnb-drawer-list__options {
scroll-behavior: auto;
}
.dnb-drawer-list__group {
padding: 0;
margin: 0;
list-style: none;
}
.dnb-drawer-list__group-title {
position: relative;
z-index: 0;
display: block;
padding: 0.5rem calc(var(--drawer-list-padding) + 0.5rem);
margin: var(--drawer-list-padding) calc(var(--drawer-list-padding) * -1);
color: var(--drawer-list-group-title-color);
background-color: var(--drawer-list-group-title-bg);
font-weight: var(--font-weight-medium);
}
.dnb-drawer-list__group.first-of-type .dnb-drawer-list__group-title {
margin-top: calc(var(--drawer-list-padding) * -1);
}
.dnb-drawer-list__option {
position: relative;
z-index: 0;
cursor: pointer;
margin: 0 0 var(--drawer-list-option-gap);
scroll-margin-top: calc(var(--drawer-list-padding));
scroll-margin-bottom: calc(var(--drawer-list-padding));
padding: 0;
color: var(--drawer-list-option-color-text, var(--drawer-list-option-color-text--default));
outline: none;
background-color: var(--drawer-list-option-color-bg, var(--drawer-list-option-color-bg--default));
border-radius: var(--drawer-list-option-border-radius);
--border-color: var(--drawer-list-option-color-border, var(--drawer-list-option-color-border--default));
--border-width: var(--drawer-list-option-border-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color), var(--drawer-list-option-extra-border, var(--drawer-list-option-extra-border--default));
border-color: transparent;
}
.dnb-drawer-list__option__inner {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: repeat(10, min-content);
outline: none;
margin: 0;
padding: 0.5rem 1rem;
color: inherit;
}
.dnb-drawer-list__option__inner > * {
align-self: self-start;
}
.dnb-drawer-list__option__inner::before {
pointer-events: none;
content: "";
position: absolute;
z-index: 2;
top: auto;
left: 1rem;
right: 1rem;
bottom: calc((var(--drawer-list-option-gap) + var(--drawer-list-option-divider)) / 2 * -1);
height: var(--drawer-list-option-divider);
background-color: var(--token-color-stroke-neutral-subtle);
}
.dnb-drawer-list__option__item {
display: block;
text-overflow: ellipsis;
grid-column: 1;
}
.dnb-drawer-list__option__item--horizontal {
display: flex;
}
.dnb-drawer-list__option__item > .dnb-icon {
vertical-align: initial;
}
.dnb-drawer-list__option__item .dnb-anchor {
display: inline-block;
margin-right: 0.5rem;
word-break: break-word;
font-size: inherit;
}
.dnb-drawer-list__option__item.item-nr-1 {
font-weight: var(--font-weight-medium);
}
html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-drawer-list__option:hover:not([disabled]) {
--drawer-list-option-color-text: var(
--drawer-list-option-color-text--hover
);
--drawer-list-option-color-bg: var(
--drawer-list-option-color-bg--hover
);
}
.dnb-drawer-list__option:active[disabled], html:not([data-whatintent=touch]) .dnb-drawer-list__option:active[disabled] {
cursor: not-allowed;
}
.dnb-drawer-list__option:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-drawer-list__option:active:not([disabled]) {
--drawer-list-option-color-text: var(
--drawer-list-option-color-text--active
);
--drawer-list-option-color-bg: var(
--drawer-list-option-color-bg--active
);
}
.dnb-drawer-list__option--focus {
--drawer-list-option-color-text: var(
--drawer-list-option-color-text--focus
);
--drawer-list-option-color-bg: var(
--drawer-list-option-color-bg--focus
);
}
.dnb-drawer-list__option--focus .dnb-drawer-list__option__inner::before {
background-color: transparent;
}
html[data-whatinput=keyboard] .dnb-drawer-list__option--focus {
--drawer-list-option-color-border: var(
--drawer-list-option-color-border--focus
);
--drawer-list-option-extra-border: var(
--drawer-list-option-extra-border--focus
);
}
@media screen and (min-width: 40.00625em) {
.dnb-drawer-list__option__suffix {
grid-column: 2;
grid-row: 1/-1;
justify-self: end;
align-self: center;
}
}
.dnb-drawer-list__option--ignore, .dnb-drawer-list__option.ignore-events {
cursor: default;
pointer-events: none;
}
.dnb-drawer-list__option--selected {
--drawer-list-option-extra-border--focus: inset 0 0 0 0.125rem
var(--token-color-component-button-icon-neutral);
--drawer-list-option-color-text--default: var(
--token-color-text-neutral-inverse
);
--drawer-list-option-color-text--hover: var(
--token-color-text-neutral-inverse
);
--drawer-list-option-color-text--active: var(
--token-color-text-neutral-inverse
);
--drawer-list-option-color-text--focus: var(
--token-color-text-neutral-inverse
);
--drawer-list-option-color-bg--default: var(
--token-color-background-selected
);
--drawer-list-option-color-bg--hover: var(
--token-color-background-action-hover
);
--drawer-list-option-color-bg--active: var(
--token-color-background-action-pressed
);
--drawer-list-option-color-bg--focus: var(
--token-color-background-action-hover
);
}
.dnb-drawer-list__option--selected .dnb-drawer-list__option__inner .dnb-drawer-list__option__inner {
color: inherit;
background-color: inherit;
}
.dnb-drawer-list__option--selected .dnb-drawer-list__option__inner::after {
content: "";
grid-column: 2;
grid-row: 1/-1;
justify-self: end;
align-self: center;
width: 1rem;
height: 1rem;
background-color: currentcolor;
-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSI+ICA8cGF0aCAgICBmaWxsPSIjMDAwIiAgICBkPSJNMyA4LjhhLjc1Ljc1IDAgMSAwLTEuMjIuODZMMyA4Ljc5em0xLjg0IDMuOWwuNjMtLjQxdi0uMDFoLS4wMWwtLjYyLjQyem0xLjcxLjA1bC0uNTktLjQ2di4wMWwuNTkuNDV6bTguNDMtOS40NWEuNzUuNzUgMCAwIDAtMS4xOC0uOTNsMS4xOC45M3pNMS43OCA5LjY2bDIuNDUgMy40OCAxLjIzLS44N0wzIDguOGwtMS4yMy44N3ptMi40NCAzLjQ2Yy4zMi40OC44Ni43OCAxLjQ0LjhsLjA1LTEuNWEuMy4zIDAgMCAxLS4yNC0uMTNsLTEuMjUuODN6bTEuNDQuOGExLjggMS44IDAgMCAwIDEuNDktLjcxbC0xLjItLjlhLjMuMyAwIDAgMS0uMjQuMWwtLjA1IDEuNXptMS40OC0uN2w3Ljg0LTkuOTItMS4xOC0uOTMtNy44NCA5LjkyIDEuMTguOTN6Ii8+PC9zdmc+");
mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSI+ICA8cGF0aCAgICBmaWxsPSIjMDAwIiAgICBkPSJNMyA4LjhhLjc1Ljc1IDAgMSAwLTEuMjIuODZMMyA4Ljc5em0xLjg0IDMuOWwuNjMtLjQxdi0uMDFoLS4wMWwtLjYyLjQyem0xLjcxLjA1bC0uNTktLjQ2di4wMWwuNTkuNDV6bTguNDMtOS40NWEuNzUuNzUgMCAwIDAtMS4xOC0uOTNsMS4xOC45M3pNMS43OCA5LjY2bDIuNDUgMy40OCAxLjIzLS44N0wzIDguOGwtMS4yMy44N3ptMi40NCAzLjQ2Yy4zMi40OC44Ni43OCAxLjQ0LjhsLjA1LTEuNWEuMy4zIDAgMCAxLS4yNC0uMTNsLTEuMjUuODN6bTEuNDQuOGExLjggMS44IDAgMCAwIDEuNDktLjcxbC0xLjItLjlhLjMuMyAwIDAgMS0uMjQuMWwtLjA1IDEuNXptMS40OC0uN2w3Ljg0LTkuOTItMS4xOC0uOTMtNy44NCA5LjkyIDEuMTguOTN6Ii8+PC9zdmc+");
-webkit-mask-size: cover;
mask-size: cover;
}
@media screen and (min-width: 40.00625em) {
.dnb-drawer-list__option--selected:has(.dnb-drawer-list__option__suffix) .dnb-drawer-list__option__inner::after {
content: none;
}
.dnb-drawer-list__option--selected .dnb-drawer-list__option__suffix {
z-index: 0;
align-self: center;
}
}
.dnb-drawer-list__option.last-of-type:not(.dnb-drawer-list__option--focus) .dnb-drawer-list__option__inner::before {
content: none;
}
.dnb-drawer-list__option[disabled] {
--drawer-list-option-color-text: var(
--drawer-list-option-color-text--disabled
);
--drawer-list-option-color-bg: var(
--drawer-list-option-color-bg--disabled
);
cursor: not-allowed;
}
.dnb-drawer-list__option.last-of-type {
margin-bottom: 0;
}
.dnb-drawer-list--top {
--drawer-list-bottom: var(
--drawer-list-height,
var(--drawer-list-height--default)
);
}
.dnb-drawer-list--bottom .dnb-drawer-list__list {
margin-top: var(--drawer-list-distance);
}
.dnb-drawer-list--top .dnb-drawer-list__list {
margin-bottom: var(--drawer-list-distance);
}
.dnb-drawer-list__portal .dnb-drawer-list--top {
--drawer-list-bottom: 0;
}
.dnb-drawer-list__portal .dnb-drawer-list--bottom {
--drawer-list-top: var(
--drawer-list-height,
var(--drawer-list-height--default)
);
}
.dnb-drawer-list--is-popup.dnb-drawer-list--right {
position: absolute;
left: auto;
right: 0;
}
.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
left: -0.5rem;
}
.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
right: -0.5rem;
}
.dnb-drawer-list--open .dnb-drawer-list__list {
z-index: var(--z-index-dropdown);
display: flex;
flex-direction: column;
}
.dnb-drawer-list--open .dnb-drawer-list__list:not(.dnb-drawer-list--open .dnb-drawer-list__list--no-animation) {
animation: drawer-list-slide-top-down 200ms ease-out 1 forwards;
}
.dnb-drawer-list--open .dnb-drawer-list__list--no-animation {
animation-duration: 1ms !important;
}
.dnb-drawer-list--hidden .dnb-drawer-list__list {
display: none;
}
.dnb-drawer-list--no-divider {
--drawer-list-option-gap: 0.25rem;
}
.dnb-drawer-list--no-divider .dnb-drawer-list__option__inner::before {
content: none;
}
.dnb-drawer-list--small {
--drawer-list-height: var(--drawer-list-height--small);
}
.dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
left: -0.75rem;
}
.dnb-drawer-list--small.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
right: -0.75rem;
}
.dnb-drawer-list--medium {
--drawer-list-height: var(--drawer-list-height--medium);
}
.dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
left: -0.25rem;
}
.dnb-drawer-list--medium.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
right: -0.25rem;
}
.dnb-drawer-list--large {
--drawer-list-height: var(--drawer-list-height--large);
--drawer-list-padding-horizontal: var(
--drawer-list-padding-horizontal--large
);
}
.dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--left .dnb-drawer-list__list {
left: -0.25rem;
}
.dnb-drawer-list--large.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
right: -0.25rem;
}
.dnb-drawer-list {
/* stylelint-disable-next-line */
}
.dnb-drawer-list--is-popup.dnb-drawer-list--right .dnb-drawer-list__list {
left: auto;
}
.dnb-drawer-list__root > .dnb-drawer-list--right {
position: absolute;
right: 0;
left: auto;
}
.dnb-drawer-list:not(.dnb-drawer-list--open) .dnb-drawer-list__list:not(.dnb-drawer-list:not(.dnb-drawer-list--open) .dnb-drawer-list__list--no-animation) {
animation: drawer-list-slide-top-up 150ms ease-out 1 forwards;
}
.dnb-drawer-list:not(.dnb-drawer-list--open) .dnb-drawer-list__list--no-animation {
animation-duration: 1ms !important;
}
@keyframes drawer-list-scale-in {
from {
opacity: 0;
transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width)));
}
to {
opacity: 1;
transform: scale(1) translateX(0);
}
}
@keyframes drawer-list-scale-out {
from {
opacity: 1;
transform: scale(1) translateX(0);
}
to {
opacity: 0;
transform: scale(0.8) translateX(calc(1px - var(--drawer-list-width)));
}
}
@keyframes drawer-list-slide-top-down {
from {
opacity: 0;
transform: translateY(calc(1px - var(--drawer-list-height)));
pointer-events: none;
}
to {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
@keyframes drawer-list-slide-top-up {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(calc(1px - var(--drawer-list-height)));
}
}
@keyframes drawer-list-slide-bottom-down {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(calc(1px + var(--drawer-list-height)));
}
}
@keyframes drawer-list-slide-bottom-up {
from {
opacity: 0;
transform: translateY(calc(1px + var(--drawer-list-height)));
pointer-events: none;
}
to {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
}
/**
* ATTENTION: This file is auto generated by using "styleFactory".
* Do not change the content!
*
*/
/*
* ScrollView component
*
*/
.dnb-scroll-view {
overflow-x: auto;
overflow-y: auto;
overscroll-behavior: contain;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
.dnb-scroll-view {
scroll-behavior: auto;
}
}
.dnb-scroll-view {
scrollbar-color: var(--scrollbar-thumb-color, var(--token-color-text-neutral-alternative)) transparent;
}
@supports not (scrollbar-color: auto) {
.dnb-scroll-view::-webkit-scrollbar:vertical {
width: var(--scrollbar-track-width, 0.5rem);
}
.dnb-scroll-view::-webkit-scrollbar:horizontal {
height: var(--scrollbar-track-width, 0.5rem);
}
.dnb-scroll-view::-webkit-scrollbar {
border-radius: var(--scrollbar-thumb-width, 0.5rem);
background-color: var(--scrollbar-track-color, var(--token-color-background-neutral-base));
}
.dnb-scroll-view::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb-color, var(--token-color-text-neutral-alternative));
}
.dnb-scroll-view::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover-color, var(--token-color-text-neutral));
}
.dnb-scroll-view::-webkit-scrollbar-thumb {
border-radius: var(--scrollbar-thumb-width, 0.5rem);
}
}
.dnb-scroll-view {
overscroll-behavior: auto;
}
.dnb-scroll-view--scrollbar-gutter-stable {
scrollbar-gutter: stable;
}
.dnb-scroll-view[tabindex="0"]:focus {
outline: none;
outline: none;
}
html[data-whatinput=keyboard] .dnb-scroll-view[tabindex="0"]:focus {
--border-color: var(--token-color-stroke-action-focus);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color);
border-color: transparent;
}
.dnb-text-counter.dnb-p {
color: var(--token-color-text-neutral-alternative);
}
.dnb-text-counter .dnb-icon {
margin-right: 0;
font-size: 0;
transition: margin 200ms var(--easing-default), font-size 400ms var(--easing-default);
}
.dnb-text-counter--exceeded.dnb-p {
color: var(--token-color-text-error);
}
.dnb-text-counter--exceeded .dnb-icon {
margin-right: 0.5rem;
font-size: var(--font-size-basis--em);
}
/**
* ATTENTION: This file is auto generated by using "styleFactory".
* Do not change the content!
*
*/
/*
* Accordion component
*
*/
.dnb-accordion {
--accordion-color-text: var(--accordion-color-text--default);
--accordion-color-description: var(
--accordion-color-description--default
);
--accordion-color-bg: var(--accordion-color-bg--default);
--accordion-color-border: var(--accordion-color-border--default);
--accordion-border-width: var(
--accordion-border-width--default,
0.0625rem
);
--accordion-border-radius: var(--token-radius-md);
--accordion-easing: var(--easing-default);
--accordion-border-inset: var(--accordion-border-inset--default, inset);
--accordion-header-margin-vertical: 1.25rem;
--accordion-header-margin-vertical--description: 0.75rem;
--accordion-header-wrapper-margin: 1rem;
--accordion-header-wrapper-margin--icon-right: 1rem;
--accordion-header-icon-gutter: 1rem;
--accordion-header-icon-margin: 1rem;
--accordion-header-icon-alignment: flex-start;
--accordion-title-font-weight: var(--font-weight-basis);
--accordion-title-font-weight--expanded: var(--font-weight-medium);
--accordion-content-margin: 1rem 0 0 0;
--accordion-content-padding: 0;
position: relative;
display: flex;
flex-direction: column;
font-size: var(--font-size-small);
line-height: var(--line-height-basis);
}
.dnb-accordion__header {
display: flex;
align-items: center;
cursor: pointer;
outline: none;
color: var(--accordion-color-text, var(--accordion-color-text--default));
background-color: var(--accordion-color-bg);
box-shadow: var(--ui-accordion-box-shadow);
border: none;
border-radius: var(--accordion-border-radius);
}
html:not([data-whatintent=touch]) .dnb-accordion__header:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion__header:hover:not([disabled]) {
--accordion-color-text: var(--accordion-color-text--hover);
--accordion-color-description: var(
--accordion-color-description--hover
);
--accordion-color-bg: var(--accordion-color-bg--hover);
--accordion-color-border: var(--accordion-color-border--hover);
--accordion-border-width: var(--accordion-border-width--hover);
--accordion-border-inset: var(--accordion-border-inset--hover);
}
html:not([data-whatintent=touch]) .dnb-accordion__header--after-click:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion__header--after-click:hover:not([disabled]) {
--accordion-color-text: var(--accordion-color-text--after-click);
--accordion-color-description: var(
--accordion-color-description--after-click
);
--accordion-color-bg: var(--accordion-color-bg--after-click);
--accordion-color-border: var(
--accordion-color-border--after-click
);
}
.dnb-accordion__header:active[disabled], html:not([data-whatintent=touch]) .dnb-accordion__header:active[disabled] {
cursor: not-allowed;
}
.dnb-accordion__header:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-accordion__header:active:not([disabled]) {
--accordion-color-text: var(--accordion-color-text--active);
--accordion-color-description: var(
--accordion-color-description--active
);
--accordion-color-bg: var(--accordion-color-bg--active);
--accordion-color-border: var(--accordion-color-border--active);
--accordion-border-width: var(--accordion-border-width--active);
--accordion-border-inset: var(--accordion-border-inset--active);
}
html:not([data-whatinput=touch]) .dnb-accordion__header:focus-visible[disabled] {
cursor: not-allowed;
}
html:not([data-whatinput=touch]) .dnb-accordion__header:focus-visible:not([disabled]) {
--accordion-color-text: var(--accordion-color-text--focus);
--accordion-color-description: var(
--accordion-color-description--focus
);
--accordion-color-bg: var(--accordion-color-bg--focus);
--accordion-color-border: var(--accordion-color-border--focus);
--accordion-border-width: var(--accordion-border-width--focus);
--accordion-border-inset: var(--accordion-border-inset--focus);
}
.dnb-accordion__header[disabled] {
--accordion-color-text: var(--accordion-color-text--disabled);
--accordion-color-bg: var(--accordion-color-bg--disabled);
--accordion-color-border: var(--accordion-color-border--disabled);
--accordion-color-description: var(
--accordion-color-description--disabled
);
}
.dnb-accordion__header * {
pointer-events: none;
}
.dnb-accordion__header--prevent-click {
pointer-events: none;
}
.dnb-accordion__header__wrapper {
display: flex;
flex-direction: column;
width: 100%;
margin: var(--accordion-header-margin-vertical) var(--accordion-header-wrapper-margin) var(--accordion-header-margin-vertical) 0;
}
.dnb-accordion__header--description .dnb-accordion__header__wrapper {
margin-top: var(--accordion-header-margin-vertical--description);
margin-bottom: var(--accordion-header-margin-vertical--description);
}
.dnb-accordion__header__container {
margin: 0 1rem;
}
.dnb-accordion__header__icon {
align-self: var(--accordion-header-icon-alignment);
margin: var(--accordion-header-margin-vertical) var(--accordion-header-icon-gutter) var(--accordion-header-margin-vertical) var(--accordion-header-icon-margin);
font-size: var(--font-size-small);
line-height: var(--line-height-small);
}
.dnb-accordion__header--description .dnb-accordion__header__icon {
margin-top: var(--accordion-header-margin-vertical--description);
}
.dnb-accordion__header--icon-right {
justify-content: space-between;
}
.dnb-accordion__header--icon-right .dnb-accordion__header__icon {
margin-right: var(--accordion-header-icon-margin);
margin-left: var(--accordion-header-icon-gutter);
order: 3;
}
.dnb-accordion__header--icon-right .dnb-accordion__header__container {
order: 1;
}
.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper {
order: 2;
margin-right: 0;
margin-left: var(--accordion-header-wrapper-margin--icon-right);
}
.dnb-accordion__header--icon-right .dnb-accordion__header__wrapper + .dnb-accordion__header__container {
margin-right: 0;
}
.dnb-accordion__header--icon-right .dnb-accordion__header__container + .dnb-accordion__header__wrapper {
margin-left: 0;
}
html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:hover[disabled] {
cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-accordion__header--outlined:hover:not([disabled]) {
z-index: 1;
}
.dnb-accordion__header--outlined, .dnb-accordion__header--filled {
--ui-accordion-box-shadow: var(
--accordion-border-inset,
var(--accordion-border-inset--default)
)
0 0 0
var(
--accordion-border-width,
var(--accordion-border-width--default)
)
var(
--accordion-color-border,
var(--accordion-color-border--default)
);
}
.dnb-accordion__header--expanded {
--accordion-title-font-weight: var(
--accordion-title-font-weight--expanded
);
}
.dnb-accordion__header__title {
font-size: var(--font-size-basis);
line-height: var(--line-height-basis);
font-weight: var(--accordion-title-font-weight);
}
.dnb-accordion__header__description {
color: var(--accordion-color-description, var(--accordion-color-description--default));
font-size: var(--font-size-small);
line-height: var(--line-height-small);
font-weight: var(--font-weight-basis);
}
.dnb-accordion__header__title + .dnb-accordion__header__description {
margin-top: 0.25rem;
}
.dnb-accordion__header__description + .dnb-accordion__header__title {
margin-top: 0.25rem;
}
.dnb-accordion__content {
display: flex;
width: 100%;
will-change: height;
transition: height 400ms var(--accordion-easing), opacity 600ms var(--accordion-easing);
}
@media (prefers-reduced-motion: reduce) {
.dnb-accordion__content {
transition-duration: 0.01ms;
}
}
.dnb-accordion__content__inner {
width: 100%;
margin: var(--accordion-content-margin);
padding: var(--accordion-content-padding);
}
.dnb-accordion-group--single-container {
transition: min-height 1s var(--accordion-easing);
}
@media (prefers-reduced-motion: reduce) {
.dnb-accordion-group--single-container {
transition-duration: 0.01ms;
}
}
.dnb-accordion-group--single-container .dnb-accordion {
position: static;
max-width: 60rem;
}
@media screen and (min-width: 40.00625em) {
.dnb-accordion-group--single-container .dnb-accordion__header {
width: 40%;
}
.dnb-accordion-group--single-container .dnb-accordion__content {
margin-left: 1rem;
transition: opacity 1s var(--accordion-easing);
}
}
@media screen and (min-width: 40.00625em) and (prefers-reduced-motion: reduce) {
.dnb-accordion-group--single-container .dnb-accordion__content {
transition-duration: 0.01ms;
}
}
@media screen and (min-width: 40.00625em) {
.dnb-accordion-group--single-container .dnb-accordion__content__inner {
margin-top: 0;
}
}
.dnb-accordion-group--single-container .dnb-accordion-group__children {
max-width: 60rem;
}
@media screen and (min-width: 40.00625em) {
.dnb-accordion-group--single-container .dnb-accordion-group__children {
position: relative;
display: flex;
flex-direction: column;
}
.dnb-accordion-group--single-container .dnb-accordion-group__children .dnb-accordion__content {
position: absolute;
z-index: 10;
top: 0;
right: 0;
width: 60%;
}
}
.dnb-accordion {
/* stylelint-disable-next-line no-descending-specificity */
}
.dnb-accordion > .dnb-accordion__header--no-animation .dnb-accordion__header__icon {
transition: none;
}
.dnb-accordion__variant--outlined {
--accordion-color-text--default: var(
--token-color-text-action
);
--accordion-color-text--hover: var(--token-color-text-action);
--accordion-color-text--after-click: var(
--token-color-text-neutral-inverse
);
--accordion-color-bg--default: var(--token-color-background-neutral);
--accordion-color-bg--after-click: var(
--token-color-background-action
);
--accordion-color-bg--hover: var(--token-color-background-neutral);
--accordion-color-bg--active: var(
--token-color-background-action-pressed-subtle
);
--accordion-color-bg--disabled: var(--token-color-background-neutral);
--accordion-color-border--default: var(
--token-color-stroke-neutral-bold
);
--accordion-color-border--hover: var(
--token-color-stroke-action-hover
);
--accordion-color-border--active: var(
--token-color-stroke-action-pressed
);
--accordion-color-border--after-click: var(
--token-color-stroke-action
);
--accordion-border-width--hover: 0.125rem;
--accordion-border-width--active: 0.125rem;
}
.dnb-accordion__variant--outlined.dnb-accordion--expanded {
--accordion-color-text--default: var(
--token-color-text-neutral-inverse
);
--accordion-color-text--active: var(--token-color-text-action);
--accordion-color-bg--default: var(--token-color-background-action);
--accordion-color-border--default: var(--accordion-color-bg);
}
.dnb-accordion__variant--filled {
--accordion-color-text--default: var(--token-color-text-action);
--accordion-color-text--hover: var(--token-color-text-action-hover);
--accordion-color-text--active: var(
--token-color-text-neutral-inverse
);
--accordion-color-text--disabled: var(
--token-color-text-action-disabled
);
--accordion-color-bg--default: var(
--token-color-decorative-third-muted
);
--accordion-color-bg--hover: var(--token-color-background-neutral);
--accordion-color-bg--active: var(
--token-color-background-action-pressed
);
--accordion-color-border--default: var(
--token-color-decorative-third-muted
);
--accordion-color-border--active: var(
--token-color-stroke-action-pressed
);
--accordion-border-width--default: 0.125rem;
}
.dnb-accordion__variant--outlined, .dnb-accordion__variant--filled {
--accordion-color-text--disabled: var(
--token-color-text-action-disabled
);
--accordion-color-text--focus: var(--token-color-text-action-focus);
--accordion-color-description--default: var(
--token-color-text-neutral-alternative
);
--accordion-color-description--hover: var(
--token-color-text-neutral-alternative
);
--accordion-color-description--active: var(
--token-color-text-neutral-alternative
);
--accordion-color-description--focus: var(
--token-color-text-neutral-alternative
);
--accordion-color-description--after-click: var(
--accordion-color-text
);
--accordion-color-description--disabled: var(
--token-color-text-action-disabled
);
--accordion-color-bg--focus: var(
--token-color-background-action-focus-subtle
);
--accordion-color-border--focus: var(
--token-color-stroke-action-focus
);
--accordion-color-border--disabled: var(
--token-color-stroke-action-disabled
);
--accordion-border-width--focus: 0.25rem;
--accordion-border-inset--default: inset;
--accordion-border-inset--hover: ;
--accordion-border-inset--active: inset;
--accordion-border-inset--focus: ;
}
.dnb-accordion__variant--outlined.dnb-accordion--expanded, .dnb-accordion__variant--filled.dnb-accordion--expanded {
--accordion-color-text--disabled: var(
--token-color-text-neutral-inverse
);
--accordion-color-description--default: var(--accordion-color-text);
--accordion-color-description--disabled: var(
--token-color-text-neutral-inverse
);
--accordion-color-bg--disabled: var(
--token-color-background-action-disabled
);
--accordion-color-border--disabled: var(
--accordion-color-bg--disabled
);
}
.dnb-accordion__variant--tertiary {
display: inline-flex;
border: none;
background: none;
box-shadow: none;
}
.dnb-accordion__tertiary-button {
align-self: flex-start;
}
/*
* Anchor
*
*/
/**
* ATTENTION: This file is auto generated by using "styleFactory".
* Do not change the content!
*
*/
/*
* Anchor mixins
*
*/
button.dnb-anchor {
cursor: pointer;
line-height: calc(var(--line-height-basis) + 0.125rem);
border: none;
background: none;
-webkit-appearance: none;
appearance: none;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor {
--anchor-underline-thickness: 0.0938rem;
--anchor-color: var(--anchor-color--default);
--anchor-icon-color: var(--anchor-icon-color--default);
--anchor-color--default: var(--token-color-text-action);
--anchor-color--hover: var(--token-color-text-action-hover);
--anchor-color--active: var(--token-color-text-action-pressed);
--anchor-icon-color--default: var(--token-color-icon-action);
--anchor-icon-color--hover: var(--token-color-icon-action-hover);
--anchor-icon-color--active: var(--token-color-icon-action-pressed);
--anchor-bg--hover: var(--token-color-background-action-hover-subtle);
--anchor-bg--active: var(--token-color-background-action-pressed-subtle);
--anchor-icon-gutter: 0.25em;
--anchor-icon-separator: '\2060';
--anchor-icon-position: translateY(-0.175em);
display: inline;
padding: 0.05575em 0;
font-size: var(--font-size-basis);
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-color: currentcolor;
text-decoration-thickness: var(--anchor-underline-thickness);
text-underline-offset: 0.25em;
border-radius: var(--token-radius-sm);
}
sup :where(:not(.dnb-anchor--no-style)).dnb-anchor, sub :where(:not(.dnb-anchor--no-style)).dnb-anchor {
padding: 0 0.025em;
}
.dnb-p :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-lead :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--xx-large :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--x-large :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--basis :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--small :where(:not(.dnb-anchor--no-style)).dnb-anchor, .dnb-h--x-small :where(:not(.dnb-anchor--no-style)).dnb-anchor {
font-size: inherit;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor {
color: var(--anchor-color);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
--anchor-color: var(--token-color-text-action-focus);
--anchor-icon-color: var(--token-color-icon-action-focus);
transition: none;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible, .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible.dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:focus-visible {
outline: none;
--border-color: var(--token-color-stroke-action-focus);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color), inset 100vw 100vw 0 0 var(--token-color-background-action-focus-subtle), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--token-color-background-action-focus-subtle), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--token-color-background-action-focus-subtle);
border-color: transparent;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
--anchor-color: var(--anchor-color--hover);
--anchor-icon-color: var(--anchor-icon-color--hover);
box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--hover);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
--anchor-color: var(--anchor-color--hover);
--anchor-icon-color: var(--anchor-icon-color--hover);
box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--hover);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:active {
--anchor-color: var(--anchor-color--active);
--anchor-icon-color: var(--anchor-icon-color--active);
box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--active);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor:active, .dnb-section :where(:not(.dnb-anchor--no-style)).dnb-anchor:active.dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor {
transition: box-shadow 200ms ease-in-out, color 200ms ease-in-out, background 200ms ease-in-out;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon {
display: inline;
vertical-align: middle;
white-space: nowrap;
color: var(--anchor-icon-color);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon svg {
vertical-align: baseline;
transform: scale(2) var(--anchor-icon-position);
font-size: 0.5em;
width: 2em;
height: 1em;
pointer-events: none;
}
: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-separator);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-left .dnb-icon:first-child svg {
margin-right: calc(var(--anchor-icon-gutter) * 2);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child::before {
content: var(--anchor-icon-separator);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor--icon-right .dnb-icon:last-child svg {
margin-left: calc(var(--anchor-icon-gutter) * 2);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor .dnb-icon--default {
font-size: 0.8888888889em;
}
: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;
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--surface-dark {
--anchor-color--default: var(--token-color-text-action-ondark);
--anchor-color--hover: var(--token-color-text-action-ondark);
--anchor-color--active: var(--token-color-text-action-ondark);
--anchor-icon-color--default: var(--token-color-icon-action-ondark);
--anchor-icon-color--hover: var(--token-color-icon-action-hover-ondark);
--anchor-icon-color--active: var(--token-color-icon-action-ondark);
--anchor-bg--hover: var(
--token-color-background-action-hover-subtle-ondark
);
--anchor-bg--active: var(
--token-color-background-action-pressed-subtle-ondark
);
}
:where(:not(.dnb-anchor--no-style)).dnb-anchor.dnb-anchor--disabled, :where(:not(.dnb-anchor--no-style)).dnb-anchor[aria-disabled=true], :where(:not(.dnb-anchor--no-style)).dnb-anchor[disabled] {
--anchor-color: var(--token-color-text-action-disabled);
--anchor-icon-color: var(--token-color-icon-action-disabled);
}
:not(.dnb-anchor--no-style) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
:not(.dnb-anchor--no-style).dnb-anchor {
--anchor-underline-thickness: 0.0938rem;
--anchor-color: var(--anchor-color--default);
--anchor-icon-color: var(--anchor-icon-color--default);
--anchor-color--default: var(--token-color-text-action);
--anchor-color--hover: var(--token-color-text-action-hover);
--anchor-color--active: var(--token-color-text-action-pressed);
--anchor-icon-color--default: var(--token-color-icon-action);
--anchor-icon-color--hover: var(--token-color-icon-action-hover);
--anchor-icon-color--active: var(--token-color-icon-action-pressed);
--anchor-bg--hover: var(--token-color-background-action-hover-subtle);
--anchor-bg--active: var(--token-color-background-action-pressed-subtle);
--anchor-icon-gutter: 0.25em;
--anchor-icon-separator: '\2060';
--anchor-icon-position: translateY(-0.175em);
display: inline;
padding: 0.05575em 0;
font-size: var(--font-size-basis);
-webkit-text-decoration: underline;
text-decoration: underline;
text-decoration-color: currentcolor;
text-decoration-thickness: var(--anchor-underline-thickness);
text-underline-offset: 0.25em;
border-radius: var(--token-radius-sm);
}
sup :not(.dnb-anchor--no-style).dnb-anchor, sub :not(.dnb-anchor--no-style).dnb-anchor {
padding: 0 0.025em;
}
.dnb-p :not(.dnb-anchor--no-style).dnb-anchor, .dnb-lead :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--xx-large :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--x-large :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--basis :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--small :not(.dnb-anchor--no-style).dnb-anchor, .dnb-h--x-small :not(.dnb-anchor--no-style).dnb-anchor {
font-size: inherit;
}
:not(.dnb-anchor--no-style).dnb-anchor {
color: var(--anchor-color);
}
:not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
--anchor-color: var(--token-color-text-action-focus);
--anchor-icon-color: var(--token-color-icon-action-focus);
transition: none;
}
:not(.dnb-anchor--no-style).dnb-anchor:focus-visible, .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:focus-visible.dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
:not(.dnb-anchor--no-style).dnb-anchor:focus-visible {
outline: none;
--border-color: var(--token-color-stroke-action-focus);
--border-width: var(--focus-ring-width);
box-shadow: 0 0 0 var(--border-width) var(--border-color), inset 100vw 100vw 0 0 var(--token-color-background-action-focus-subtle), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--token-color-background-action-focus-subtle), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--token-color-background-action-focus-subtle);
border-color: transparent;
}
:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)) {
--anchor-color: var(--anchor-color--hover);
--anchor-icon-color: var(--anchor-icon-color--hover);
box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--hover);
}
:not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)), .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:where(:not(.dnb-anchor--no-hover)).dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
/* stylelint-disable-next-line scss/operator-no-unspaced */
}
@supports not (selector(*:where(*))) {
:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover) {
--anchor-color: var(--anchor-color--hover);
--anchor-icon-color: var(--anchor-icon-color--hover);
box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--hover), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--hover), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--hover);
}
:not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover), .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:hover:not(.dnb-anchor--no-hover).dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
}
:not(.dnb-anchor--no-style).dnb-anchor:active {
--anchor-color: var(--anchor-color--active);
--anchor-icon-color: var(--anchor-icon-color--active);
box-shadow: inset 100vw 100vw 0 0 var(--anchor-bg--active), calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 var(--anchor-bg--active), var(--anchor-background-gutter-right, 0.125rem) 0 0 0 var(--anchor-bg--active);
}
:not(.dnb-anchor--no-style).dnb-anchor:active, .dnb-section :not(.dnb-anchor--no-style).dnb-anchor:active.dnb-anchor {
-webkit-text-decoration: none;
text-decoration: none;
}
:not(.dnb-anchor--no-style).dnb-anchor {
transition: box-shadow 200ms ease-in-out, color 200ms ease-in-out, background 200ms ease-in-out;
}
:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon {
display: inline;
vertical-align: middle;
white-space: nowrap;
color: var(--anchor-icon-color);
}
:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon svg {
vertical-align: baseline;
transform: scale(2) var(--anchor-icon-position);
font-size: 0.5em;
width: 2em;
height: 1em;
pointer-events: none;
}
: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-separator);
}
:not(.dnb-anchor--no-style).dnb-anchor--icon-left .dnb-icon:first-child svg {
margin-right: calc(var(--anchor-icon-gutter) * 2);
}
:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child::before {
content: var(--anchor-icon-separator);
}
:not(.dnb-anchor--no-style).dnb-anchor--icon-right .dnb-icon:last-child svg {
margin-left: calc(var(--anchor-icon-gutter) * 2);
}
:not(.dnb-anchor--no-style).dnb-anchor .dnb-icon--default {
font-size: 0.8888888889em;
}
: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;
}
:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--surface-dark {
--anchor-color--default: var(--token-color-text-action-ondark);
--anchor-color--hover: var(--token-color-text-action-ondark);
--anchor-color--active: var(--token-color-text-action-ondark);
--anchor-icon-color--default: var(--token-color-icon-action-ondark);
--anchor-icon-color--hover: var(--token-color-icon-action-hover-ondark);
--anchor-icon-color--active: var(--token-color-icon-action-ondark);
--anchor-bg--hover: var(
--token-color-background-action-hover-subtle-ondark
);
--anchor-bg--active: var(
--token-color-background-action-pressed-subtle-ondark
);
}
:not(.dnb-anchor--no-style).dnb-anchor.dnb-anchor--disabled, :not(.dnb-anchor--no-style).dnb-anchor[aria-disabled=true], :not(.dnb-anchor--no-style).dnb-anchor[disabled] {
--anchor-color: var(--token-color-text-action-disabled);
--anchor-icon-color: var(--token-color-icon-action-disabled);
}
}
.dnb-anchor--hover {
--anchor-color: var(--anchor-color--hov