@import '../../style/themes/index';
@import '../../style/mixins/index';

@switch-prefix-cls: ~'@{ant-prefix}-switch';
@switch-duration: 0.2s;

// msb overwrite start
@switch-pin-size: @switch-height + 8px;
@switch-sm-pin-size: @switch-sm-height + 8px;
// msb overwrite end

.@{switch-prefix-cls} {
  .reset-component();

  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: @switch-min-width;
  height: @switch-height;
  line-height: @switch-height;
  vertical-align: middle;
  // msb overwrite start
  background-color: @color-gray-100;
  border-radius: @switch-border-radius;
  // msb overwrite end
  border: 0;
  cursor: pointer;
  transition: all @switch-duration;
  user-select: none;

  &:focus {
    outline: 0;
  }

  &-checked:focus {
    box-shadow: 0 0 0 2px @primary-1;
  }

  &:focus:hover {
    box-shadow: none;
  }

  &-checked {
    background: @switch-color;
    // msb overwrite start
    &.@{switch-prefix-cls}-disabled{
      background-color: @switch-bg-disabled;
      .@{switch-prefix-cls}-handle {
        &::before {
          background-color: @color-gray-25 !important;
        }
      }
    }
    // msb overwrite end
  }

  &-loading,
  &-disabled {
    cursor: not-allowed;
    * {
      box-shadow: none;
      cursor: not-allowed;
    }
  }

  // ========================= Inner ==========================
  &-inner {
    display: block;
    margin: 0 @switch-inner-margin-min 0 @switch-inner-margin-max;
    color: @text-color-inverse;
    font-size: @font-size-sm;
    transition: margin @switch-duration;
  }

  &-checked &-inner {
    margin: 0 @switch-inner-margin-max 0 @switch-inner-margin-min;
  }

  // ========================= Handle =========================
  &-handle {
    position: absolute;
    // msb overwrite start
    top: -4px;
    left: -4px;
    // msb overwrite end
    width: @switch-pin-size;
    height: @switch-pin-size;
    transition: all @switch-duration ease-in-out;

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: @switch-bg;
      border-radius: (@switch-pin-size / 2);
      // msb overwrite start
      box-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.12), 0px 1px 4px rgba(0, 0, 0, 0.24);
      // msb overwrite start
      transition: all @switch-duration ease-in-out;
      content: '';
    }
  }
  // msb overwrite start
  &.@{switch-prefix-cls}-disabled {
    .@{switch-prefix-cls}-handle {
      &::before {
        background-color: @color-gray-200;
      }
    }
  }

  // msb overwrite end

  &-checked &-handle {
    // msb overwrite start
    left: calc(100% - @switch-pin-size );
    // msb overwrite end
  }

  &:not(&-disabled):active {
    .@{switch-prefix-cls}-handle::before {
      right: -30%;
      left: 0;
    }

    &.@{switch-prefix-cls}-checked {
      .@{switch-prefix-cls}-handle::before {
        right: 0;
        left: -30%;
      }
    }
  }

  // ======================== Loading =========================
  &-loading-icon.@{iconfont-css-prefix} {
    position: relative;
    top: ((@switch-pin-size - @font-size-base) / 2);
    color: rgba(0, 0, 0, 0.65);
    vertical-align: top;
  }

  &-checked &-loading-icon {
    color: @switch-color;
  }

  // ========================== Size ==========================
  &-small {
    min-width: @switch-sm-min-width;
    height: @switch-sm-height;
    line-height: @switch-sm-height;

    .@{switch-prefix-cls}-inner {
      margin: 0 @switch-sm-inner-margin-min 0 @switch-sm-inner-margin-max;
      font-size: @font-size-sm;
    }

    .@{switch-prefix-cls}-handle {
      width: @switch-sm-pin-size;
      height: @switch-sm-pin-size;
    }

    .@{switch-prefix-cls}-loading-icon {
      top: ((@switch-sm-pin-size - 9px) / 2);
      font-size: 9px;
    }

    &.@{switch-prefix-cls}-checked {
      .@{switch-prefix-cls}-inner {
        margin: 0 @switch-sm-inner-margin-max 0 @switch-sm-inner-margin-min;
      }

      .@{switch-prefix-cls}-handle {
        // msb overwrite start
        left: calc(100% - @switch-sm-pin-size );
        // msb overwrite end
      }
    }
  }
}

@import './rtl';