.#{$ns}Switch {
  cursor: pointer;
  position: relative;
  display: inline-block;
  height: var(--Switch-height);
  min-width: var(--Switch-width);
  overflow: hidden;
  border-radius: var(--switch-size-default-top-left-border-radius)
    var(--switch-size-default-top-right-border-radius)
    var(--switch-size-default-bottom-right-border-radius)
    var(--switch-size-default-bottom-left-border-radius);
  background: var(--Switch-bgColor);
  margin: 0;
  vertical-align: middle;
  text-align: left;
  transition: all 0.5s ease;

  &.is-disabled {
    cursor: not-allowed;
    opacity: 0.4;
  }

  .text {
    margin: var(--switch-text-off-marginTop) var(--Switch-text-marginRight)
      var(--switch-text-off-marginBottom) var(--Switch-text-marginLeft);
    color: var(--Switch-valueColor);
    text-indent: var(--gap-xs);
    text-transform: uppercase;
    font-size: var(--switch-text-off-fontSize);
    font-weight: var(--switch-text-off-fontWeight);
    line-height: var(--Switch-height);
    vertical-align: super;
    font-style: normal;
    transition: all var(--animation-duration);

    > svg {
      width: var(--switch-text-off-fontSize);
      height: var(--switch-text-off-fontSize);
      margin-top: calc(
        (var(--Switch-height) - var(--switch-text-off-fontSize)) / 2
      );
    }
  }

  .slider {
    &:before {
      content: '';
      position: absolute;
      background: var(--switch-default-off-slider-color);
      width: var(--Switch-slider-width);
      top: var(--Switch-slider-margin);
      bottom: var(--Switch-slider-margin);
      left: var(--Switch-slider-margin);
      border-radius: 50%;
      transition: var(--Switch-slider-transition);
    }
  }

  &:hover {
    background: var(--Switch-onHover-bgColor);
  }

  &.is-checked {
    background: var(--Switch-checked-bgColor);

    .slider::before {
      left: calc(
        100% - var(--Switch-slider-width) - var(--Switch-slider-margin)
      );
      right: var(--Switch-slider-margin);
      border-width: 0;
      background: var(--switch-default-on-slider-color);
    }

    .text {
      margin: var(--switch-text-on-marginTop) var(--switch-text-on-marginRight)
        var(--switch-text-on-marginBottom) var(--switch-text-on-marginLeft);
      color: var(--switch-text-on-color);
      font-size: var(--switch-text-on-fontSize);
      font-weight: var(--switch-text-on-fontWeight);
    }

    &:hover {
      background: var(--Switch-checked-onHover-bgColor);
    }

    &:active {
      background: var(--Switch-checked-onActive-bgColor);
      .slider::before {
        left: calc(
          100% - (var(--Switch-height) + #{px2rem(2px)}) - #{px2rem(2px)}
        );
      }
    }
  }

  &.is-checked.is-disabled {
    .slider:before {
      color: var(--Switch-onDisabled-color);
    }

    .text {
      color: var(--Switch-onDisabled-color);
    }
  }

  input {
    position: absolute;
    opacity: 0;
  }

  &--sm {
    height: var(--Switch-height--sm);
    min-width: var(--Switch-width--sm);
    border-radius: var(--switch-size-sm-top-left-border-radius)
      var(--switch-size-sm-top-right-border-radius)
      var(--switch-size-sm-bottom-right-border-radius)
      var(--switch-size-sm-bottom-left-border-radius);

    .text {
      line-height: var(--Switch-height--sm);
      margin: var(--switch-text-off-marginTop)
        var(--Switch-text-marginRight--sm) var(--switch-text-off-marginBottom)
        var(--Switch-text-marginLeft--sm);

      > svg {
        margin-top: calc((var(--Switch-height--sm) - var(--fontSizeSm)) / 2);
      }
    }

    .slider::before {
      width: var(--Switch-slider-width--sm);
      top: var(--switch-size-sm-slider-margin);
      bottom: var(--switch-size-sm-slider-margin);
      left: var(--switch-size-sm-slider-margin);
      right: auto;
    }

    &.is-checked {
      .slider::before {
        left: calc(
          100% - var(--Switch-slider-width--sm) -
            var(--switch-size-sm-slider-margin)
        );
        right: var(--switch-size-sm-slider-margin);
      }
    }
  }

  &:active {
    .slider::before {
      width: calc(var(--Switch-height) + #{px2rem(2px)});
      border-radius: 10px;
    }
  }

  &-spinner {
    position: absolute;
    top: var(--Switch-slider-margin);
    bottom: var(--Switch-slider-margin);
    left: var(--Switch-slider-margin);

    & > &-icon > svg.icon {
      width: var(--Switch-spinner-icon-width);
      height: var(--Switch-spinner-icon-width);
    }

    &--sm {
      position: absolute;
      top: var(--switch-size-sm-slider-margin);
      bottom: var(--switch-size-sm-slider-margin);
      left: var(--switch-spinner-left--sm);

      & > .#{$ns}Switch-spinner-icon > svg.icon {
        width: var(--Switch-spinner-icon-width--sm);
        height: var(--Switch-spinner-icon-width--sm);
      }
    }

    &.#{$ns}Switch-spinner--checked {
      left: calc(
        100% - var(--Switch-slider-width) - var(--Switch-slider-margin)
      );
      right: var(--Switch-slider-margin);

      &.#{$ns}Switch-spinner--sm {
        left: calc(
          100% - var(--Switch-slider-width--sm) - var(--Switch-slider-margin)
        );
        right: var(--Switch-slider-margin);
      }
    }
  }
}

.#{$ns}Switch-option {
  vertical-align: middle;
  font-size: var(--switch-option-fontSize);
  font-weight: var(--switch-option-fontWeight);
  line-height: var(--switch-option-lineHeight);
  color: var(--switch-option-color);
  margin: var(--switch-option-marginTop) var(--switch-option-marginRight)
    var(--switch-option-marginBottom) var(--Switch-gap);

  &:first-child {
    margin-left: 0;
    margin-right: var(--Switch-gap);
  }

  &:empty {
    display: none;
  }
}

.#{$ns}Form-static {
  .#{$ns}Switch-option {
    vertical-align: initial;
    color: var(--text--muted-color);
  }
}

.#{$ns}SwitchControl {
  padding-top: calc((var(--Form-input-height) - var(--Switch-height)) / 2);

  &.is-inline {
    display: inline-block;
  }
}