/*
  SWITCH
  ------
*/

/// @Foundation.settings
// Switch
$switch-width: rem-calc(50) !default;
$switch-height: rem-calc(32) !default;
$switch-background: #ccc !default;
$switch-background-active: $primary-color !default;
$switch-border: 0 !default;
$switch-radius: 9999px !default;
$switch-animation-speed: 0.15s !default;

$switch-paddle-color: white !default;
$switch-paddle-offset: 4px !default;
///

%switch {
  position: relative;
  overflow: hidden;
  display: inline-block;

  > input {
    position: absolute;
    left: -9999px;
    outline: none;
  }

  > label {
    -ms-touch-action: manipulation;
        touch-action: manipulation;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;

    // Paddle
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

/*
  Defines the dimmensions of the switch.

  $width - width of the switch.
  $height - height of the switch.
*/
@mixin switch-layout(
  $width: $switch-width,
  $height: $switch-height
) {
  width: $width;
  height: $height;

  > label {
    &::after {
      width: $height;
      height: $height;
    }
  }
  input:checked + label {
    &::after {
      left: $width - $height;
    }
  }
}

@mixin switch-style(
  $background: $switch-background,
  $background-active: $switch-background-active,
  $border: $switch-border,
  $radius: $switch-radius,
  $paddle-color: $switch-paddle-color,
  $paddle-offset: $switch-paddle-offset,
  $animation-speed: $switch-animation-speed
) {
  @if hasvalue($border) {
    border: $border;
  }
  border-radius: $radius;

  > label {
    background: $background;

    &::after {
      background: $paddle-color;
      border-radius: $radius;
      transition: left $animation-speed ease-out;

      @if hasvalue($paddle-offset) {
        border: $paddle-offset solid $background
      }
    }
  }

  input:checked + label {
    background: $background-active;
    margin: 0;

    &::after {
      @if hasvalue($paddle-offset) {
        border-color: $background-active;
      }
    }
  }
}

@mixin switch() {
  @extend %switch;
  @include switch-layout;
  @include switch-style;
}

@include exports(switch) {
  .switch {
    @include switch;

    &.small { @include switch-layout(rem-calc(40), rem-calc(26)); }
    &.large { @include switch-layout(rem-calc(60), rem-calc(38)); }
  }
}