@dnb/eufemia/components/button/style/themes/dnb-button-theme-sbanken.min.css

DNB Eufemia Design System UI Library

.dnb-button--tertiary{--button-tertiary-focus-left:-0.5rem;--button-tertiary-focus-right:-0.5rem;--button-tertiary-focus-overflow--icon-top:-0.5rem;--button-tertiary-underline-left:var(
    --button-tertiary-underline-overflow
  );--button-tertiary-underline-right:var(
    --button-tertiary-underline-overflow
  );--button-tertiary-underline-overflow:0;--button-tertiary-underline-overflow--icon:calc((var(--button-icon-gutter) + var(--button-icon-size))*-1)}.dnb-button--tertiary .dnb-button__text{position:relative}.dnb-button--tertiary .dnb-button__text:after{background-color:currentcolor;border-radius:.0475rem;bottom:0;bottom:-.0625rem;color:var(--color-sea-green);color:transparent;content:"";height:.095rem;left:0;position:absolute;right:0;transition:color .25s ease-in-out;width:auto;z-index:1}[data-visual-test-wrapper] .dnb-button--tertiary .dnb-button__text:after{transition:none}.dnb-button--tertiary .dnb-button__text:after{left:var(--button-tertiary-underline-left);right:var(--button-tertiary-underline-right)}.dnb-skeleton .dnb-button--tertiary .dnb-button__text:after{content:none}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]){outline:none}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]):before{box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]) .dnb-button__text:after{visibility:hidden}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]) .dnb-button__text:after{visibility:visible}.dnb-button--tertiary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--tertiary:active[disabled]{cursor:not-allowed}.dnb-button--tertiary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){outline:initial}html[data-whatinput=keyboard] .dnb-button--tertiary:active:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]){box-shadow:none}html[data-whatintent=touch] .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html[data-whatintent=touch] html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{opacity:1;transition:none;visibility:visible}html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after,html:not([data-whatintent=touch]) html:not([data-whatintent=touch]) .dnb-button--tertiary:active:not([disabled]) .dnb-button__text:after{visibility:hidden}.dnb-button--tertiary.dnb-button--has-text{--button-padding-left:0;--button-padding-right:0;--button-icon-margin-top:calc((var(--button-height) - var(--button-icon-size))/2)}.dnb-button--tertiary.dnb-button--has-text .dnb-button__icon{align-self:flex-start}.dnb-button--tertiary.dnb-button--icon-position-top{--button-tertiary-focus-left:var(
    --button-tertiary-focus-overflow--icon-top
  );--button-tertiary-focus-right:var(
    --button-tertiary-focus-overflow--icon-top
  );border-radius:.5rem;flex-direction:column;vertical-align:middle}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text{--button-icon-margin-top:0.5rem}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--has-text .dnb-button__icon{align-self:center}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__text{font-size:var(--font-size-x-small);margin-bottom:.25rem;margin-top:0}.dnb-button--tertiary.dnb-button--icon-position-top.dnb-button--size-large .dnb-button__text{font-size:var(--font-size-small)}.dnb-button--tertiary.dnb-button--icon-position-top .dnb-button__alignment{height:0;order:3}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-size-large,.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-size-medium{--button-tertiary-underline-overflow--icon:var(
    --button-tertiary-underline-overflow
  )}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-left{--button-tertiary-focus-right:-1rem;--button-tertiary-underline-left:var(
    --button-tertiary-underline-overflow--icon
  )}.dnb-button--tertiary.dnb-button--has-icon.dnb-button--has-text.dnb-button--icon-position-right{--button-tertiary-focus-left:-1rem;--button-tertiary-underline-right:var(
    --button-tertiary-underline-overflow--icon
  )}.dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text){--button-tertiary-focus-left:0;--button-tertiary-focus-right:0}html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__text:after{visibility:hidden}.dnb-button{--button-background--focus:var(--sb-color-blue-light-3);--button-border-radius--control-button:3rem;--button-padding--large:1.5rem;--button-primary-shadow:var(--sb-shadow-medium);--button-primary-shadow--hover:var(--sb-shadow-medium);--button-primary-color:var(--sb-color-white);--button-primary-color--hover:var(--sb-color-purple-alternative);--button-primary-color--active:var(--sb-color-white);--button-primary-color--disabled:var(--sb-color-gray-dark-2);--button-primary-background:var(--sb-color-purple-alternative);--button-primary-background--hover:var(--sb-color-green);--button-primary-background--active:var(--sb-color-purple-alternative);--button-primary-background--disabled:var(--sb-color-gray-light);--button-primary-border--hover:transparent;--button-secondary-color:var(--sb-color-purple-alternative);--button-secondary-color--hover:var(--sb-color-purple-alternative);--button-secondary-color--active:var(--sb-color-purple-alternative);--button-secondary-color--disabled:var(--sb-color-gray-dark);--button-secondary-background:var(--sb-color-white);--button-secondary-background--hover:var(--sb-color-green);--button-secondary-background--active:var(--sb-color-white);--button-secondary-border:var(--button-secondary-border--default);--button-secondary-border--default:var(--sb-color-purple-alternative);--button-secondary-border--hover:var(
    --button-secondary-border--default
  );--button-secondary-border--active:var(
    --button-secondary-border--default
  );--button-secondary-border--disabled:var(--sb-color-gray-light);--button-tertiary-color:var(--sb-color-violet);--button-tertiary-border:var(--sb-color-violet);border:none}.dnb-button--has-text.dnb-button--size-large{--button-padding-icon:1rem}.dnb-button--primary{background-color:var(--button-primary-background);box-shadow:var(--button-primary-shadow);color:var(--button-primary-color)}html:not([data-whatintent=touch]) .dnb-button--primary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--primary:hover:not([disabled]){--border-color:var(--button-primary-border--hover);--border-width:0.0625rem;background-color:var(--button-primary-background--hover);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),var(--button-primary-shadow--hover);color:var(--button-primary-color--hover)}.dnb-button--primary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--primary:active[disabled]{cursor:not-allowed}.dnb-button--primary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--primary:active:not([disabled]){background-color:var(--button-primary-background--active);color:var(--button-primary-color--active)}.dnb-button--secondary{--border-color:var(--button-secondary-border);--border-width:0.0625rem;background-color:var(--button-secondary-background);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--button-secondary-color)}html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]){--button-secondary-border:var(--button-secondary-border--hover);background-color:var(--button-secondary-background--hover);color:var(--button-secondary-color--hover)}.dnb-button--secondary:active[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled]{cursor:not-allowed}.dnb-button--secondary:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]){--button-secondary-border:var(--button-secondary-border--active);background-color:var(--button-secondary-background--active);color:var(--button-secondary-color--active)}.dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after,.dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before{border:none;box-shadow:none}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:not(.dnb-button--has-text).dnb-button--control-before:hover:not([disabled]){border:none;box-shadow:none}html:not([data-whatintent=touch]) .dnb-button--primary:focus-visible[disabled],html:not([data-whatintent=touch]) .dnb-button--secondary:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--primary:focus-visible:not([disabled]),html:not([data-whatintent=touch]) .dnb-button--secondary:focus-visible:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--button-background--focus);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),var(--sb-shadow-medium);color:var(--sb-color-blue-dark);outline:none}.dnb-button[disabled]{--button-primary-shadow:0 0 transparent;--button-primary-color:var(--button-primary-color--disabled);--button-primary-background:var(
    --button-primary-background--disabled
  );--button-secondary-color:var(--button-secondary-color--disabled);--button-secondary-border--default:var(
    --button-secondary-border--disabled
  )}.dnb-button:not([disabled]).dnb-button__status--error{--button-primary-shadow--hover:0 0 transparent;--button-primary-color:var(--sb-color-white);--button-primary-color--hover:var(--sb-color-red);--button-primary-color--active:var(--sb-color-white);--button-primary-background:var(--sb-color-red);--button-primary-background--hover:var(--sb-color-magenta-light-3);--button-primary-background--active:var(--sb-color-red);--button-primary-border--hover:var(--sb-color-red);--button-secondary-color:var(--sb-color-red);--button-secondary-color--hover:var(--sb-color-red);--button-secondary-color--active:var(--sb-color-red);--button-secondary-background--hover:var(--sb-color-magenta-light-3);--button-secondary-border--default:var(--sb-color-red);--button-tertiary-color:var(--sb-color-red);--button-tertiary-border:var(--sb-color-red)}.dnb-button--tertiary{--button-tertiary-focus-overflow--icon-top:0;--button-tertiary-underline-overflow:-0.5rem;--button-tertiary-underline-overflow--icon:calc((var(--button-icon-gutter) + var(--button-icon-size) - var(
            --button-tertiary-underline-overflow
          ))*-1);--button-tertiary-underline-bottom:-0.5rem;--button-tertiary-text-bottom--icon:0.5rem;--button-tertiary-text-top--icon:0;background-color:transparent;color:var(--button-tertiary-color)}.dnb-button--tertiary .dnb-button__text:after{bottom:var(--button-tertiary-underline-bottom);height:.0625rem}.dnb-button--tertiary.dnb-button--has-text.dnb-button--icon-position-top{--button-padding-left:calc(var(--button-tertiary-underline-overflow)*-1);--button-padding-right:calc(var(--button-tertiary-underline-overflow)*-1)}.dnb-button--tertiary.dnb-button--has-text.dnb-button--icon-position-top .dnb-button__text{font-size:var(--button-font-size);margin-bottom:var(--button-tertiary-text-bottom--icon);margin-top:var(--button-tertiary-text-top--icon)}.dnb-button--tertiary.dnb-button--size-large{--button-tertiary-underline-bottom:-0.75rem;--button-tertiary-underline-overflow:-1.5rem;--button-tertiary-text-bottom--icon:0.75rem;--button-tertiary-text-top--icon:0.25rem}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):not(:focus-visible) .dnb-button__text:after{color:var(--button-tertiary-border);transition:none}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text){--focus-ring-width:0.0625rem;--sb-shadow-medium:0 0 transparent;color:var(--sb-color-blue-dark)}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--button-background--focus);border-color:transparent;border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),var(--sb-shadow-medium);content:"";height:inherit;left:var(--button-tertiary-focus-left);outline:none;position:absolute;right:var(--button-tertiary-focus-right);top:0;z-index:1}html:not([data-whatintent=touch]) .dnb-button--tertiary:hover:not([disabled]):not(.dnb-button--has-text)>*{z-index:2}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]){color:var(--sb-color-blue-dark)}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]):before{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;border-radius:inherit;bottom:0;box-shadow:inset 0 0 0 var(--border-width) var(--border-color),var(--sb-shadow-medium);content:"";height:inherit;left:var(--button-tertiary-focus-left);outline:none;position:absolute;right:var(--button-tertiary-focus-right);top:0;z-index:1}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled]):before{background-color:var(--button-background--focus)}html:not([data-whatintent=touch]) .dnb-button--tertiary:focus-visible:not([disabled])>*{z-index:2}.dnb-button--tertiary[disabled]{color:var(--sb-color-gray-dark)}.dnb-button--on-dark-background{--button-primary-color:var(--sb-color-text);--button-primary-color--hover:var(--sb-color-purple-alternative);--button-primary-color--active:var(--sb-color-purple-alternative);--button-primary-background:var(--sb-color-green);--button-primary-background--hover:var(--sb-color-violet-light-2);--button-primary-background--active:var(--sb-color-violet-light-3);--button-secondary-color:var(--sb-color-white);--button-secondary-color--hover:var(--sb-color-purple-alternative);--button-secondary-color--active:var(--sb-color-purple-alternative);--button-secondary-background:transparent;--button-secondary-background--hover:var(--sb-color-violet-light-2);--button-secondary-background--active:var(--sb-color-violet-light-3);--button-secondary-border--default:var(--sb-color-green);--button-secondary-border--hover:var(--sb-color-violet-light);--button-secondary-border--active:var(--sb-color-violet-light);--button-tertiary-color:var(--sb-color-white);--button-tertiary-border:var(--sb-color-green)}