.wcf__toggle_switcher{
  display: flex;
  flex-direction: column;

  .slide-toggle-wrapper{
    --switcher-width: 40px;
    --switcher-border-width: 2px;
    --switcher-indicator-width: 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    user-select: none;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;

    input {
      display: none;
    }

  }

  .before_label,
  .after_label{
    cursor: pointer;
  }

  .toggle-pane{
    display: none;

    &.show{
      display: block;
    }
  }

  &.style-1{
    .switcher {
      display: inline-block;
      width: var(--switcher-width);
      height: 20px;
      background-color: #999999;
      border: var(--switcher-border-width) solid #999999;
      border-radius: 10px;
      position: relative;
      cursor: pointer;

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: var(--switcher-indicator-width);
        height: var(--switcher-indicator-width);
        background-color: #ffffff;
        border-radius: 50%;
        transition: transform 0.3s;
        transform: translate(0px, -50%);
      }
    }
    input:checked + .switcher::before {
      transform: translate(calc(var(--switcher-width) - (var(--switcher-indicator-width) + 2 * var(--switcher-border-width))), -50%);
    }
    input:checked + .switcher {
      background-color: #000;
      border-color: #000;
    }
  }
  &.style-2{
    .before_label,
    .after_label{
      padding: 10px 20px;
      position: relative;
      z-index: 2;
      &:after{
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #000;
        z-index: -1;
        opacity:0;
        visibility: hidden;
        transition: transform 0.3s;
      }

      &.active{
        color: #fff;
      }

      &.active:after{
        opacity:1;
        visibility: visible;
        transform:translatex(0);
      }
    }
    .before_label:after{
      transform:translatex(100%);
    }
    .after_label:after{
      transform:translatex(-100%);
    }
  }
}