@mixin cx-switch(
   $name: 'switch',
   $state-style-map: $cx-input-state-style-map,
   $styles: $cx-switch-handle-styles,
   $width: $cx-default-switch-width,
   $handle-size: $cx-default-switch-handle-size,
   $axis-size: $cx-default-switch-axis-size,
   $axis-background-color: $cx-default-switch-axis-background-color,
   $range-background-color: $cx-default-switch-range-background-color,
   $empty-text: $cx-empty-text,
   $besm: $cx-besm
) {
   $block: map-get($besm, block);
   $element: map-get($besm, element);
   $state: map-get($besm, state);

   $padding: cx-get-state-rule($state-style-map, default, padding);
   $border-width: cx-get-state-rule($state-style-map, default, border-width);

   $outer-styles: cx-deep-map-merge($state-style-map, (
      default: (
         border-width: cx-top($border-width) 0 cx-bottom($border-width) 0,
         padding: cx-top($padding) 0 cx-bottom($padding) 0
      )
   ));

   .#{$block}#{$name} {
      @include cxb-field($besm, $outer-styles, $input: false, $box: true);

      cursor: pointer;
      min-width: cx-calc($width, $handle-size);
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

      &.#{$state}disabled {
         pointer-events: none;
         opacity: 0.5;
      }

      &:focus {
         outline: none;
      }
   }

   .#{$element}#{$name}-text {
      display: inline-block;
      margin-left: cx-calc($width, $handle-size);
      padding: 0 cx-right($padding) 0 cx-left($padding);
   }

   .#{$element}#{$name}-empty-text {
      @include cxe-field-empty-text($empty-text);
   }



   .#{$element}#{$name}-axis {
      user-select: none;
      position: absolute;
      background-color: $axis-background-color;
      border-radius: $axis-size / 2;
      box-sizing: border-box;
      width: $width;

      left: $handle-size / 2;
      right: $handle-size / 2;
      top: calc(50% - #{$axis-size / 2});
      height: $axis-size;
      padding: 0 $axis-size / 2;
   }

   .#{$element}#{$name}-space {
      position: relative;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
   }

   .#{$element}#{$name}-range {
      position: absolute;
      background-color: $range-background-color;
      border-radius: $axis-size / 2;
      height: 100%;
      left: 0;
      width: 0;
      opacity: 0;
      transform: scale(0);

      transition: all 200ms;

      .#{$state}on & {
         width: 100%;
         opacity: 1;
         transform: none;
      }
   }

   .#{$element}#{$name}-handle {
      position: absolute;
      box-sizing: border-box;
      width: $handle-size;
      height: $handle-size;
      margin-left: -$handle-size / 2;
      margin-top: -$handle-size / 2;
      left: 0;
      top: 50%;
      transition: left 200ms;

      .#{$state}on & {
         left: 100%;
         @include cx-add-state-rules($styles, on);
      }

      .#{$state}on:active & {
         @include cx-add-state-rules($styles, on-active);
      }

      @include cx-add-state-rules($styles, default);

      &:hover {
         @include cx-add-state-rules($styles, hover);
      }

      .#{$block}#{$name}:focus & {
         @include cx-add-state-rules($styles, focus);
      }

      .#{$block}#{$name}.#{$state}disabled & {
         @include cx-add-state-rules($styles, disabled);
      }

      &:active {
         @include cx-add-state-rules($styles, active);
      }
   }
}

@if (cx-should-include('cx/widgets/Switch')) {
   @include cx-switch();
}