$lui-switch-width: 60px;
$lui-switches-ripple-color: $primary-1-color;
$lui-switches-ripple-success-color: $success;

.lui-enhanced-switch {

  position: relative;
  cursor: pointer;
  overflow: visible;
  display: table;
  height: auto;
  width: 100%;

  .lui-enhanced-switch-input {
    position: absolute;
    cursor: pointer;
    pointer-events: all;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    left: 0;
  }

  .lui-enhanced-switch-wrap {
    @include ease-out();
    float: left;
    position: relative;
    display: table-column;


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

  .lui-switch-label {
    float: left;
    position: relative;
    display: table-column;
    width: calc(100% - #{$lui-switch-width});
    line-height: 28px;
  }
  &.lui-is-success {
    &.lui-is-switched {
      .lui-focus-ripple-inner,
      .lui-ripple-circle-inner {
        background-color: $lui-switches-ripple-success-color;
      }
    }
  }
  &.lui-is-switched {
    .lui-focus-ripple-inner,
    .lui-ripple-circle-inner {
      background-color: $lui-switches-ripple-color;
    }
  }
}