@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../../styles/mixins.scss';

$class-prefix: 'cn-ui-m-switch';
$sizes: small, medium, large;

.#{$hashClassName}.#{$class-prefix} {
  @include flex(row, flex-start, center);

  background-color: $m-color-bg;

  .#{$class-prefix} {
    &-knob {
      @include flex(row, center, center);
      margin: 0 $m-s-1 / 4;
      background-color: $m-color-bg-white;
      border-radius: 50%;
      transition: all 0.2s;
      // transition: transform var(--switch-motion-type) var(--switch-motion-time);

      &-loading {
        color: $m-color-primary;
      }
    }
  }

  &--disabled {
    background-color: $m-color-bg-light;
  }

  &--checked {
    background-color: $m-color-primary;
  }

  &--disabled-checked {
    background-color: $m-color-secondary-lightest;
  }

  @each $size in $sizes {
    &--#{$size} {
      @if ($size == small) {
        width: $m-s-28;
        height: $m-s-16;
        border-radius: $m-s-12;
      } @else if ($size == medium) {
        width: $m-s-40;
        height: $m-s-24;
        border-radius: $m-s-15;
      } @else if ($size == large) {
        width: $m-s-48;
        height: $m-s-28;
        border-radius: $m-s-17;
      }
    }

    .#{$class-prefix}-knob--#{$size} {
      @if ($size == small) {
        width: $m-s-12;
        height: $m-s-12;
        transform: translateX($m-s-2);
      } @else if ($size == medium) {
        width: $m-s-16;
        height: $m-s-16;
        transform: translateX($m-s-4);
      } @else if ($size == large) {
        width: $m-s-20;
        height: $m-s-20;
        transform: translateX($m-s-4);
      }

      &-checked {
        @extend .#{$class-prefix}-knob--#{$size};
        @if ($size == small) {
          transform: translateX($m-s-14);
        } @else if ($size == medium) {
          transform: translateX($m-s-20);
        } @else if ($size == large) {
          transform: translateX($m-s-24);
        }
      }
    }

    .#{$class-prefix}-knob-loading--#{$size} {
      @if ($size == small) {
        font-size: $m-s-8 !important;
      } @else if ($size == medium) {
        font-size: $m-s-12 !important;
      } @else if ($size == large) {
        font-size: $m-s-16 !important;
      }
    }
  }
}
/* prettier-ignore */
[dir=rtl] .#{$hashClassName}.#{$class-prefix} {
  @each $size in $sizes {
    .#{$class-prefix}-knob--#{$size} {
      @if ($size == small) {
        transform: translateX(calc($m-s-2 * -1));
      } @else if ($size == medium) {
        transform: translateX(calc($m-s-4 * -1));
      } @else if ($size == large) {
        transform: translateX(calc($m-s-4 * -1));
      }
      &-checked {
        @extend .#{$class-prefix}-knob--#{$size};
        @if ($size == small) {
          transform: translateX(calc($m-s-14 * -1));
        } @else if ($size == medium) {
          transform: translateX(calc($m-s-20 * -1));
        } @else if ($size == large) {
          transform: translateX(calc($m-s-24 * -1));
        }
      }
    }
  }
}