// switch size
$switch-width: 48px !default;
$switch-height: 24px !default;

// switch border
$switch-border-color: $gray !default;
$switch-border-width: 2px !default;

// switch circle
$switch-circle-size: 10px !default;
$switch-circle-pos-left: 6px !default;
$switch-circle-bg: $gray;

// switch circle active
$switch-circle-active-size: 18px !default;
$switch-circle-active-pos-right: 2px !default;
$switch-circle-active-bg: $white !default;

// switch theme colors
$switch-colors: (
  'brand': $brand
) !default;

$switch-theme-colors: map-merge(
  $map1: $auxiliary-colors,
  $map2: $switch-colors
) !default;

.mx {
  &-switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    cursor: pointer;
    border: $switch-border-width solid $switch-border-color;

    transition: all $duration $time-function;

    @include round-rectangle($switch-width, $switch-height);
    @include disabled();

    &--active {
      @each $name, $color in $switch-theme-colors {
        &.mx-switch--#{$name} {
          background: $color;
          border-color: $color;
        }
      }
    }

    &-circle {
      display: inline-block;
      position: absolute;
      left: $switch-circle-pos-left;
      top: calc((100% - #{$switch-circle-size}) / 2);

      background: $switch-circle-bg;

      transform-origin: center;
      transition: all $duration $time-function;

      @include circle($switch-circle-size);

      &--active {
        @include circle($switch-circle-active-size);

        background-color: $switch-circle-active-bg;

        left: calc(100% - #{$switch-circle-active-size} - #{$switch-circle-active-pos-right});
        top: calc((100% - #{$switch-circle-active-size}) / 2);
      }
    }
  }
}

// scss-docs-start switch-base
@mixin switch-base {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  cursor: pointer;
  border: $switch-border-width solid $switch-border-color;

  transition: all $duration $time-function;
}
// scss-docs-end switch-base

// scss-docs-start switch
.mx-switch {
  @include switch-base();
  @include round-rectangle($switch-width, $switch-height);
  @include disabled();

  > .circle {
    display: inline-block;
    box-sizing: border-box;

    position: absolute;
    left: $switch-circle-pos-left;
    top: calc((100% - #{$switch-circle-size}) / 2);

    background: $switch-circle-bg;

    transform-origin: center;
    transition: all $duration $time-function;

    @include circle($switch-circle-size);
  }

  &.active {
    @each $name, $color in $switch-theme-colors {
      &.#{$name} {
        background: $color;
        border-color: $color;
      }
    }

    > .circle {
      @include circle($switch-circle-active-size);

      background-color: $switch-circle-active-bg;

      left: calc(100% - #{$switch-circle-active-size} - #{$switch-circle-active-pos-right});
      top: calc((100% - #{$switch-circle-active-size}) / 2);
    }
  }
}
// scss-docs-end switch