$lui-toggle-track-required-color: $grey-300 !default;
$lui-toggle-thumb-off-color: $white !default;
$lui-toggle-thumb-required-color: $notice;
$lui-toggle-track-on-color: $light-blue-200;
$lui-toggle-thumb-on-color: $notice;
$lui-toggle-track-off-color: $grey-300;
$lui-toggle-size: 1.5em;
$lui-toggle-track-disabled-color: $grey-400;
$lui-toggle-thumb-disabled-color: $grey-400;
$lui-switch-width: 2.6em;
$lui-toggle-track-width: 2.6em;
$lui-toggle-track-success-color: $teal-200;
$lui-toggle-thumb-success-color: $success;

.lui-toggle {
  

  .lui-toggle-icon {
   
    padding: 4px 0px 6px 2px;
    margin-right: $desktop-gutter-mini;

    .lui-toggle-track {
      @include transition(all 0.2s ease-out);
      width: $lui-toggle-track-width;
      height: 14px;
      border-radius: 30px;
      background-color: $lui-toggle-track-off-color;
    }

    .lui-toggle-thumb {
      @include transition(all 0.2s ease-out);
      position: absolute;
      top: 1px;
      left: 2px;
      width: $lui-toggle-size;
      height: $lui-toggle-size;
      line-height: 24px;
      border-radius: 50%;
      background-color: $lui-toggle-thumb-off-color;

      .lui-paper-container {
        border-radius: 50%;
      }

      .lui-touch-ripple,
      .lui-focus-ripple-inner {
        width: 200%;
        height: 200%;
        top: -10px;
        left: -10px;
      }
    }
  }

  &.lui-is-switched {
    .lui-toggle-icon {
      .lui-toggle-track {
        background-color: $lui-toggle-track-on-color;
      }
      .lui-toggle-thumb {
        left: 18px;
        background-color: $lui-toggle-thumb-on-color;
      }
    }
  }

  &.lui-is-disabled {
    .lui-toggle-icon {
      cursor: default;
      .lui-toggle-track {
        background-color: $lui-toggle-track-disabled-color;
      }
      .lui-toggle-thumb {
        background-color: $lui-toggle-thumb-disabled-color;
      }
    }
  }  

  &.lui-is-success {
    .lui-toggle-icon {

      .lui-toggle-track {
        background-color:  $lui-toggle-track-off-color;
      }
      .lui-toggle-thumb {
        background-color:  $lui-toggle-thumb-off-color;
      }
    }
    &.lui-is-switched {
      .lui-toggle-icon {
        .lui-toggle-track {
          background-color: $lui-toggle-track-success-color;
        }
        .lui-toggle-thumb {
          left: 18px;
          background-color: $lui-toggle-thumb-success-color;
        }
      }
    }
  }

  &.lui-is-required {
    .lui-toggle-icon {
      .lui-toggle-track {
        background-color: $lui-toggle-track-required-color;
      }

      .lui-toggle-thumb {
        background-color: $lui-toggle-thumb-required-color;
      }
    }
  }
}