/*
* Switch theme
*
*/
/**
 * This file is only used to make themes independent
 * so that they can get imported individually, without the core styles
 *
 */
/*
 * Utilities
 */
.dnb-switch {
  /*
    * When switched OFF
    * aka when the checkbox is not :checked
    */
  /*
    * When switched ON
    * aka when the checkbox is :checked
    */
  /*
    * Draw the circle / line
    *
    */
  /*
    * On disabled
    *
    */
  /*
    * On hover
    *
    */
  /*
    * On active
    *
    */
  /* stylelint-disable */
  /* stylelint-enable */
  /*
    * On focus
    *
    */
  /* stylelint-disable */
  /* stylelint-enable */
  /* stylelint-disable */
  /* stylelint-enable */
  /*
    * On error state
    *
    */ }
  .dnb-switch__background {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
    background-color: #b3dada;
    background-color: var(--color-sea-green-alt-30); }
    .dnb-switch__background::after {
      content: '';
      position: absolute;
      -webkit-transition: position 0.3s ease-out, -webkit-transform 0.3s ease-out;
      transition: position 0.3s ease-out, -webkit-transform 0.3s ease-out;
      transition: transform 0.3s ease-out, position 0.3s ease-out;
      transition: transform 0.3s ease-out, position 0.3s ease-out, -webkit-transform 0.3s ease-out; }
      @media all and (-ms-high-contrast: none) {
        .dnb-switch__background::after {
          top: 0.25rem; } }
  .dnb-switch__input:not(:checked) ~ .dnb-switch__button {
    background-color: #fff;
    background-color: var(--color-white);
    border-color: #008484;
    border-color: var(--color-sea-green-alt); }
  .dnb-switch__input:checked ~ .dnb-switch__button {
    background-color: #007272;
    background-color: var(--color-sea-green); }
  .dnb-switch__input:not(:checked) ~ .dnb-switch__background::after {
    right: 0;
    -webkit-transform: translateX(-0.3125rem);
            transform: translateX(-0.3125rem);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: 0.0625rem solid #007272;
    border: 0.0625rem solid var(--color-sea-green); }
  .dnb-switch__input:checked ~ .dnb-switch__background::after {
    left: 0;
    -webkit-transform: translateX(0.625rem);
    -webkit-transform: translateX(calc(0.5rem + 0.125rem));
            transform: translateX(0.625rem);
            transform: translateX(calc(0.5rem + 0.125rem));
    width: 0.0625rem;
    height: 0.5rem;
    border-radius: 0.0625rem;
    background-color: #007272;
    background-color: var(--color-sea-green); }
  .dnb-switch__input[disabled] ~ .dnb-switch__background {
    background-color: #e9f8f4;
    background-color: var(--color-mint-green-25); }
  .dnb-switch__input[disabled]:checked ~ .dnb-switch__background::after {
    background-color: #b3dada;
    background-color: var(--color-sea-green-alt-30); }
  .dnb-switch__input[disabled]:not(:checked) ~ .dnb-switch__background::after {
    border-color: #b3dada;
    border-color: var(--color-sea-green-alt-30); }
  .dnb-switch__input[disabled] ~ .dnb-switch__button {
    border-color: #b3dada;
    border-color: var(--color-sea-green-alt-30); }
  .dnb-switch__input[disabled]:checked ~ .dnb-switch__button {
    background-color: #b3dada;
    background-color: var(--color-sea-green-alt-30); }
  .dnb-switch__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-switch__button {
    border-color: #007272;
    border-color: var(--color-sea-green);
    background-color: #d2f0e9;
    background-color: var(--color-mint-green-50); }
  .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button {
    background-color: #d2f0e9;
    background-color: var(--color-mint-green-50);
    border-color: transparent; }
  html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__button {
    border: none; }
  .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background,
  .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
    outline: none; }
    html[data-whatinput='keyboard'] .dnb-switch__input:not([disabled]):focus ~ .dnb-switch__background, html[data-whatinput='keyboard']
    .dnb-switch__input:not([disabled]):active ~ .dnb-switch__background {
      -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-switch__input:not([disabled]):focus ~ .dnb-switch__button .dnb-switch__focus,
  .dnb-switch__input:not([disabled]):active ~ .dnb-switch__button .dnb-switch__focus {
    display: block; }
  .dnb-switch__input:not([disabled]):checked ~ .dnb-switch__button .dnb-switch__focus {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg); }
  .dnb-switch__input:not([disabled]):not(:checked):focus ~ .dnb-switch__button,
  .dnb-switch__input:not([disabled]):not(:checked):active ~ .dnb-switch__button {
    background-color: #d2f0e9;
    background-color: var(--color-mint-green-50); }
  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):hover ~ .dnb-switch__button {
    border-color: #e10076;
    border-color: var(--color-cherry-red);
    background-color: #fdebf4;
    background-color: var(--color-cherry-red-80); }
  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-switch__button {
    border-color: #fdebf4;
    border-color: var(--color-cherry-red-80); }
  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-switch__button {
    background-color: #e10076;
    background-color: var(--color-cherry-red); }
  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__background {
    background-color: #fdebf4;
    background-color: var(--color-cherry-red-80);
    -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-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked ~ .dnb-switch__background::after {
    background-color: #e10076;
    background-color: var(--color-cherry-red); }
  .dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked) ~ .dnb-switch__background::after {
    border-color: #e10076;
    border-color: var(--color-cherry-red); }
  .dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active) ~ .dnb-switch__button .dnb-switch__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-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked ~ .dnb-switch__button .dnb-switch__focus {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg); }
  .dnb-switch > .dnb-form-status {
    -webkit-transform: translateY(0.1875rem);
            transform: translateY(0.1875rem); }
