/*
* Switch theme
*
*/

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

.dnb-switch {
  &__background {
    background-color: var(--color-sea-green-30);
  }

  &__focus {
    transition: transform 150ms ease-out;
    transform: rotate(0deg);

    // 15% is the top value
    // 85% is the bottom value
    clip-path: polygon(
      50% 15%,
      110% 15%,
      110% -10%,
      -10% -10%,
      -10% 110%,
      110% 110%,
      110% 85%,
      50% 85%
    );
  }

  /* stylelint-disable no-descending-specificity */

  /*
    * When switched OFF
    * aka when the checkbox is not :checked
    */
  &__input:not(:checked) ~ &__button {
    background-color: var(--color-white);
    border-color: var(--color-sea-green);
  }

  /*
    * When switched ON
    * aka when the checkbox is :checked
    */
  &__input:checked ~ &__button {
    background-color: var(--color-sea-green);
  }

  /*
    * Draw the circle / line
    *
    */
  &__input:not(:checked) ~ &__background::after {
    right: 0;
    transform: translateX(calc(var(--switch-width--medium) - 2.8rem));

    width: 0.5rem;
    height: 0.5rem;

    border-radius: 50%;
    border: 0.0625rem solid var(--color-sea-green);
  }

  &__input:checked ~ &__background::after {
    left: 0;
    transform: translateX(calc(var(--switch-width--medium) - 1.87rem));

    width: 0.0625rem;
    height: 0.5rem;
    border-radius: 0.0625rem;
    background-color: var(--color-sea-green);
  }

  &--large &__input:not(:checked) ~ &__background::after {
    width: 0.625rem;
    height: 0.625rem;
    transform: translateX(calc(var(--switch-width--large) - 3.7rem));
  }
  &--large &__input:checked ~ &__background::after {
    height: 0.625rem;
    transform: translateX(calc(var(--switch-width--large) - 2.5rem));
  }

  /*
    * On disabled state
    *
    */
  &__input[disabled] ~ &__background {
    background-color: var(--color-mint-green-25);
  }
  &__input[disabled]:checked ~ &__background {
    &::after {
      background-color: var(--color-sea-green-30);
    }
  }
  &__input[disabled]:not(:checked) ~ &__background {
    &::after {
      border-color: var(--color-sea-green-30);
    }
  }
  &__input[disabled] ~ &__button {
    border-color: var(--color-sea-green-30);
  }
  &__input[disabled]:checked ~ &__button {
    background-color: var(--color-sea-green-30);
  }

  /*
    * On focus state
    *
    */
  &__input:not([disabled]):focus ~ &__button {
    html[data-whatinput='keyboard'] & {
      border: none;
    }
  }
  &__input:not([disabled]):not(:checked):focus ~ &__button {
    html[data-whatinput='keyboard'] & {
      background-color: var(--color-mint-green-50);
    }
  }
  &__input:not([disabled]):checked ~ &__button &__focus {
    transform: rotate(180deg);
  }

  /*
    * On hover state
    *
    */
  &__input:not([disabled]):not(:focus):not(:active):hover ~ &__button {
    border-color: var(--color-sea-green);
    background-color: var(--color-mint-green-50);
  }

  /*
    * On active state
    *
    */
  &__input:not([disabled]):active ~ &__button {
    background-color: var(--color-mint-green-50);
    border-color: transparent;
  }

  /*
    * On error state
    *
    */
  &__status--error &__input:not([disabled]):not(:focus):hover ~ &__button {
    // change button color
    border-color: var(--color-fire-red);
    background-color: var(--color-fire-red-8);
  }
  &__status--error
    &__input:not([disabled]):not(:focus):not(:active):not(:hover)
    ~ &__button {
    border-color: var(--color-fire-red-8);
  }
  &__status--error
    &__input:not([disabled]):not(:focus):not(:active):not(:hover):checked
    ~ &__button {
    background-color: var(--color-fire-red);
  }
  &__status--error
    &__input:not([disabled]):not(:focus):not(:active)
    ~ &__background {
    // change background color
    background-color: var(--color-fire-red-8);
    @include fakeBorder(var(--color-fire-red), var(--focus-ring-width));
  }

  // change gfx 1 color
  &__status--error
    &__input:not(:focus):not([disabled]):not(:active):checked
    ~ &__background {
    &::after {
      background-color: var(--color-fire-red);
    }
  }

  // change gfx 0 color
  &__status--error
    &__input:not(:focus):not([disabled]):not(:active):not(:checked)
    ~ &__background {
    &::after {
      border-color: var(--color-fire-red);
    }
  }

  // fake border outside
  &__status--error
    &__input:not([disabled]):not(:focus):not(:active)
    ~ &__button
    &__focus {
    @include fakeBorder(var(--color-fire-red), var(--focus-ring-width));
  }

  // and rotate in checked state
  &__status--error
    &__input:not([disabled]):not(:focus):not(:active):checked
    ~ &__button
    &__focus {
    transform: rotate(180deg);
  }
  /* stylelint-enable no-descending-specificity */

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