/*
* ToggleButton theme
*
*/

@import '../../../../style/core/utilities.scss';

.dnb-toggle-button {
  .dnb-checkbox {
    &__gfx {
      path {
        stroke-width: 0.125rem;
      }
    }
  }
  .dnb-radio {
    &__input:not([disabled]) {
      & ~ .dnb-radio__button {
        box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
      }
    }
  }

  /* stylelint-disable */
  &--checked &__button,
  &--checked &__button:focus,
  &--checked &__button:hover {
    &[disabled] {
      background-color: var(--color-mint-green-25);
    }

    &:not([disabled]):not(:active) {
      background-color: var(--color-emerald-green);
      color: var(--color-mint-green);
    }

    .dnb-icon {
      color: inherit;
    }

    &:not([disabled]) {
      .dnb-radio {
        &__button {
          background-color: transparent;
          border-color: var(--color-mint-green);
          // extend the border to be 1.5px
          box-shadow: 0 0 0 0.0318rem var(--color-mint-green);
        }
        &__dot {
          background-color: var(--color-mint-green);
        }
      }
    }
    html[data-whatinput='keyboard'] &:not([disabled]):not(:hover):focus {
      .dnb-radio {
        &__button {
          @include fakeBorder(
            var(--color-emerald-green),
            0.09375rem,
            inset
          );
        }

        &__input:not([disabled]):not(:hover):not(:active) {
          &:not(:hover) ~ .dnb-radio__dot {
            background-color: var(--color-emerald-green);
          }
        }
      }
    }

    &:not([disabled]) {
      .dnb-checkbox {
        &__button {
          background-color: var(--color-mint-green);
          border-color: var(--color-emerald-green);
          // extend the border to be 1.5px (use .0318rem instead of .03125rem because of Windows)
          box-shadow: 0 0 0 0.0318rem var(--color-emerald-green);
        }
        &__gfx {
          color: var(--color-emerald-green);
        }
      }
    }
    html[data-whatinput='keyboard'] &:not([disabled]):not(:hover):focus {
      .dnb-checkbox {
        &__button {
          background-color: var(--color-emerald-green);
        }
        &__gfx {
          color: var(--color-mint-green);
        }
      }
    }

    &[disabled] {
      .dnb-radio__button,
      .dnb-checkbox__button {
        box-shadow: none;
      }
    }

    html[data-whatinput='keyboard']
      &:not([disabled]):not(:active):not(:hover):focus {
      color: var(--color-emerald-green);
      background-color: var(--color-mint-green);
      @include focusRing(null, var(--color-emerald-green), inset);
    }
  }

  &__button,
  &--checked &__button {
    &:not([disabled]):active {
      .dnb-radio {
        &__button {
          background-color: transparent;
          border-color: var(--color-sea-green);
          // extend the border to be 1.5px (use .0318rem instead of .03125rem because of Windows)
          box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
        }
        &__dot {
          background-color: var(--color-sea-green);
        }
      }

      .dnb-checkbox {
        &__button {
          background-color: transparent;
          border-color: var(--color-sea-green);
          // extend the border to be 1.5px (use .0318rem instead of .03125rem because of Windows)
          box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
        }
        &__gfx {
          color: var(--color-sea-green);
        }
      }
    }
  }
  /* stylelint-enable */

  /*
    * On error state
    *
    */
  // change button color
  // fake border outside
  /* stylelint-disable */
  &__status--error &__button:not([disabled]) {
    &:not(:hover):not(:focus):not(:active) {
      background-color: var(--color-white);
      color: var(--color-fire-red);
      @include fakeBorder(var(--color-fire-red), 0.0625rem, inset);
    }

    .dnb-radio {
      &__input:not([disabled]) {
        & ~ .dnb-radio__button {
          @include fakeBorder(var(--color-fire-red), 0.09375rem, inset);
        }
        & ~ .dnb-radio__focus {
          box-shadow: none;
        }
        & ~ .dnb-radio__dot {
          background-color: transparent;
        }
      }
    }

    .dnb-checkbox {
      &__input {
        & ~ .dnb-checkbox__button {
          border: none;
          @include fakeBorder(var(--color-fire-red), 0.09375rem, inset);
        }
        &:not(:hover) ~ .dnb-checkbox__button .dnb-checkbox__focus {
          box-shadow: none;
        }
      }
    }
  }

  &__status--error#{&}--checked
    &__button:not([disabled]):not(:hover):not(:focus):not(:active) {
    color: var(--color-white);
    background-color: var(--color-fire-red);
    @include fakeBorder(var(--color-fire-red), 0.0625rem, inset);
  }

  &__status--error#{&}--checked &__button:not([disabled]) {
    &:not(:active):not(:focus) .dnb-radio {
      &__input:not([disabled]) {
        & ~ .dnb-radio__button {
          @include fakeBorder(var(--color-white), 0.09375rem, inset);
        }
        &:not(:hover) ~ .dnb-radio__dot {
          background-color: var(--color-white);
        }
      }
    }

    .dnb-checkbox {
      &__input:not([disabled]):not(:hover):not(:active) {
        & ~ .dnb-checkbox__button .dnb-checkbox__focus {
          background-color: var(--color-white);
        }
      }
    }
    .dnb-checkbox
      .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(
        :hover
      )
      ~ .dnb-checkbox__gfx {
      color: var(--color-fire-red);
    }
  }

  /* stylelint-enable */

  // adjust the form-status to the inner border for 3px
  > .dnb-form-status {
    transform: translateY(0.1875rem);
  }
}