@import 'variables';
@import 'functions';

// VARIABLES
$switchEnabledBg: $tf-theme-color;
$switchDisabledBg: #8e8e8e;
$switchCircleBg: #fff;
$switchCircleBorderColor: #e5e5e5;
$switchCircleShadowColor: rgba(0, 0, 0, .2);

.twofas-switch {
  display: inline-block;

  .twofas-totp-switch {
    display: none;

    &[value='totp_enabled'] {
      + label {
        background: $switchEnabledBg;
      }
    }

    &[value='totp_disabled'] {
      + label {
        background: $switchDisabledBg;

        span {
          &.twofas-totp-switch-indicator {
            transform: translateX(-15px) translateY(-50%);
          }
        }
      }
    }

    &[disabled] {
      + label {
        cursor: wait;
      }
    }
  }

  label {
    border-radius: 26px;
    display: inline-block;
    height: 26px;
    overflow: hidden;
    position: relative;
    transition: all .5s ease-in-out;
    width: 41px;

    span {
      &.twofas-totp-switch-indicator {
        background-color: $switchCircleBg;
        border: .5px solid $switchCircleBorderColor;
        border-radius: 50%;
        box-shadow: 0 2px 2px $switchCircleShadowColor;
        display: inline-block;
        height: 22px;
        left: 17px;
        position: absolute;
        top: 50%;
        transform: translateX(0) translateY(-50%);
        transition: all .3s ease-in-out;
        width: 22px;
      }
    }
  }
}