HBM/md-components

/**
 * http://www.google.com/design/spec/components/switches.html#switches-switch
 */
$thumb-on: $color-accent;
$thumb-off: #fafafa;
$thumb-disabled: #bdbdbd;
$thumb-size: 20px;

$track-on: $color-accent--light;
$track-off: rgba(0, 0, 0, 0.26);
$track-disabled: rgba(0, 0, 0, 0.12);
$track-width: 36px;
$track-height: 14px;
$track-border-radius: 8px;

$transition-duration: 0.15s;
$transition-function: ease;

.mdc-Switch {
  height: 48px;
  display: flex;
  align-items: center;
}

.mdc-Switch-input {
  position: absolute;
  opacity: 0;
  z-index: -1; /* Put the input behind the label so it doesn't overlay text */
}

.mdc-Switch-track {
  position: relative;
  width: $track-width;
  height: $track-height;
  border-radius: $track-border-radius;
  background: $track-off;
  transition: background $transition-duration $transition-function;
}

.mdc-Switch-thumb {
  position: absolute;
  top: -($thumb-size - $track-height) / 2;
  left: 0;
  width: $thumb-size;
  height: $thumb-size;
  border-radius: 50%;
  background: $thumb-off;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.4);
  transition: $transition-duration $transition-function;
}

/**
 * checked
 */
.mdc-Switch-input:checked ~ .mdc-Switch-track {
  background: $track-on;
}

.mdc-Switch-input:checked ~ .mdc-Switch-track .mdc-Switch-thumb {
  left: $track-width - $thumb-size;
  background: $thumb-on;
}

/**
 * disabled
 */

.mdc-Switch-input:disabled ~ .mdc-Switch-track {
  background: $track-disabled;
}

.mdc-Switch-input:disabled ~ .mdc-Switch-track .mdc-Switch-thumb {
  background: $thumb-disabled;
}

/**
 * focus
 */
.mdc-Switch-input:checked.mdc-Switch-input:focus ~ .mdc-Switch-track .mdc-Switch-thumb {
  box-shadow: 0 0 0 15px rgba($color-accent--light, 0.5);
}

.mdc-Switch-input:not(:checked).mdc-Switch-input:focus ~ .mdc-Switch-track .mdc-Switch-thumb {
  box-shadow: 0 0 0 15px rgba(0, 0, 0, 0.12);
}