/* Checkbox ---------------------------------------------------------------- */
.view .input-checkbox {
  padding: .8em 1em 1em;

  input  { display: inline; width: auto; margin-right: .5em; }
  .label { display: inline; }
}

/* Switch ------------------------------------------------------------------ */
.view .input-switch { padding-top: .75em; }
.view .input-switch .switch {
  float: right;
  margin-top: -1.8em;

  $switch-width: 52px;
  $switch-padding: 2px;
  $switch-height: 32px;
  $switch-radius: $switch-height;
  $knob-size: $switch-height - ($switch-padding * 2);
  $knob-radius: $switch-height - ($switch-padding * 2);
  $knob-width: $knob-size;
  $switch-background: $white;
  $switch-border-background: $contrastColor;
  $switch-shadow: 0 0px 2px transparentize(black, 0.6);

  border-radius: $switch-radius;
  cursor: pointer;
  display: inline-block;
  height: $switch-height;
  position: relative;
  width: $switch-width;

  input[type="checkbox"] {
    display: none;

    + .checkbox {
      @include transition(all 0.3s ease);
      background: $switch-border-background;
      border-radius: $switch-radius;
      border: none;
      cursor: pointer;
      height: $switch-height;
      margin: 0;
      padding: 0;
      position: relative;
      width: $switch-width;
      z-index: 0;

      &:before {
        @include position(absolute, 2px 0 0 2px);
        @include transform(scale(1));
        @include transition(all 0.3s ease);
        background: $switch-background;
        border-radius: $switch-radius;
        content: "";
        height: $knob-radius;
        width: $switch-width - ($switch-padding * 2);
        z-index: 1;
      }

      &:after {
        @include position(absolute, 2px 0 0 2px);
        @include transition(all 0.3s ease);
        @include size($knob-size);
        background: $switch-background;
        border-radius: $knob-radius;
        box-shadow: $switch-shadow;
        content: "";
        z-index: 2;
      }
    }

    &:checked {
      + .checkbox {
        background: $positiveColor;

        &:before {
          @include transform(scale(0));
        }

        &:after {
          left: $switch-width - $knob-width - ($switch-padding);
        }
      }
    }
  }
}