@dnb/eufemia

:root{--button-icon-size:1rem;--button-height:2.5rem}.dnb-button{--button-color-text:var(--button-color-text--default);--button-color-icon:var(--button-color-icon--default);--button-color-bg:var(--button-color-bg--default);--button-color-border:var(--button-color-border--default);--button-color-underline:var(--button-color-underline--default);--button-border-inset:var(--button-border-inset--default);--button-border-inset--default:inset;--button-border-inset--hover: ;--button-border-inset--focus: ;--button-font-size:var(--font-size-basis);--button-font-size-small:var(--font-size-small);--button-icon-size--small:0.75rem;--button-icon-size--medium:1.5rem;--button-icon-size--large:2rem;--button-icon-gutter:0.5rem;--button-width:2.5rem;--button-width--small:1.5rem;--button-height--small:1.5rem;--button-width--medium:2rem;--button-height--medium:2rem;--button-width--large:3rem;--button-height--large:3rem;--button-border-width:var(--button-border-width--default);--button-border-width--default:0.0625rem;--button-border-width--hover:0.125rem;--button-border-width--focus:0.1875rem;--button-border-radius:calc(var(--button-height)/2);--button-border-radius--control-button:0.25rem;--button-padding-left:0;--button-padding-right:0;--button-padding-icon:1rem;--button-padding--default:1.5rem;--button-padding--small:1rem;--button-padding--medium:1rem;--button-padding--large:2rem;--button-icon-margin-top:0;--button-icon-margin-left:0;--button-icon-margin-right:0;cursor:pointer;position:relative;white-space:nowrap}.dnb-button--wrap{overflow-wrap:break-word;white-space:normal}.dnb-button__icon{margin:var(--button-icon-margin-top) var(--button-icon-margin-right) 0 var(--button-icon-margin-left)}.dnb-button--primary,.dnb-button--secondary,.dnb-button--tertiary{background-color:var(--button-color-bg,var(--button-color-bg--default));color:var(--button-color-text,var(--button-color-text--default))}.dnb-button--primary .dnb-button__icon,.dnb-button--secondary .dnb-button__icon,.dnb-button--tertiary .dnb-button__icon{color:var(--button-color-icon,var(--button-color-icon--default))}html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]){--button-color-bg:var(--button-color-bg--hover);--button-color-border:var(--button-color-border--hover);--button-color-icon:var(--button-color-icon--hover);--button-color-text:var(--button-color-text--hover);--button-color-underline:var(--button-color-underline--hover);--button-border-inset:var(--button-border-inset--hover);--button-border-width:var(--button-border-width--hover);--button-input-separator-color:var( --button-input-separator-color--hover )}.dnb-button--primary:active[disabled],.dnb-button--secondary:active[disabled],.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--primary:active:not([disabled]),.dnb-button--secondary:active:not([disabled]),.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){--button-color-bg:var(--button-color-bg--active);--button-color-border:var(--button-color-border--active);--button-color-icon:var(--button-color-icon--active);--button-color-text:var(--button-color-text--active);--button-color-underline:var(--button-color-underline--active);--button-border-inset:var(--button-border-inset--active);--button-border-width:var(--button-border-width--active);--button-input-separator-color:var( --button-input-separator-color--active )}html:not([data-whatinput=touch]) .dnb-button--primary:focus-visible[disabled],html:not([data-whatinput=touch]) .dnb-button--secondary:focus-visible[disabled],html:not([data-whatinput=touch]) .dnb-button--tertiary:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatinput=touch]) .dnb-button--primary:focus-visible:not([disabled]),html:not([data-whatinput=touch]) .dnb-button--secondary:focus-visible:not([disabled]),html:not([data-whatinput=touch]) .dnb-button--tertiary:focus-visible:not([disabled]){--button-color-bg:var(--token-color-background-action-focus-subtle);--button-color-border:var(--token-color-stroke-action-focus);--button-color-icon:var(--token-color-icon-action-focus);--button-color-text:var(--token-color-text-action-focus);--button-color-underline:var(--button-color-underline--focus);--button-border-inset:var(--button-border-inset--focus);--button-border-width:var(--button-border-width--focus);--button-input-separator-color:var( --button-input-separator-color--focus );outline:none}.dnb-button--primary[disabled],.dnb-button--secondary[disabled],.dnb-button--tertiary[disabled]{--button-color-bg:var(--button-color-bg--disabled);--button-color-border:var(--button-color-border--disabled);--button-color-icon:var(--button-color-icon--disabled);--button-color-text:var(--button-color-text--disabled);--button-input-separator-color:var( --button-input-separator-color--disabled )}.dnb-button--primary,.dnb-button--secondary,.dnb-button--tertiary:before{--border-color:var(--button-color-border,var(--button-color-border--default));--border-width:var(--button-border-width,var(--button-border-width--default));border-color:transparent;box-shadow:var(--button-border-inset,var(--button-border-inset--default)) 0 0 0 var(--border-width) var(--border-color)}.dnb-button--primary{--button-color-bg--default:var( --token-color-component-button-background-action );--button-color-bg--hover:var( --token-color-component-button-background-action-hover );--button-color-bg--active:var( --token-color-background-action-pressed );--button-color-bg--disabled:var( --token-color-background-action-disabled );--button-color-border--hover:var( --token-color-component-button-stroke-action-hover );--button-color-icon--default:var( --token-color-component-button-icon-neutral );--button-color-icon--disabled:var( --token-color-component-button-icon-action-disabled );--button-color-text--default:var( --token-color-component-button-text-neutral );--button-color-text--disabled:var( --token-color-component-button-text-action-disabled )}.dnb-button--primary.dnb-button--surface-dark{--button-color-bg--default:var( --token-color-background-action-ondark );--button-color-bg--hover:var( --token-color-background-action-hover-ondark );--button-color-bg--active:var( --token-color-background-action-pressed-ondark );--button-color-bg--disabled:var( --token-color-background-action-disabled-ondark );--button-color-border--hover:var( --token-color-stroke-action-hover-ondark );--button-color-icon--default:var( --token-color-component-button-icon-neutral-ondark );--button-color-icon--disabled:var( --token-color-icon-action-disabled-ondark );--button-color-text--default:var( --token-color-component-button-text-neutral-ondark );--button-color-text--disabled:var( --token-color-text-action-disabled-ondark )}.dnb-button--primary.dnb-button__status--error{--button-color-bg--default:var( --token-color-component-button-background-action-destructive );--button-color-bg--hover:var( --token-color-component-button-background-action-destructive-hover );--button-color-bg--active:var( --token-color-component-button-background-action-destructive-pressed );--button-color-border--hover:var( --token-color-component-button-stroke-action-destructive-hover );--button-color-icon--default:var( --token-color-component-button-icon-neutral-destructive );--button-color-text--default:var( --token-color-component-button-text-neutral-destructive )}.dnb-button--secondary{--button-color-bg--default:var(--token-color-background-neutral);--button-color-bg--hover:var( --token-color-background-action-hover-subtle );--button-color-bg--active:var( --token-color-background-action-pressed-subtle );--button-color-bg--disabled:var(--token-color-background-neutral);--button-color-border--default:var( --token-color-component-button-stroke-action );--button-color-border--hover:var( --token-color-component-button-stroke-action-hover );--button-color-border--active:var( --token-color-stroke-action-pressed );--button-color-border--disabled:var( --token-color-stroke-action-disabled );--button-color-icon--default:var( --token-color-component-button-icon-action );--button-color-icon--hover:var( --token-color-component-button-icon-action-hover );--button-color-icon--active:var(--token-color-icon-action-pressed);--button-color-icon--disabled:var(--token-color-icon-action-disabled);--button-color-text--default:var( --token-color-component-button-text-action );--button-color-text--hover:var( --token-color-component-button-text-action-hover );--button-color-text--active:var(--token-color-text-action-pressed);--button-color-text--disabled:var(--token-color-text-action-disabled)}.dnb-button--secondary.dnb-button--icon-only{--button-color-border--default:var(--token-color-stroke-action);--button-color-border--hover:var(--token-color-stroke-action-hover);--button-color-border--active:transparent;--button-color-icon--default:var(--token-color-icon-action);--button-color-icon--hover:var(--token-color-icon-action-hover)}.dnb-button--secondary.dnb-button--surface-dark{--button-color-bg--default:transparent;--button-color-bg--hover:var( --token-color-background-action-hover-subtle-ondark );--button-color-bg--active:var( --token-color-background-action-pressed-subtle-ondark );--button-color-bg--disabled:transparent;--button-color-border--default:var( --token-color-stroke-action-ondark );--button-color-border--hover:var( --token-color-stroke-action-hover-ondark );--button-color-border--active:var( --token-color-stroke-action-pressed-ondark );--button-color-border--disabled:var( --token-color-stroke-action-disabled-ondark );--button-color-icon--default:var(--token-color-icon-action-ondark);--button-color-icon--hover:var( --token-color-icon-action-hover-ondark );--button-color-icon--active:var( --token-color-icon-action-pressed-ondark );--button-color-icon--disabled:var( --token-color-icon-action-disabled-ondark );--button-color-text--default:var(--token-color-text-action-ondark);--button-color-text--hover:var( --token-color-text-action-hover-ondark );--button-color-text--active:var( --token-color-text-action-pressed-ondark );--button-color-text--disabled:var( --token-color-text-action-disabled-ondark )}.dnb-button--secondary.dnb-button__status--error{--button-color-bg--default:var(--token-color-background-neutral);--button-color-bg--hover:var( --token-color-component-button-background-action-destructive-hover-subtle );--button-color-bg--active:var( --token-color-component-button-background-action-destructive-pressed-subtle );--button-color-border--default:var( --token-color-component-button-stroke-action-destructive );--button-color-border--hover:var( --token-color-component-button-stroke-action-destructive-hover );--button-color-border--active:var( --token-color-component-button-stroke-action-destructive-pressed );--button-color-icon--default:var( --token-color-component-button-icon-action-destructive );--button-color-icon--hover:var( --token-color-component-button-icon-action-destructive-hover );--button-color-icon--active:var( --token-color-component-button-icon-action-destructive-pressed );--button-color-text--default:var( --token-color-component-button-text-action-destructive );--button-color-text--hover:var( --token-color-component-button-text-action-destructive-hover );--button-color-text--active:var( --token-color-component-button-text-action-destructive-pressed )}.dnb-button--tertiary>*{z-index:2}.dnb-button--tertiary:before{background-color:inherit;border-radius:inherit;bottom:0;content:"";height:inherit;left:var(--button-tertiary-focus-left);position:absolute;right:var(--button-tertiary-focus-right);top:0;z-index:1}.dnb-skeleton .dnb-button--tertiary:before{content:none}.dnb-button--tertiary{--button-color-icon--default:var(--token-color-icon-action);--button-color-icon--hover:var(--token-color-icon-action-hover);--button-color-icon--active:var(--token-color-icon-action-pressed);--button-color-icon--disabled:var(--token-color-icon-action-disabled);--button-color-text--default:var(--token-color-text-action);--button-color-text--hover:var(--token-color-text-action-hover);--button-color-text--active:var(--token-color-text-action-pressed);--button-color-text--disabled:var(--token-color-text-action-disabled);--button-color-underline--default:transparent;--button-color-underline--hover:var( --token-color-background-action-hover )}.dnb-button--tertiary.dnb-button--icon-only{--button-color-bg--hover:var( --token-color-background-action-hover-subtle );--button-color-bg--active:var( --token-color-background-action-pressed-subtle )}.dnb-button--tertiary.dnb-button--surface-dark{--button-color-icon--default:var(--token-color-icon-action-ondark);--button-color-icon--hover:var( --token-color-icon-action-hover-ondark );--button-color-icon--active:var( --token-color-icon-action-pressed-ondark );--button-color-icon--disabled:var( --token-color-icon-action-disabled-ondark );--button-color-text--default:var(--token-color-text-action-ondark);--button-color-text--hover:var( --token-color-text-action-hover-ondark );--button-color-text--active:var( --token-color-text-action-pressed-ondark );--button-color-text--disabled:var( --token-color-text-action-disabled-ondark );--button-color-underline--hover:var( --token-color-icon-action-hover-ondark )}.dnb-button--tertiary.dnb-button__status--error{--button-color-icon--default:var( --token-color-component-button-icon-action-destructive );--button-color-icon--hover:var( --token-color-component-button-icon-action-destructive-hover );--button-color-icon--active:var( --token-color-component-button-icon-action-destructive-pressed );--button-color-text--default:var( --token-color-component-button-text-action-destructive );--button-color-text--hover:var( --token-color-component-button-text-action-destructive-hover );--button-color-text--active:var( --token-color-component-button-text-action-destructive-pressed );--button-color-underline--hover:var( --token-color-component-button-background-action-destructive-hover )}.dnb-button--icon-only.dnb-button--selected{--button-color-bg--default:var( --token-color-background-selected-subtle );--button-color-border--default:var(--token-color-stroke-selected);--button-color-icon--default:var(--token-color-icon-selected);--button-border-width--default:0.125rem;--button-border-inset--default: }.dnb-button--icon-only.dnb-button--input-button{--button-color-bg--default:transparent;--button-color-bg--hover:var(--token-color-background-action);--button-color-bg--active:var( --token-color-background-action-pressed );--button-color-bg--disabled:var( --token-color-background-neutral-subtle );--button-color-border--default:transparent;--button-color-border--hover:transparent;--button-color-border--active:transparent;--button-border-inset--focus:inset;--button-color-icon--hover:var( --token-color-component-button-icon-neutral );--button-color-icon--active:var( --token-color-component-button-icon-neutral );--button-color-icon--disabled:var( --token-color-icon-action-disabled );--button-color-text--hover:var( --token-color-component-button-text-neutral );--button-color-text--active:var( --token-color-component-button-text-neutral );--button-color-text--disabled:var( --token-color-component-button-text-action-disabled )}.dnb-button--icon-only.dnb-button--input-button.dnb-button__status--error{--button-color-bg--hover:var(--token-color-background-error);--button-color-bg--active:var( --token-color-component-button-background-action-destructive-pressed );--button-color-icon--hover:var( --token-color-component-button-icon-neutral-destructive );--button-color-icon--active:var( --token-color-component-button-icon-neutral-destructive );--button-color-text--hover:var( --token-color-component-button-text-neutral-destructive );--button-color-text--active:var( --token-color-component-button-text-neutral-destructive )}.dnb-button--icon-only.dnb-button--input-button{--button-input-separator-color--default:var(--button-color-text);--button-input-separator-color--hover:var(--button-color-bg);--button-input-separator-color--active:var(--button-color-bg);--button-input-separator-color--focus:var(--button-color-border);--button-input-separator-color--disabled:var( --token-color-background-action-disabled )}.dnb-button--icon-only.dnb-button--input-button:after{background-color:var(--button-input-separator-color,var(--button-input-separator-color--default));bottom:0;content:"";left:0;position:absolute;top:0;width:var(--input-border-width)}.dnb-button--icon-only.dnb-button--input-button:active[disabled],html:not([data-whatintent=touch]) .dnb-button--icon-only.dnb-button--input-button:active[disabled]{cursor:not-allowed}.dnb-button--icon-only.dnb-button--input-button:active:not([disabled]):after,html:not([data-whatintent=touch]) .dnb-button--icon-only.dnb-button--input-button:active:not([disabled]):after{bottom:var(--input-border-width);top:var(--input-border-width)}.dnb-button{align-items:center;border:none;border-radius:var(--button-border-radius);display:inline-flex;font-size:var(--font-size-small);font-weight:var(--font-weight-regular);height:auto;justify-content:center;padding:0 var(--button-padding-right) 0 var(--button-padding-left);text-align:left;-webkit-text-decoration:none;text-decoration:none;width:var(--button-width)}.dnb-button,.dnb-core-style .dnb-button{line-height:var(--button-height)}.dnb-button__text{color:inherit;font-size:var(--button-font-size);line-height:var(--line-height-basis);margin:.5rem 0;transform:translateY(-.03125rem)}.dnb-button__text [data-os=linux]{transform:translateY(-.035rem)}.dnb-button__alignment{display:inline-block;width:0}.dnb-button__bounding{background-color:transparent;border-radius:var(--button-border-radius);bottom:0;left:0;position:absolute;right:0;top:0;transform:scale(1.1,1.4)}.dnb-button--size-small{--button-height:var(--button-height--small);font-size:var(--button-font-size-small);width:var(--button-width--small)}.dnb-button--size-small .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-small{--button-padding-left:var(--button-padding--small);--button-padding-right:var(--button-padding--small)}.dnb-button--size-medium{--button-height:var(--button-height--medium);width:var(--button-width--medium)}.dnb-button--size-medium .dnb-button__text{margin:0}.dnb-button--has-text.dnb-button--size-medium{--button-padding-left:var(--button-padding--medium);--button-padding-right:var(--button-padding--medium)}.dnb-button--control-after.dnb-button--size-medium,.dnb-button--control-before.dnb-button--size-medium{line-height:var(--button-height)}.dnb-button--size-large{--button-height:var(--button-height--large);--button-padding-icon:1.5rem;width:var(--button-width--large)}.dnb-button--has-text.dnb-button--size-large{--button-padding-left:var(--button-padding--large);--button-padding-right:var(--button-padding--large)}.dnb-button--has-text{--button-padding-left:var(--button-padding--default);--button-padding-right:var(--button-padding--default);width:auto}.dnb-button--has-text.dnb-button--icon-position-left{--button-padding-left:var(--button-padding-icon);--button-icon-margin-right:var(--button-icon-gutter)}.dnb-button--has-text.dnb-button--icon-position-right{--button-padding-right:var(--button-padding-icon);--button-icon-margin-left:var(--button-icon-gutter)}.dnb-button--icon-size-small{--button-icon-size:var(--button-icon-size--small)}.dnb-button--icon-size-medium{--button-icon-size:var(--button-icon-size--medium)}.dnb-button--icon-size-large{--button-icon-size:var(--button-icon-size--large)}.dnb-button--has-text.dnb-button--has-icon .dnb-button__icon{order:2}.dnb-button--has-text.dnb-button--has-icon .dnb-button__text{order:1}.dnb-button:not(.dnb-button--has-text) .dnb-button__icon{width:inherit}.dnb-button__icon.dnb-icon svg:not([width]):not([height]){height:var(--button-icon-size);width:var(--button-icon-size)}[href]>.dnb-button__icon.dnb-icon{line-height:var(--button-font-size)}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__icon,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__icon{order:1}.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-left .dnb-button__text,.dnb-button--has-text.dnb-button--has-icon.dnb-button--icon-position-top .dnb-button__text{order:2}.dnb-button--stretch{width:100%}.dnb-button--control-before{border-radius:var(--button-border-radius--control-button) 0 0 var(--button-border-radius--control-button)}.dnb-button--control-after{border-radius:0 var(--button-border-radius--control-button) var(--button-border-radius--control-button) 0}.dnb-button[type=button],.dnb-button[type=reset],.dnb-button[type=submit]{appearance:none;-moz-appearance:none;-webkit-appearance:none}.dnb-button[disabled]{cursor:not-allowed;outline:none}.dnb-button+.dnb-form-status{margin-top:.5rem}button.dnb-button::-moz-focus-inner{border:none}