.Switch {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: var(--font-primary);
  cursor: pointer;
}

  .Switch_position_left {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-flow: row-reverse;
              flex-flow: row-reverse;
    }

  .Switch_position_left .Switch-Label {
        margin-right: var(--offset);
        margin-left: 0;
      }

  .Switch_width_full {
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      width: 100%;
    }

  .Switch_size_m {
      --box-width: 32px;
      --box-height: 18px;
      --switch-font-size: var(--control-text-size-l);
      --offset: var(--space-xs);
    }

  .Switch_size_m .Switch-Input::before {
        -webkit-transform: translateX(-13px);
                transform: translateX(-13px);
      }

  .Switch_view_primary:hover .Switch-Input:not(:checked) {
        --background-color: var(--color-blue-primary);
        --content-color: #fff;
      }

  .Switch_view_primary .Switch-Input:not(:checked) {
        --background-color: var(--color-gainsboro);
        --content-color: #fff;
      }

  .Switch_view_primary:hover .Switch-Input:checked {
        --background-color: var(--color-control-bg-primary-hover);
        --content-color: #fff;
      }

  .Switch_view_primary .Switch-Input:checked {
        --background-color: var(--color-control-bg-primary);
        --content-color: #fff;
      }

  .Switch-Input {
    position: relative;
    display: inline-block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: var(--box-width);
    height: var(--box-height);
    margin: 0;
    background-color: var(--background-color);
    border-radius: 99rem;
    cursor: pointer;
    -webkit-transition: background-color 0.15s, border-color 0.15s;
    transition: background-color 0.15s, border-color 0.15s;
    -webkit-appearance: none;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

  .Switch-Input::before {
      content: '';
      position: absolute;
      top: 4px;
      right: 4px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      width: calc(var(--box-height) - var(--control-border-width) * 7);
      height: calc(var(--box-height) - var(--control-border-width) * 7);
      background-color: var(--content-color);
      border-radius: 999rem;
      -webkit-transition: background-color 0.15s, -webkit-transform 0.15s;
      transition: background-color 0.15s, -webkit-transform 0.15s;
      transition: transform 0.15s, background-color 0.15s;
      transition: transform 0.15s, background-color 0.15s, -webkit-transform 0.15s;
    }

  .Switch-Input:checked {
      background-color: var(--background-color);
    }

  .Switch-Input:checked::before {
        -webkit-transform: translateX(0);
                transform: translateX(0);
      }

  .Switch-Label {
    margin-left: var(--offset);
    color: var(--color-control-typo-default);
    font-size: var(--switch-font-size);
  }

  .Switch_disabled {
    pointer-events: none;
  }

  .Switch_disabled .Switch-Input:disabled {
      --border-color: transparent;
      --background-color: var(--color-control-bg-disable);
      --content-color: var(--color-control-typo-disable);
    }

  .Switch_disabled .Switch-Input:disabled ~ .Switch-Label {
      color: var(--color-control-typo-disable);
    }

  .Switch_align_center {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

  .Switch_align_top {
      -webkit-box-align: top;
          -ms-flex-align: top;
              align-items: top;
    }

  .Switch_align_top .Switch-Input {
        margin-top: 1px;
      }
