@import "../../assets/scss/components/switch/variables";

.st-switch {
  $root: &;

  $core-width: ($st-switch-core-circle-width * 2) + ($st-switch-core-circle-spacing * 2);
  $core-height: $st-switch-core-circle-height + ($st-switch-core-circle-spacing * 2);

  display: flex;

  &__core {
    position: relative;
    width: $core-width;
    height: $core-height;
    cursor: pointer;
    background: $st-switch-inactive-color;
    border-radius: $core-height / 2;
    outline: none;
    transition: $st-switch-core-transition;

    &::after {
      position: absolute;
      top: $st-switch-core-circle-spacing;
      left: $st-switch-core-circle-spacing;
      width: $st-switch-core-circle-width;
      height: $st-switch-core-circle-height;
      content: '';
      background: $st-switch-core-circle-color;
      border-radius: $st-switch-core-circle-height / 2;
      transition: $st-switch-core-transition;
    }
  }

  &__inactive-label {
    margin-right: $st-switch-labels-margin;
    font-size: $st-switch-labels-size;
    cursor: pointer;
  }

  &__active-label {
    margin-left: $st-switch-labels-margin;
    font-size: $st-switch-labels-size;
    cursor: pointer;
  }

  &:not(&--active) {
    #{$root}__inactive-label {
      color: $st-switch-active-color;
    }
  }

  &--active {
    #{$root}__active-label {
      color: $st-switch-active-color;
    }

    #{$root}__core {
      background: $st-switch-active-color;

      &::after {
        left: $core-width - $st-switch-core-circle-spacing - $st-switch-core-circle-width;
      }
    }
  }

  &--disabled {
    cursor: not-allowed;
    opacity: 0.6;

    #{$root}__core {
      cursor: not-allowed;
    }

    #{$root}__inactive-label {
      cursor: not-allowed;
    }

    #{$root}__active-label {
      cursor: not-allowed;
    }
  }
}