/*
* Checkbox theme
*
*/
/**
 * This file is only used to make themes independent
 * so that they can get imported individually, without the core styles
 *
 */
/*
 * Utilities
 */
.dnb-checkbox {
  /*
    * When checkbox is OFF
    * aka when the checkbox is not :checked
    */
  /*
    * When checkbox is ON
    * aka when the checkbox is :checked
    */
  /*
    * When checkboxed OFF
    * aka when the checkbox is not :checked
    */
  /*
    * When checkboxed ON
    * aka when the checkbox is :checked
    */
  /*
    * On disabled
    *
    */
  /*
    * On hover
    *
    */
  /*
    * On active
    *
    */
  /* stylelint-disable */
  /* stylelint-enable */
  /*
    * On focus
    *
    */
  /* stylelint-disable */
  /* stylelint-enable */
  /*
    * On error state
    *
    */ }
  .dnb-checkbox__gfx {
    -webkit-transition: opacity 200ms ease-out, -webkit-transform 200ms ease-out;
    transition: opacity 200ms ease-out, -webkit-transform 200ms ease-out;
    transition: opacity 200ms ease-out, transform 200ms ease-out;
    transition: opacity 200ms ease-out, transform 200ms ease-out, -webkit-transform 200ms ease-out; }
  .dnb-checkbox__input:not(:checked) ~ .dnb-checkbox__gfx {
    opacity: 0;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    color: #008484;
    color: var(--color-sea-green-alt); }
  .dnb-checkbox__input:checked ~ .dnb-checkbox__gfx {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
    color: #fff;
    color: var(--color-white); }
  .dnb-checkbox__input:not(:checked) ~ .dnb-checkbox__button {
    background-color: #fff;
    background-color: var(--color-white);
    border-color: #008484;
    border-color: var(--color-sea-green-alt); }
  .dnb-checkbox__input:checked ~ .dnb-checkbox__button {
    background-color: #008484;
    background-color: var(--color-sea-green-alt); }
  .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button {
    border-color: #d2f0e9;
    border-color: var(--color-mint-green-50); }
  .dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button {
    border-color: transparent;
    background-color: #b3dada;
    background-color: var(--color-sea-green-alt-30); }
  .dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button {
    background-color: #d2f0e9;
    background-color: var(--color-mint-green-50); }
  .dnb-checkbox__input:not([disabled]):not(:focus):checked:hover ~ .dnb-checkbox__button {
    border-color: transparent; }
  .dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx {
    color: #008484;
    color: var(--color-sea-green-alt); }
  .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button {
    background-color: #d2f0e9;
    background-color: var(--color-mint-green-50);
    border-color: transparent; }
  .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__gfx {
    color: #fff;
    color: var(--color-white); }
  html[data-whatinput='keyboard'] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button {
    border: none;
    background-color: #d2f0e9;
    background-color: var(--color-mint-green-50); }
  html[data-whatinput='keyboard'] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__gfx {
    color: #008484;
    color: var(--color-sea-green-alt); }
  .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button .dnb-checkbox__focus,
  .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus {
    display: block; }
  .dnb-checkbox__input:not([disabled]):not(:checked):focus ~ .dnb-checkbox__button,
  .dnb-checkbox__input:not([disabled]):not(:checked):active ~ .dnb-checkbox__button {
    background-color: #d2f0e9;
    background-color: var(--color-mint-green-50); }
  .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):not(:active) ~ .dnb-checkbox__button {
    border: none; }
  .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
    display: block;
    -webkit-box-shadow: 0 0 0 0.125rem #e10076;
            box-shadow: 0 0 0 0.125rem #e10076;
    -webkit-box-shadow: 0 0 0 0.125rem var(--color-cherry-red);
            box-shadow: 0 0 0 0.125rem var(--color-cherry-red);
    border-color: transparent; }
  .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button {
    border-color: #e10076;
    border-color: var(--color-cherry-red);
    background-color: #fdebf4;
    background-color: var(--color-cherry-red-80); }
  .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-checkbox__button {
    border-color: #fdebf4;
    border-color: var(--color-cherry-red-80); }
  .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-checkbox__button {
    background-color: #e10076;
    background-color: var(--color-cherry-red); }
  .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx {
    color: #e10076;
    color: var(--color-cherry-red); }
  .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
    color: #fdebf4;
    color: var(--color-cherry-red-80); }
