@import "../../style/index";
@import "../../style/mixins/index";

@switch-prefix-cls: ~"@{ant-prefix}-switch";
@switch-duration: @animation-duration-base;

@switch-pin-size: @switch-height - 6px;
@switch-sm-pin-size: @switch-sm-height - 4px;
@switch-lg-pin-size: @switch-lg-height - 8px;

.switch-background(@background: @switch-image-bg) {
  background-image: linear-gradient(to right, @background, @background),
    linear-gradient(to right, @component-background, @component-background);
}

.@{switch-prefix-cls} {
  .reset-component();
  .switch-background();
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: @switch-min-width;
  height: @switch-height;
  line-height: @switch-height;
  vertical-align: middle;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: all @switch-duration;
  user-select: none;

  .@{ant-prefix}-click-animating-node {
    display: none !important;
  }

  &:focus {
    outline: 0;
  }

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

  &-checked {
    background: @switch-color;
  }

  &-disabled {
    .switch-background(@switch-image-disabled-bg);

    &.@{switch-prefix-cls}-checked {
      .switch-background(@switch-image-checked-disabled-bg);
    }

    .@{switch-prefix-cls}-inner {
      color: @disabled-text-color;
    }
  }

  &-loading,
  &-disabled {
    cursor: not-allowed;

    * {
      box-shadow: none;
      cursor: not-allowed;
    }
  }

  // ========================= Hover ==========================
  &:not(&-disabled):hover {
    .switch-background(@switch-image-hover-bg);
  }

  &-checked:not(&-disabled):hover {
    .switch-background(@switch-image-checked-hover-bg);
  }

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

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

  // ========================= Handle =========================
  &-handle {
    position: absolute;
    top: @switch-padding;
    left: @switch-padding;
    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);
      box-shadow: @switch-handle-box-shadow;
      transition: all @switch-duration ease-in-out;
      content: "";
    }
  }

  &-checked &-handle {
    left: calc(100% - @switch-pin-size - @switch-padding);
  }

  &: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 {
      top: @switch-padding-sm;
      left: @switch-padding-sm;
      width: @switch-sm-pin-size;
      height: @switch-sm-pin-size;

      &::before {
        box-shadow: @switch-sm-handle-box-shadow;
        border-radius: (@switch-sm-pin-size / 2);
      }
    }

    .@{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 {
        left: calc(100% - @switch-sm-pin-size - @switch-padding-sm);
      }
    }
  }

  &-large {
    min-width: @switch-lg-min-width;
    height: @switch-lg-height;
    line-height: @switch-lg-height;

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

    .@{switch-prefix-cls}-handle {
      top: @switch-padding-lg;
      left: @switch-padding-lg;
      width: @switch-lg-pin-size;
      height: @switch-lg-pin-size;

      &::before {
        border-radius: (@switch-lg-pin-size / 2);
      }
    }

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

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

      .@{switch-prefix-cls}-handle {
        left: calc(100% - @switch-lg-pin-size - @switch-padding-lg);
      }
    }
  }
}

@import "./rtl";