/*
* Button theme
*
*/
/**
 * This file is only used to make themes independent
 * so that they can get imported individually, without the core styles
 *
 */
/*
 * Utilities
 */
/*
* Button mixins
*
*/
:root {
  --button-border-width: 0px;
  /* stylelint-disable-line */ }

.dnb-button {
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none; }
  .dnb-button--secondary:not([disabled]):not(.dnb-button--has-text) .dnb-button__icon {
    color: #14555a;
    color: var(--color-emerald-green); }

.dnb-button--primary {
  color: #fff;
  color: var(--color-white);
  background-color: #008484;
  background-color: var(--color-sea-green-alt); }
  :not([dnb-is-touch]) .dnb-button--primary:hover[disabled] {
    cursor: not-allowed; }
  :not([dnb-is-touch]) .dnb-button--primary:hover:not([disabled]) {
    color: #007272;
    color: var(--color-sea-green);
    background-color: #fff;
    background-color: var(--color-white);
    -webkit-box-shadow: 0 0 0 0.125rem #14555a;
            box-shadow: 0 0 0 0.125rem #14555a;
    -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
            box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
    border-color: transparent; }
  :not([dnb-is-touch]) .dnb-button--primary:focus[disabled] {
    cursor: not-allowed; }
  :not([dnb-is-touch]) .dnb-button--primary:focus:not([disabled]) {
    color: #007272;
    color: var(--color-sea-green);
    background-color: #fff;
    background-color: var(--color-white);
    outline: none; }
    html[data-whatinput='keyboard'] :not([dnb-is-touch]) .dnb-button--primary:focus:not([disabled]) {
      -webkit-box-shadow: inset 0 0 0 0.125rem #14555a;
              box-shadow: inset 0 0 0 0.125rem #14555a;
      -webkit-box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
              box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
      border-color: transparent; }
  :not([dnb-is-touch]) .dnb-button--primary:active[disabled] {
    cursor: not-allowed; }
  :not([dnb-is-touch]) .dnb-button--primary:active:not([disabled]) {
    color: #007272;
    color: var(--color-sea-green);
    background-color: #d2f0e9;
    background-color: var(--color-mint-green-50);
    -webkit-box-shadow: 0 0 0 0.0625rem transparent;
            box-shadow: 0 0 0 0.0625rem transparent;
    border-color: transparent; }
  .dnb-button--primary[disabled] {
    color: #fff;
    color: var(--color-white);
    background-color: #b3dada;
    background-color: var(--color-sea-green-alt-30); }

.dnb-button--secondary {
  color: #007272;
  color: var(--color-sea-green);
  background-color: #fff;
  background-color: var(--color-white);
  -webkit-box-shadow: inset 0 0 0 0.0625rem #008484;
          box-shadow: inset 0 0 0 0.0625rem #008484;
  -webkit-box-shadow: inset 0 0 0 0.0625rem var(--color-sea-green-alt);
          box-shadow: inset 0 0 0 0.0625rem var(--color-sea-green-alt);
  border-color: transparent; }
  :not([dnb-is-touch]) .dnb-button--secondary:hover[disabled] {
    cursor: not-allowed; }
  :not([dnb-is-touch]) .dnb-button--secondary:hover:not([disabled]) {
    color: #007272;
    color: var(--color-sea-green);
    background-color: #fff;
    background-color: var(--color-white);
    -webkit-box-shadow: 0 0 0 0.125rem #14555a;
            box-shadow: 0 0 0 0.125rem #14555a;
    -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
            box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
    border-color: transparent; }
  :not([dnb-is-touch]) .dnb-button--secondary:focus[disabled] {
    cursor: not-allowed; }
  :not([dnb-is-touch]) .dnb-button--secondary:focus:not([disabled]) {
    color: #007272;
    color: var(--color-sea-green);
    background-color: #fff;
    background-color: var(--color-white);
    outline: none; }
    html[data-whatinput='keyboard'] :not([dnb-is-touch]) .dnb-button--secondary:focus:not([disabled]) {
      -webkit-box-shadow: inset 0 0 0 0.125rem #14555a;
              box-shadow: inset 0 0 0 0.125rem #14555a;
      -webkit-box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
              box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
      border-color: transparent; }
  :not([dnb-is-touch]) .dnb-button--secondary:active[disabled] {
    cursor: not-allowed; }
  :not([dnb-is-touch]) .dnb-button--secondary:active:not([disabled]) {
    color: #007272;
    color: var(--color-sea-green);
    background-color: #d2f0e9;
    background-color: var(--color-mint-green-50);
    -webkit-box-shadow: 0 0 0 0.0625rem transparent;
            box-shadow: 0 0 0 0.0625rem transparent;
    border-color: transparent; }
  .dnb-button--secondary[disabled], .dnb-button--secondary[disabled]:focus {
    color: #b3dada;
    color: var(--color-sea-green-alt-30);
    background-color: #fff;
    background-color: var(--color-white);
    -webkit-box-shadow: inset 0 0 0 0.0625rem #b3dada;
            box-shadow: inset 0 0 0 0.0625rem #b3dada;
    -webkit-box-shadow: inset 0 0 0 0.0625rem var(--color-sea-green-alt-30);
            box-shadow: inset 0 0 0 0.0625rem var(--color-sea-green-alt-30);
    border-color: transparent; }

