@import './styles/<!--partnerName--settings-->';
@import './styles/tools';

.c-toggle-button {
    position: relative;
    background-color: $warning-color;
    border-radius: 40px;
    display: inline-block;
    width: 42px;
    height: 24px;
    cursor: pointer;
    transition: background-color $default-animation-basic;
}
    .c-toggle-button--disabled {
        cursor: default;
    }

    .c-toggle-button--on {
        background-color: $accent-b;
    }


    $toggle-position--on: 2px;
    $toggle-position--off: 20px;
    .c-toggle-button__thumb {
        position: absolute;
        left: 0;
        display: inline-block;
        background: $white-color;
        border-radius: 50%;
        margin-top: 2px;
        width: 20px;
        height: 20px;
        animation-fill-mode: forwards;
        box-shadow: 0 2px 4px 0 transparentize($black-color, 0.8);
        transform: translateX($toggle-position--on);
    }

        .c-toggle-button__thumb--off {
            transform: translateX($toggle-position--on);
        }

            .c-toggle-button__thumb--off--animate {
                animation: toggle-button-off $default-animation-basic;
                @keyframes toggle-button-off {
                    from {
                        transform: translateX($toggle-position--off);
                    }
                    to {
                        transform: translateX($toggle-position--on);
                    }
                }
            }

        .c-toggle-button__thumb--on {
            transform: translateX($toggle-position--off);
        }

            .c-toggle-button__thumb--on--animate {
                animation: toggle-button-on $default-animation-basic;
                @keyframes toggle-button-on {
                    from {
                        transform: translateX($toggle-position--on);
                    }
                    to {
                        transform: translateX($toggle-position--off);
                    }
                };
            }

  .c-toggle-button__icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
  }

    .c-toggle-button__icon--tick {
        left: 3px;
    }

    .c-toggle-button__icon--cross {
        right: 3px;
    }