@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--on {
        background-color: $accent-b;
    }


    $toggle-position--on: 2px;
    $toggle-position--off: 20px;
    .c-toggle-button__thumb {
        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);
        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);
            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;
    }