.#{$CLASS_PREFIX}-switch-con {
  display: inline-flex;
  position: relative;
  cursor: pointer;
  user-select: none;
  border-radius: 16px;

  input {
    position: absolute;
    left: 0;
    opacity: 0;
    outline: none;
    z-index: -1;

    &:checked ~ .#{$CLASS_PREFIX}-switch {
      // NOT_PALLETE
      background: #142f8f;

      .#{$CLASS_PREFIX}-switch__toggle {
        justify-content: flex-start;
        &:before {
          right: 0;
          left: unset;
        }
      }
    }

    &:focus ~ .#{$CLASS_PREFIX}-switch {
      border-color: #142f8f;
    }
  }

  &.disabled {
    pointer-events: none;
    cursor: not-allowed;

    .#{$CLASS_PREFIX}-switch {
      background: rgba(colorUsage("gray", 6), 0.4);
    }
  }
}

.#{$CLASS_PREFIX}-switch {
  height: 16px;
  width: 36px;
  border-radius: 16px;
  background: colorUsage("gray", "main");
  padding: 4px;

  &:active {
    .#{$CLASS_PREFIX}-switch__toggle {
      &:before {
        width: 70%;
      }
    }
  }
}

.#{$CLASS_PREFIX}-switch__toggle {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  &:before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    content: "";
    height: 100%;
    width: 45%;
    background: colorUsage("gray", 1);
    border-radius: 16px;
    transition: all 0.2s;
    transition-property: left, right, width;
  }

  .#{$CLASS_PREFIX}-icon {
    color: white;
    width: 16px;
  }
}