.dnb-button--tertiary {
  position: relative;
  z-index: 1;
  color: #007272;
  color: var(--color-sea-green);
  background-color: transparent; }
  .dnb-button--tertiary .dnb-button__text {
    line-height: inherit; }
  .dnb-button--tertiary.dnb-button--has-text {
    padding: 0 0.5rem; }
  :not([dnb-is-touch]) .dnb-button--tertiary.dnb-button--has-text:not(:focus):not([disabled]):hover[disabled] {
    cursor: not-allowed; }
  :not([dnb-is-touch]) .dnb-button--tertiary.dnb-button--has-text:not(:focus):not([disabled]):hover:not([disabled]) .dnb-button__text::after {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0.05rem;
    right: 0.05rem;
    bottom: 0;
    width: auto;
    height: 1px;
    border-radius: 0.5px;
    border-bottom: 1px solid #007272;
    border-bottom: 1px solid var(--color-sea-green);
    left: 0;
    right: 0;
    bottom: 0.5rem; }
  :not([dnb-is-touch]) .dnb-button--tertiary.dnb-button--has-text:not(:focus):not([disabled]):hover:not([disabled]).dnb-button--icon-position-left .dnb-button__text::after {
    left: -1.5rem;
    left: calc(-0.5rem - 1rem);
    left: calc(-0.5rem - var(--button-icon-size)); }
  :not([dnb-is-touch]) .dnb-button--tertiary.dnb-button--has-text:not(:focus):not([disabled]):hover:not([disabled]).dnb-button--icon-position-right .dnb-button__text::after {
    right: -1.5rem;
    right: calc(-0.5rem - 1rem);
    right: calc(-0.5rem - var(--button-icon-size)); }
  :not([dnb-is-touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover[disabled] {
    cursor: not-allowed; }
  :not([dnb-is-touch]) .dnb-button--tertiary.dnb-button--has-icon:not(.dnb-button--has-text):hover:not([disabled]) .dnb-button__icon {
    color: #b3dada;
    color: var(--color-sea-green-alt-30); }
  .dnb-button--tertiary.dnb-button--has-text:not([disabled]):active::after {
    border-bottom: none; }
  .dnb-button--tertiary:focus {
    outline: medium none invert;
    outline: initial; }
    html[data-whatinput='keyboard'] .dnb-button--tertiary:focus {
      -webkit-box-shadow: none;
              box-shadow: none; }
    .dnb-button--tertiary:focus::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: -0.5rem;
      height: inherit;
      border-radius: inherit;
      outline: none; }
      html[data-whatinput='keyboard'] .dnb-button--tertiary:focus::before {
        -webkit-box-shadow: 0 0 0 0.125rem #14555a;
                box-shadow: 0 0 0 0.125rem #14555a;
        -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
                box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
        border-color: transparent; }
  .dnb-button--tertiary[disabled] {
    color: #b3dada;
    color: var(--color-sea-green-alt-30); }

.dnb-button--signal {
  color: #000;
  color: var(--color-black);
  background-color: #ffff7a;
  background-color: var(--color-signal-yellow); }
  :not([dnb-is-touch]) .dnb-button--signal:hover[disabled] {
    cursor: not-allowed; }
  :not([dnb-is-touch]) .dnb-button--signal:hover:not([disabled]) {
    color: #000;
    color: var(--color-black);
    background-color: #ffff7a;
    background-color: var(--color-signal-yellow);
    -webkit-box-shadow: 0 0 0 0.125rem #14555a;
            box-shadow: 0 0 0 0.125rem #14555a;
    -webkit-box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
            box-shadow: 0 0 0 0.125rem var(--color-emerald-green);
    border-color: transparent; }
  :not([dnb-is-touch]) .dnb-button--signal:focus[disabled] {
    cursor: not-allowed; }
  :not([dnb-is-touch]) .dnb-button--signal:focus:not([disabled]) {
    color: #000;
    color: var(--color-black);
    background-color: #ffff7a;
    background-color: var(--color-signal-yellow);
    outline: none; }
    html[data-whatinput='keyboard'] :not([dnb-is-touch]) .dnb-button--signal:focus:not([disabled]) {
      -webkit-box-shadow: inset 0 0 0 0.125rem #14555a;
              box-shadow: inset 0 0 0 0.125rem #14555a;
      -webkit-box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
              box-shadow: inset 0 0 0 0.125rem var(--color-emerald-green);
      border-color: transparent; }
  :not([dnb-is-touch]) .dnb-button--signal:active[disabled] {
    cursor: not-allowed; }
  :not([dnb-is-touch]) .dnb-button--signal:active:not([disabled]) {
    color: #000;
    color: var(--color-black);
    background-color: #ffff7a;
    background-color: var(--color-signal-yellow);
    -webkit-box-shadow: 0 0 0 0.0625rem transparent;
            box-shadow: 0 0 0 0.0625rem transparent;
    border-color: transparent; }
  .dnb-button--signal[disabled] {
    color: #b3b3b3;
    color: var(--color-black-30);
    background-color: #ffffd7;
    background-color: var(--color-signal-yellow-30); }
