@import '../../common/style/press/var.scss';

.press-switch {
  position: relative;
  display: inline-block;
  box-sizing: content-box;
  width: var(--switch-width, $switch-width);
  height: var(--switch-height, $switch-height);
  background-color: var(--switch-background-color, $switch-background-color);
  border: var(--switch-border, $switch-border);
  border-radius: var(--switch-node-size, $switch-node-size);
  transition: background-color
    var(--switch-transition-duration, $switch-transition-duration);

  &__node {
    position: absolute;
    top: var(--switch-node-top, $switch-node-top);
    left: var(--switch-node-left, $switch-node-left);
    border-radius: 100%;
    z-index: var(--switch-node-z-index, $switch-node-z-index);
    width: var(--switch-node-size, $switch-node-size);
    height: var(--switch-node-size, $switch-node-size);
    background-color: var(
      --switch-node-background-color,
      $switch-node-background-color
    );
    box-shadow: var(--switch-node-box-shadow, $switch-node-box-shadow);
    transition: var(--switch-transition-duration, $switch-transition-duration)
      cubic-bezier(.3, 1.05, .4, 1.05);
  }

  ::v-deep &__loading {
    position: absolute !important;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
  }

  &--on {
    background-color: var(
      --switch-on-background-color,
      $switch-on-background-color
    );

    .press-switch__node {
      transform: translateX(
        calc(
          var(--switch-width, $switch-width) -
          var(--switch-node-size, $switch-node-size) -
          var(--switch-node-left, $switch-node-left) * 2
        )
      );
    }
  }

  &--disabled {
    opacity: var(--switch-disabled-opacity, $switch-disabled-opacity);
  }
}