@import "~@alifd/next/lib/core/style/_global";
@import "~@alifd/next/lib/core/style/_motion";
@import '~@alifd/next/lib/switch/scss/variable';
@import '~@alifd/next/lib/switch/scss/mixin';
@import './variables.scss';

.#{$css-prefix}switch {
  padding: $b-design-switch-padding;
  border: 0px;

  &-on:not([disabled]) {
    &:hover {
      box-shadow: inset $b-design-switch-hover-shadow;

      .#{$css-prefix}switch-btn {
        box-shadow: $b-design-switch-hover-shadow;
      }
    }

  }

  &-medium {
    &>.#{$css-prefix}switch-btn {
      left: calc(100% - 24px - 2px);
    }
  }

  &-small {
    &>.#{$css-prefix}switch-btn {
      left: calc(100% - 12px - 2px);
    }
  }

  &-off:not([disabled]) {
    &:hover {
      box-shadow: inset $b-design-switch-hover-shadow;

      .#{$css-prefix}switch-btn {
        box-shadow: $b-design-switch-hover-shadow;
      }
    }

    .#{$css-prefix}switch-btn {
      left: $b-design-switch-padding;
    }
  }

  &.#{$css-prefix}xs {
    @include bounding($b-design-switch-size-xs-width, $b-design-switch-size-xs-trigger, #{$b-design-switch-border-width-container}, $b-design-switch-border-width-trigger, $b-design-switch-size-xs-radius-container, $b-design-switch-size-xs-radius-trigger);

    &>.#{$css-prefix}switch-btn {
      border-color: $color-fill1-2;
      top: -1px;
      left: calc(100% - #{$b-design-switch-size-xs-btn-size} + 1px);
      width: $b-design-switch-size-xs-btn-size;
      height: $b-design-switch-size-xs-btn-size;
    }

    &.#{$css-prefix}switch-off>.#{$css-prefix}switch-children {
      margin-left: 8px;
    }

    &.#{$css-prefix}switch-on>.#{$css-prefix}switch-children {
      margin-right: 8px;
    }

    &.#{$css-prefix}switch-on {
      background-color: $color-brand1-6;
    }

    &.#{$css-prefix}switch-off:not([disabled]) {
      .#{$css-prefix}switch-btn {
        left: calc(0px - #{$b-design-switch-padding});
      }
    }

    &.#{$css-prefix}switch-off[disabled] {
      .#{$css-prefix}switch-btn {
        border-color: $switch-disabled-on-bg-color;
      }
    }

  }
}